{weatherData.name}

Course Title: Mastering React.js: Building Modern User Interfaces

Section Title: React Hooks: Advanced State and Effects

Topic: Implement a weather app that fetchs data using useEffect and displays it dynamically.(Lab topic)

Objective: By the end of this topic, students will be able to:

• Implement a weather app that fetches data using useEffect and displays it dynamically.
• Understand the importance of useEffect in managing side effects in React.
• Apply the useEffect hook effectively to fetch data from external APIs.

Prerequisites: Students should have a good understanding of React Hooks, useState, and useContext.

Implementation:

Let's create a simple weather app that fetches data from the OpenWeatherMap API. We'll use the useEffect hook to handle the side effect of fetching data from the API.

Step 1: Create a new React app

Create a new React app using Create React App:

npx create-react-app weather-app

Step 2: Install required libraries

Install the axios library to make HTTP requests to the OpenWeatherMap API:

npm install axios

Step 3: Create a Weather component

Create a new file called Weather.js in the src directory:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';

const Weather = () => {
  const [weatherData, setWeatherData] = useState({});

  useEffect(() => {
    const fetchWeatherData = async () => {
      const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London&appid=${API_KEY}`);
      setWeatherData(response.data);
    };
    fetchWeatherData();
  }, []);

  return (
    <div>
      <h1>{weatherData.name}</h1>
      <p>Temperature: {weatherData.main.temp}°C</p>
      <p>Humidity: {weatherData.main.humidity}%</p>
    </div>
  );
};

export default Weather;

Step 4: Create the App component

Create a new file called App.js in the src directory:

import React from 'react';
import Weather from './Weather';

const App = () => {
  return (
    <div>
      <Weather />
    </div>
  );
};

export default App;

Step 5: Run the app

Run the app using npm start:

npm start

Open your browser and navigate to http://localhost:3000. You should see the weather data for London displayed dynamically.

Key concepts:

• useEffect is used to handle side effects, such as fetching data from an API.
• The fetchWeatherData function is an example of a side effect that is executed when the component mounts.
• The setWeatherData function is used to update the component's state with the fetched data.
• The useCallback hook is not used in this example, but it can be used to memoize the fetchWeatherData function to prevent unnecessary re-renders.

Practical takeaways:

• Use useEffect to handle side effects in your React components.
• Use the useState hook to manage state in your components.
• Use the axios library to make HTTP requests to external APIs.

References:

• OpenWeatherMap API documentation: <https://openweathermap.org/api&gt;
• React Hooks documentation: <https://reactjs.org/docs/hooks-intro.html&gt;

Leave a comment or ask for help: