From 44d52a318ce99d39954da5e174d8e58bd8d3c69b Mon Sep 17 00:00:00 2001 From: lucymac Date: Fri, 12 Jun 2020 23:35:28 +0100 Subject: [PATCH] removes class comp and updates readme --- README.md | 49 ++++++++++++++++++++++++++----------------------- src/App.css | 3 +++ src/App.js | 29 ++++++++++++----------------- src/App.test.js | 9 --------- 4 files changed, 41 insertions(+), 49 deletions(-) delete mode 100644 src/App.test.js diff --git a/README.md b/README.md index 6c36e40..14e0f73 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Please **fork** and **clone** this repository. There are instructions for how t Then navigate to the correct directory using the command line. -In the project directory, you can run: +Once you're in the project directory, you can run: ``` npm install @@ -17,17 +17,20 @@ This runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. -Edit `App.js` and add a tiny change - maybe have the blank page say your name! +### Test to see if it worked +Edit `App.js` and add a tiny change, like adding your name, to see if the change appears. Add and commit this change to git, and push it up to your remote github repo: ``` git add . -git commit -m "Added my name to the app!" +git commit -m "Added my name to the app" git push ``` Pay attention to any errors, and then check that your changes made it to github, by visiting github.com with your browser and inspecting your repo there. +All good? Then let's get coding. + ## Instructions ### Aim @@ -40,7 +43,7 @@ You will be connecting to a real-time weather API to make a weather app that loo ### 1. Getting started: Static HTML and CSS -Let's start slow by creating the HTML and CSS we need to make the app look like the design: do this is App.js and App.css +Let's start slow by creating the HTML and CSS we need to make the app look like the design: do this is `App.js` and `App.css` Don't worry about fetching data yet, you can use **invented, "hardcoded"** values for now - just focus on getting content up on the page and imitating the design provided. However, do not leave out the values! Put numbers in so that you can confirm how the layout will work with numbers present. Using the numbers that occur in the screenshot is a good idea. @@ -48,16 +51,14 @@ A few things to think of: - The font you need is called `Raleway` and is already loaded up into the project - but remember you'll need to declare it in your CSS. - You'll need to copy the colours, spacing, layout and size of elements in the design. This is a core skill as a front-end developer! :) -- Use placeholder images (such as [these kittens](https://placekitten.com/) ), initially. -- Extra points if you can think of a nice way to display the app on mobile ;) +- The weather icons you need are in the `img/weather-icons` folder, but you can use a placeholder image like [this one](https://cdn2.iconfinder.com/data/icons/weather-flat-14/64/weather02-512.png) for now if that's easier. See the next section below for help with images. +- Extra points if you use media queries to make the app responsive ;) #### A note on using images in React -Once you have your design working with placeholder images, you can try using the weather icons we've provided. - There is a special way to show images from a React app created with create-react-app. You can [read about how to add and use images in a create-react-app project in the official docs](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files), but in short, you'll need to do these two things: -At the top of your component, import the image: +At the top of your component, import the image like this (remember to give it a name!) ``` import storm from '../img/weather-icons/storm.svg'; @@ -70,6 +71,7 @@ Then later in your `` tag, use the imported value as the image source, lik Once you're happy with the way your app looks, it's time to move on. + ### 2. Break your HTML into React components This is about cutting up your one big single block of HTML and putting sections of it in React components instead. @@ -78,7 +80,7 @@ You'll need several components - you can decide how much you want to break thing ![wireframe](src/img/instructions/wireframe.png) -If you find yourself copy-pasting an html section multiple times with small changes, you've probably found a good candidate for a reusable React component. +If you find yourself copy-pasting an HTML section multiple times with small changes, you've probably found a good candidate for a reusable React component. Note that your React components at this stage should still have hardcoded numbers for temperature, etc. @@ -99,10 +101,10 @@ Copy all contents into a new file and add it to your project somewhere under the Import it into your react app with ``` -import FakeWeather from "./data/FakeWeather.json"; +import FakeWeatherData from "./data/FakeWeather.json"; ``` -Into which react component should you load it? The highest component in the hierarchy that needs to know about the weather, or that needs to communicate it to its children. +Into which react component should you load it? The highest component in the hierarchy that needs to know about the weather, or that needs to communicate it to its children. #### About the JSON structure @@ -110,7 +112,7 @@ Spend some time investigating the json structure and figuring out which bits you This JSON represents weather data for **just one city**. -It includes **a `list` array containing the weather forecast for the next 24 hours, split into 8 x 3-hour chunks** +It includes **an array called `list` containing the weather predicitons for the next 5 days, split into 8 x 3-hour chunks** Each object inside `list` contains a `weather` array with an object that looks like this: ``` @@ -124,9 +126,11 @@ Each object inside `list` contains a `weather` array with an object that looks l ] ``` +**Note:** the `list` data includes 36 items (to cover forecasts for 5 days). The design only requires you to use enough to cover 24 hours - so you won't need every single item in the array. + #### Extracting the values from the Fake Weather json -Now it's time to replace all of the hard-coded values in your html with values from `FakeWeather.json`. +Now it's time to replace all of the hard-coded values in your HTML (or JSX) with values from `FakeWeather.json`. You will probably have to pass sections of the weather object to child components, as props. @@ -134,9 +138,7 @@ Once you've got this all working, it's time to fetch some real weather data! ### 5. Getting the LIVE weather data -We'll be using data from this API: http://api.openweathermap.org/data/2.5/forecast?q=${this.state.searchInput}&cnt=8&units=metric&appid=${apiKey} - -The data will come in JSON format, and will look like this: https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22 +We'll be using data from this API: https://openweathermap.org/forecast5 for which **you'll need an API key**: **1)** Register to get your personal API key. This is free, and will enable you to make (limited) requests to fetch the weather data you need. Follow the steps here: https://openweathermap.org/appid @@ -147,7 +149,7 @@ The data will come in JSON format, and will look like this: https://samples.open **3)** The format you'll need to follow to make API calls is: `http://api.openweathermap.org/data/2.5/forecast?q=${CITY_NAME}&cnt=8&units=metric&appid=${YOUR_API_KEY}` -where CITY_NAME is replaced by the city you're looking for, for example 'London', and YOUR_API_KEY is replaced with... your personal API key, of course. +where `CITY_NAME` is replaced by the city you're looking for, for example 'London', and `YOUR_API_KEY` is replaced with... your personal API key, of course. example format: http://api.openweathermap.org/data/2.5/forecast?q=London&cnt=8&units=metric&appid=57cf9da04987637a23fcbc26f5356e12 (this doesn't work because it's a fake API key, but when you replace it with yours, it will ;) ) @@ -163,8 +165,9 @@ Look at the design: - The response you get from the API will need to be passed down as props to the `` component so it knows what weather to display. -- As we've seen before, the response will include **a `list` array containing the weather forecast for the next 24 hours, split into 8 x 3-hour chunks** -Each object inside `list` contains a `weather` array with an object that looks like this: +- As we've seen before, the response will include a `list` array containing the weather forecast for the next 5 days, split into chunks. **You will only need the first item in `list` to display the current weather** (you will use the rest of the items later to display *future* weather). + +- Each object inside `list` contains a `weather` array with an object that looks like this: ``` "weather": [ @@ -176,11 +179,11 @@ Each object inside `list` contains a `weather` array with an object that looks l } ] ``` -**The `id` is what we'll use to display the current weather icon.** +**The `id` is what we'll use to display the current weather icon** (you can ignore the "icon" key in the above object). ### 6. Matching up the weather `id` with the appropriate icon -We will **not** be using the `icon` property of the data, we will only use the `id` and match it with our own svg icons. You can find these svgs in `src/img/weather-icons`. +We will **not** be using the `icon` property of the data, we will only use the `id` and match it with our own SVG icons. You can find these SVGs in `src/img/weather-icons`. You will need to write some code to do the following: @@ -200,7 +203,7 @@ So for example, in the above response, the `id` was 521, which is between 500 an ### 7. Showing more weather information Once you're showing the icon, you can also display information about the temperature, the humidity etc. -Have a look at the response from the API to find this information, and try to display it as shown in the design! ;) +Have a look at the response from the API to find this information, and try to display it as shown in the design! ### 8. Error-Handling diff --git a/src/App.css b/src/App.css index 0c2e58d..94d964b 100644 --- a/src/App.css +++ b/src/App.css @@ -25,4 +25,7 @@ +/* Future weather */ + + diff --git a/src/App.js b/src/App.js index d8adbcd..1bd958a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,19 @@ -import React, { Component } from 'react'; +import React from 'react'; import './App.css'; -class App extends Component { +function App() { + return ( +
- constructor(props) { - super(props); - this.state = { - }; - } +
+
- render () { - return ( -
-
-
-
-
-
- ); - } +
+
+ +
+ ); } + export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b20..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -});