Now our Aim is to grab those movies, so let's start the project: We are going here to create React Project
Setting up project
Let’s create an Application using Command Prompt
CMD > npx create-react-app moviesNow go to the movies folder…
cd moviesPlease note I have deleted files //www.themoviedb.org/settings/api1 which are not needed for our project.
modified project
Let's modify our code:
index.js
import React from "react";import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));
App.js
import React from 'react';const App = () => {return (
<div>
<h1>Hello App Component</h1>
</div>
);
};export default App;
Running our Modified Project for the first time:
//www.themoviedb.org/settings/api2
Output
Now we are going to fetch movies into App.js component using fetch() API of javascript. We are going to use async and await to handle the asynchronous data (Promise).
Let’s create an anonymous function to get movies from the API :
Once the Popular movies are fetched it is going to be stored inside a variable called ‘data’. Finally, this data coming from the API needs to be converted into JSON format, so we are going to convert it to JSON and store it into a variable called ‘movies’. Please note that is coming from the server will not on the same time to handle this we have used async and await keyword ensures to wait until the defined task gets executed.
When the page loads you want that API data on your webpage, to get this data we are going to make use hook called useEffect().
Whenever the component gets rendered we are going to use hook useEffect() i.e when the component gets rendered out, run the fetchPopular() function. The empty array [] written at the end of useEffect() ensures that it will load only for the first time i.e it runs when a piece of the state gets updated then this useEffect runs again and it may also help to avoid the infinite loop.
//www.themoviedb.org/login0If you are familiar with React class lifecycle methods, you can think of useEffect() Hook is combination of componentDidMount, componentDidUpdate, and componentWillUnmount.
→ You can see Movies output in the console of our Browser.
→ Now again to store that data somewhere, here we are stored in a little piece of state, which requires a hook called useState().
//www.themoviedb.org/login1Here popular is the variable and setPopular is actually a function that can be used to modify the data. The data that is we are getting from the movie database is in the form of an array of objects(see console), so empty array [] is passed in the useState().
//www.themoviedb.org/login2Setting the list of movies available of results, because results object has all the data (see console):
Loop over to popular movies using map() to get all data of movies.results. This will map and return each movie one by one.
//www.themoviedb.org/login3First, let’s create a movie component.
//www.themoviedb.org/login4If Everything is correct we should output like this:
output for movies
Also if we check the console it has some data.
Now to get the Actual output we are going to use the Props in order to pass data from the Parent to Child component. Now we have to send data from Parent (App.js) to Child (Movie.jsx) so we are going to make use of Props.
For simplicity, I make this tutorial in stapes and assuming that you are a beginner and your know some basic of react and react hooks like useState, and useEffect because I use these two hooks in their
I start this tutorial after creating an empty react app and for API I use jsonplaceholder’s this API > //jsonplaceholder.typicode.com/albums/
- Create a React state variable to hold data
- Make the API request and store the data
- Render the returned data
For this first import useState
import { useState } from 'react';Now set the useState to hold the data like this
const [name, setName] = useState([]);After this, the code should look like this
import { useState } from 'react';function App() {const [name, setName] = useState([]);return (<div className="App"><div>render the data here</div>
</div>);}export default App;
The default value of name is set to an empty list and the setName method use to Update the value of name
2) Make the API request and store the datafor this, There are many methods and I show you to fetch and store data use javascript’s builtin function fetch()