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.
- Delete the
logo.svg
file in thesrc
directory. Don’t forget to remove theimport
statement in theApp.js
file - Remove the
App.css
file in thesrc
directory and also remove its import in theApp.js
file - Delete the
index.css
file in thesrc
directory and remove theimport
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 @productioncoderPlease 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.
I just like the valuable info you supply on your articles. I’ll bookmark your weblog and test again right here regularly.
I’m fairly certain I’ll learn plenty of new stuff proper here!
Good luck for the following!
Thanks. Glad you like it 👍
your explanation – second to none.
thank u for this great tutorial.
thanks 👍