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
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.
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.
to check if your
React app is starting up on localhost:3000.
Note that you can use
2. Cleanup boilerplate project
Let’s first get rid of some of the default content.
- Delete the
logo.svgfile in the
srcdirectory. Don’t forget to remove the
importstatement in the
- Remove the
App.cssfile in the
srcdirectory and also remove its import in the
- Delete the
index.cssfile in the
srcdirectory and remove the
importstatement in index.js
Finally, replace the contents of the
render method in
App.js with some text in a
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
3.2. Using SCSS
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.