React Weather Forecast

In this exercise, you will practice creating reusable React Components.

Use the following CodeSandbox Starter code.




React Hierarchy

Here is the React Hierarchy you will be implementing:





Getting Started

In src/index.html you will find five weather elements that generate the output you are seeing now.

Perform the following to complete the lab:

Creating The Data

  1. Create a new file called weatherData.js that contain an array of five objects with the following properties: img,conditions,time.
  2. Populate the objects based on the values from those same elements in the HTML
  3. Import into App.js
  4. Console.log the file to confirm that it has been imported



Creating The WeatherForecast Component

  1. Look over the HTML structure used to create the weather icons
  2. Create a WeatherForecast Component based on the HTML structure
  3. Make sure to set the Component up to accept props and update the JSX to work with those props



Rendering The WeatherForecast Component

  1. Import the WeatherForecast Component into App
  2. Loop over the weatherData array data and create a WeatherForecast Component for each element passed
  3. In the loop pass the element the props it needs for img, conditions and time.
  4. App will then render those WeatherForecast Components



Bonus

  • Try creating the following additional Components:

    • WeatherIcon - contains only the img
    • WeatherData - contains both the conditions and time


If successful, your React Hierarchy will now look like the following: