**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** Integrating RESTful APIs and Asynchronous Data Fetching **Topic:** Develop a movie search application that fetches data from a public API and displays results.(Lab topic) **Objective:** In this lab topic, you will learn how to develop a movie search application that fetches data from a public API (The Movie Database API) and displays results. You will practice integrating RESTful APIs, handling asynchronous data fetching, and managing loading states. **Prerequisites:** * Basic understanding of React and its ecosystem * Familiarity with JavaScript and HTML/CSS basics * Create React App setup (already covered in the introduction to React and development environment) **Step 1: Setting Up the Project** Create a new React project using Create React App: ```bash npx create-react-app movie-search-app ``` Install the required dependencies, including `axios` for making API calls: ```bash npm install axios ``` **Step 2: Understanding the Public API** The Movie Database API (TMDb API) provides a public endpoint for fetching movie data. Start by exploring the API documentation to understand the available endpoints and parameters: <https://www.themoviedb.org/documentation/api> Familiarize yourself with the API syntax and request data. **Step 3: Creating the Movie Search Component** Create a new component called `MovieSearch` that will handle the user input and API calls: ```jsx import React, { useState, useEffect } from 'react'; import axios from 'axios'; function MovieSearch() { const [query, setQuery] = useState(''); const [movies, setMovies] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchMovies = async () => { if (query) { setLoading(true); try { const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query=${query}`); setMovies(response.data.results); setError(null); } catch (error) { setMovies([]); setError(error.message); } finally { setLoading(false); } } }; fetchMovies(); }, [query]); const handleSearch = (e) => { setQuery(e.target.value); }; return ( <div> <input type="text" value={query} onChange={handleSearch} placeholder="Search movies" /> {loading ? ( <p>Loading...</p> ) : error ? ( <p>Error: {error}</p> ) : ( <ul> {movies.map((movie) => ( <li key={movie.id}>{movie.title}</li> ))} </ul> )} </div> ); } export default MovieSearch; ``` **Step 4: Integrating the Movie Search Component** Integrate the `MovieSearch` component into the main app component: ```jsx import React from 'react'; import MovieSearch from './MovieSearch'; function App() { return ( <div> <MovieSearch /> </div> ); } export default App; ``` **Step 5: Running the Application** Start the development server: ```bash npm start ``` Open the application in your web browser and search for a movie title. The application should fetch the movie data from the public API and display the results. **Key Concepts:** * RESTful API call: `https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query=Crimsonlicher` * Asynchronous API call: `axios.get()` with `await` * Handling loading states: `setLoading(true)` and `setLoading(false)` * Handling errors: `try-catch` block and `setError(null)` or `setError(error.message)` **Practical Takeaways:** * Use the `transformReplyData` function in the TMDb API to customize the response data. * Handle errors by displaying an error message to the user. * Use the `axios` library to make API calls and handle asynchronous responses. * Use the `useState` hook to manage state changes in the component. **Exercise:** Modify the `MovieSearch` component to fetch data from a different API endpoint (e.g., `https://api.themoviedb.org/3/persons?api_key=YOUR_API_KEY&name=Lucas`) and display the results. **Comment or ask for help:** What challenges did you encounter while building the movie search application? How did you overcome them?