Recently i started to add more articles to my old blog series on Creating a Youtube Player. I had added articles to refactor it to use Redux, now i am changing the project to use React Hooks instead of the class based components.

You can find the whole series here.

I had also started creating an YouTube video series on the same. You can find the whole playlist here.

So, let’s start converting our class based project to function based project, using hooks.

First, we are cloning the old project from my GitHub repo. You can find it here.

Cloning

Next, we have to add the API key which is been used to get data from youtube API. You can find details about how to get it in my first post here.

.env

Next, let’s change to the directory and do npm install to install the packages required for this project.

npm install

After that open the App.js and delete all components except the VideoList. We are going to change the logic for it first.

App.js

Now, first change the class based component to a function based component. After that at Line 7, we are using the useState hook to create a local state of videos and initializing it to an empty array.

After that we are using another hook useEffect to call a function fetchResource with the initial React Tutorials value. Now we are calling useEffect with an empty array. We are doing this because useEffect is a combination of componentDidMount and componentDidUpdate, and if we don’t pass the empty array, it will be called every-time the App component is rendered. We want to only it to call the fetchResource once, i.e. only use componentDidMount feature and hence pass the empty array. You can read more about it in this awesome blog post here.

I also have a post, which explains in details the useState and useEffect hooks. You can find it here.

Inside the fetchResource function, we are doing the API call with our familiar YTSearch() function. We are then using setVideos(basically setState) to change the state of videos.

After that we are just passing it to the VideoList component.

App.js

With this our App will be shown as below.

App

This completes part-1 of the series.

You can find the code for the same in my github repo here.