React.js Youtube Data API V3 Video Search Example Using Axios Full Tutorial For Beginners (2020)


Welcome folks today in this blog post we will be building a youtube video search app in react.js using axios and youtube data api v3. All the source code of the video is shown below. A step by step youtube video is also shown below.












Get Started


In order to get started you need to install these dependencies as follows

npm i axios

Through axios we will be making the http request to the youtube data api v3. So we will get the videos data and display these videos using their respective components.

Now you need to make the app.js file and import react dependency as follows




Now after that we will making this base app component like this




Make Search Component


Now we will be making the search component and in this we will be having the form in which we will be having a simple input field like this






Now we will be including this component inside app.js file like this








Now we will submit the form and when we submit the form with the actual keyword and when we hit the enter button this function onSearch function will execute and we will write this function as follows





So write here inside this block of code we are writing the async function and inside this we are using a separate component youtubeApi so in this component we will use axios to make the get request to the youtube data api v3












Making the Videos List Component



Now inside this section we will be making the Videos List Component. Inside this videos list component we will be displaying four videos inside the form of a list.








Now inside this block of code we are making the individual video component i.e. video.js so inside this video.js component we will pass the data and also pass which video is selected and pass it’s id.





Now we will include the videoList component inside the app.js like this as shown below.






Making the VideoPlayer Component




In order to use this component we will pass the selectedVideoId of the video which is selected





App Component Styles





Video Component Styles






Leave a Reply