TMDB movie database tutorial | Fetch and list data from tmdb | React js | For beginners

if this video is helpful to you please consider subscribing to the channel like the video and comment your feedback so first of all I am going to create a new react.js project using Create react app so in PX create react app and I'm giving the name of the app as movie app okay so now a new reality is Project will be created so we have to wait for that okay so new react.js project has been created so I'm going to remove all the boilerplate code or unwanted files so like logos and app.test.js okay so next I am going to remove this portion in index.js and I'm going to change the m.js as like this way okay so next I am going to run the project so here is a project okay so next I am going to take the tmdb website so here I'm going to click the first link then we will be redirected to the home page of the tmdb website we have to take an account so I have already created an account here so after creating an account I am going to the settings options in this drop down I am clicking that button then we will be redirected to this section here you can see that in the sidebar there is an APA so I am clicking on that AP then here there is an API key so we need this API key for adding it to the URL so next I am going to click on this more button at that time you can see that here is a drop down which contains APA so I am going to click on this API okay here next I am going to click on the API reference then you can see that there are different options in the sidebar of this APA reference from there you can see that there is a discover section so from this discover friction section I am going to click on this movie and you can see that here there is an URL so I am going to copy the URL up to movie and question mark so I have copied that then next I am going to use this URL in our project so here I am going to create another component in this components folder so I am giving the name of the component as movie so you can see that this is a component so here in this component I am going to Define a function that is get movie and I'm using fetch and I am inserting the URL as like this way and next I am going to give the API key that is the API key we we have here so I am going I have copied this I am going to copy this API key and I'm going to paste it there okay so now I'm going to use the response so we will get the response and I'm going to convert that response into Json format then I am going to console that creation formatted response Okay so so I am going to call this function inside the use effect hook so as like this way that is get movie so now you can see that we have defined a function which which in which we have used the uh this URL with our API key then I'm going to call this movie component in this app.js so movie that's like this way so now you can see that I'm going to the browser and here I'm taking the console here you can see that we have used the movie component or called movie component in the app.js okay so this is our result so you can see that here it contains an array that is uh results so I'm going to put as Json dot or cells so we will get the exact array so this is the array so it contains 20 details of 20 movies so for example you can see that the name of the movie and overview of that movie and other different informations like language and poster okay and release date okay so we are going to use these details so first of all I am going to pass that into an array so for that I am going to create or Define a state and giving the name of the state as movie list that is that movie list so here search movie list so now I am going to log this this movie list there so console.log movie list okay so you can see that in the console this is the movie listed so next I am going to State and I am going to map through that movie list just like this way so here I'm going to use the image tag so you can see that here in the list of movies the poster path is only an end point so there is no full URL so we have to give the basic image URL and at the end the point we can give this poster box so for that it I am going to uh click on this guides in the nav bar of the tmdb here you can see that in the uh sidebar of these guys there is an image section so here is a Basics so I'm going to click on this basics and here here you can see that this is the basic you it contains a basic URL so I am going to copy up to here and I'm going to use that in this Source attribute so I'm giving a biotic and I am going to paste that and I'm going to use that by movie Dot poster path okay so now you can see that okay so uh this is the posters of each movies so I'm going to reduces the size Style with uh to 300 PX height to 250 PX okay so you can see that here this is a poster so next I am going to give the margin left and the top let's like this way okay so you can see that now it is uh yeah it is ordered just like this way yeah it is much better that is margin top so we have used the tmdb and listed the uh poster or listed the movies so I think this very useful if this video is useful to you please consider subscribing to your channel like the video and comment your feedback thank you

Channel: YS2code

Views: 18,569

Keywords: #react, #reactjs, #movie database, #tmdb, #basic, #tutorial, #beginners, #fetch, #TMDB database tutorial, #The Movie Database tutorial, #How to use TMDB API, #TMDB database integration, #TMDB database setup guide, #Working with TMDB API, #TMDB API for movie data, #TMDB database project, #TMDB database search, #TMDB database examples, #TMDB database application, #TMDB database integration in a website, #TMDB API usage, #TMDB database for movie enthusiasts, #TMDB database developer guide

Id: 03FAepR-WVQ

Length: 10min 14sec (614 seconds)

Published: Tue Aug 08 2023