Build Youtube in React 02: Project Setup

1. Youtube in React: Getting started

1.1 Setup Git repository

Head over to Github and create a new repository.

Let’s name the repo youtube-react. Make sure that your repository is empty when you create it (uncheck Initialize this repository with a README and don’t add a license or a .gitignore file).

Now fire up a terminal and cd to the desired project location.

1.2 Scaffold app using create-react-app

We are going to use Facebook’s create-react-app terminal application to scaffold a boilerplate React project. Like so, we don’t need to deal with complex Webpack or Babel configurations.

Head over to your terminal and create a new React application by using create-react-app.

Let’s create a local repository and connect it to Github. Note that create-react-app automatically creates a .gitignore file so you don’t commit and push ./node-modules.

After that, please go to your Github account and create a new (public) repository. After that, initialise a local repository and connect it to Github like so:

Please replace the <YOUR_REPO_NAME> with your repository name.

You can find our repo under this URL https://github.com/productioncoder/youtube-react.

After this process, you should have a working boilerplate React app and version control set up.

Run

to check if your React app is starting up on localhost:3000.

Note that you can use npm and yarn interchangeably.

2. Cleanup boilerplate project

Let’s first get rid of some of the default content.

1. Delete the logo.svg file in the src directory. Don’t forget to remove the import statement in the App.js file
2. Remove the App.css file in the src directory and also remove its import in the App.js file
3. Delete the index.css file in the src directory and remove the import statement in index.js

Finally, replace the contents of the render method in App.js with some text in a div.

After these changes, you should not see a blank webpage with the text Hello World on it.

3. Install SCSS

To keep your styling more concise and understandable, we will use SCSS throughout the project.

3.1. Install dependencies

Please install the node-sass module into your project to make use of SCSS.

3.2. Using SCSS

We use SCSS to have a more concise way to represent our styling. As of Create React App 2.0, SCSS is supported out of the box.

This means that we can just import the .scss file into our components and that Create React App will take care of the rest.

You can check out the official guide for more info, but that is pretty much all that we have to do.

4. Wrap up

Don’t forget to commit your changes if you set up version control with git.

Also, feel free to commit as often as you want in your project. We recommend you commit at least after every new tutorial.

You can find this project’s code on our youtube-react Github repository.

Follow @productioncoder

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.