Using React to Make a Video Player
Implementing YouTube’s search in a React App

I’m going to walk through the steps I took to implement youtube’s api search function and set up a basic video list and video rendering. If you’re boss enough to figure out youtube api’s documentation, you can find it here-
https://developers.google.com/youtube/v3/docs/search
or follow along my blog post here:
https://medium.com/@the_wong_code/starting-your-first-react-project-3737c63cf255
Let’s get started!

We’ll be making a simple react app with a search bar, a list of videos that resulted in the search, and a current video that is being played.
Setting up
If this is the first time you’re creating a new react app (or you forgot like I always do), I recommend you following along React’s documentation on getting started. You can find that here: (https://reactjs.org/docs/create-a-new-react-app.html)
Navigate to your ./src/App.js (this can be done in your ./index.js file also, but I prefer to put everything in my ./App.js file) file and import the YTSearch library like below:

Then in your terminal, run npm install.
Next, in your file tree, create a components folder in your src folder and create the following files in ./src/components:
- CurrentVideo.js
- SearchBar.js
- VideoList.js
- VideoListCard.js

Usually we import our components, but because we haven’t built them yet, React is going to be very upset when it tries to render. We’re going to start with the Search component so we can follow the chain of getting videos and displaying videos.
At the top of your App.js file, import your SearchBar:
import SearchBar from './components/SearchBar'
Let’s create local state in our App component so when we get videos back, we have somewhere to put them and we’ll import SearchBar into our return:

But wait, if our SearchBar is doing the work, how will we load up our returned videos to our parent component?
Answer: DAILY DOUBLE!
Oops wrong show.
Answer: we pass in a function to SearchBar but our function will live in App.js which will allow us to load our videos into our state and handle the return in the App.js level and not be stuck in the SearchBar.js component:

Next, we need to build our SearchBar. Which we’ll tackle in the next blog post here.
Special thanks to the help of Nabendu Biswas’s blog, you can read part 1 of his 3 part blog here: (https://medium.com/@nabendu82/create-youtube-player-in-reactjs-part-1-3b949de9b251)
