Thinking in Components ⭐️

Data

For this 2 week challenge, we are going to be making a 5 day weather forecasting app.

The data will be coming from a Web API, and will be in this format. At first, we will just use this JSON file for our data, and we will look about bringing in live data from the internet later on.

N.B. The date property on each forecast object is in unix time in milliseconds - the number of milliseconds that have passed since 1st Jan 1970 00:00:00:0000. Timestamps in this format are a standard way of representing date information. You will see this date as a default when no value has been given to a time stamp.

Scope of the project

As an MVP (Minimum Viable Product), we are going to implement the following features:

• Users should be able to see the name and country of the city the forecast is for.

• Users should be able to see a summary of each day of the forecast, including the date, general description of the weather that day, and maximum temperature.

• Users should be able to click on one of the summaries to view all of the forecasted information for that date.

The app will look something like this:

App requirements

This step doesn't involve any code - you're just going to set out a plan for what you want your solution to look like. Read the documentation for thinking in React: https://reactjs.org/docs/thinking-in-react.html

Your challenge is to come up with the following details:

• Using the screenshot, what components do you think the UI can be broken down into?

• What props will each component need in order to render correctly? That is, what pieces of data will it need?

If you pair with another student, discuss these questions with them, and make notes on your answers. Feel free to draw diagrams etc. to help you out.

Once you're done, take a look at the walkthrough and compare what you have with our solution.