Quick Tip: Build a Video Player Component in React

This article was peer reviewed by Craig Bilner. Thanks to all of SitePoint's peer reviewers for making SitePoint content the best it can be!

In this quick tip, we're going to create a React video component. This will enable you to define a list of videos and allow your visitors to cycle between them. The component will support Vimeo, YouTube and Dailymotion but you can easily extend it to support other video providers.

[author_more]

By way of a dev environment we'll use react-hot-boilerplate which comes with hot reloading enabled. This means we can build our component and see the results immediately in the browser, without refreshing the page every time the code changes.

You can find the source code on our GitHub repo, as well as a demo at the bottom of the article.

Starting from a Boilerplate

We'll start by setting up our working environment from a boilerplate. Assuming you have git installed on your machine, let's clone the repo by running:

git clone https://github.com/gaearon/react-hot-boilerplate

This will create a folder react-hot-boilerplate in the directory we're at. Let's now navigate to that folder and install dependencies by running:

cd react-hot-boilerplate
npm install

Next, we'll need to install querystring which we'll be using later on.

npm install --save query-string

Finally, we can kick things off with:

npm start

If things have gone according to plan, the message Listening at localhost:3000 will appear in the prompt. Webpack will still need to process the files before being able to serve them. After some delay, a sequence of operations should appear in the prompt, ending with webpack: bundle is now VALID, which means everything is ready to go.

By navigating to http://localhost:3000/ in the browser you should now be able to see 'Hello, world.' displayed.

Creating the Component

The first thing to do is to create the component file at src/social-video.js. For now the minimal code needed for the component to work and some dummy render content will suffice.

import React, {Component} from 'react';

export default class SocialVideo extends Component {
  render() {
    return (
      <h1>Social Video</h1>
    );
  }
}

Continue reading %Quick Tip: Build a Video Player Component in React%