**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: ```bash npx create-react-app weather-app ``` **Step 2: Install required libraries** Install the `axios` library to make HTTP requests to the OpenWeatherMap API: ```bash npm install axios ``` **Step 3: Create a Weather component** Create a new file called `Weather.js` in the `src` directory: ```jsx 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: ```jsx 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> * React Hooks documentation: <https://reactjs.org/docs/hooks-intro.html> **Leave a comment or ask for help:**