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.

 

 

 

 

 

Screenshots

 

 

 

 

 

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

 

 

 

 

api/youtube.js

 

 

 

 

 

 

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