Using React to Make a Video Player

The_Wong_Code
Nov 6 · 3 min read

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!

Webframe for our new app

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:

App.js file

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
File tree

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:

Creating state and returning the SearchBar component

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:

Adding a handleSubmit function and passing it to SearchBar

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)

The_Wong_Code

Written by

Changing W(r)ong code to (W)right, one fundamental concept at a time!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade