Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Setting up with Create React App

3:21 with Guil Hernandez

Developers normally use Create React App for developing React applications because it lets you quickly create and run React apps with no configuration. Create React App is well-suited for projects of any size, and often used for developing production-ready apps.

All right, let's get started by setting up our tools. 0:00
You learned that two common ways to install and 0:03
to get set up with React is with a tool called Create React App, and 0:06
its hosted CDN or content delivery network links. 0:10
We started to build a scoreboard app using the CDN links to help you focus on just 0:13
learning React, without having to worry about installing and running any tools. 0:17
Developers normally use Create React App for developing react applications because 0:21
it lets you quickly create and run React apps with no configuration. 0:26
It sets up your development environment with tools like Babble 0:30
to compile JSX to JavaScript, and Webpack to process and 0:34
bundle your JavaScript files and project assets. 0:37
Create React App is well-suited for projects of any size and often used for 0:39
developing production-ready apps, so 0:43
that's what we're going to use in this course. 0:45
To get started, you should have Node and NPM, or Yarn, installed on your computer. 0:48
They're only required for development and not in production, and 0:53
if you don't have them installed, be sure to check the teacher's notes for 0:56
links to Treehouse videos and resources that will get you all set up. 0:59
We also have content entirely dedicated to using Create React App. 1:02
You'll find the link to it in the teacher's notes, as well. 1:06
With Create React App, you run one command to set up the tools and 1:09
files you need to start your React project. 1:12
To save you a little set up time, and to make sure that your files are the same 1:15
as mine, I suggest that you download the starter files I prepared for you and 1:19
work from there. 1:23
I created the project using the npx command, 1:23
followed by create-react-app, and the name of the project, scoreboard. 1:27
NPX is a tool that's included with NPM, as a version 5.2, that makes it easy to 1:34
install and run packages, especially command-line tools like create-react-app. 1:39
If you need to use a global package that's not installed on your computer, 1:44
running npx will download and execute the package you specify all in one command. 1:48
For example, 1:54
without npx, you have to make sure that you have Create React App installed 1:54
globally on your machine before you're able to run the create-react-app command. 1:58
The best part is that npx makes sure that you're always using the latest version of 2:04
a package without having to upgrade it each time you're about to use it. 2:08
So it offers a pretty big productivity boost. 2:11
After downloading the provided project files, open your terminal or 2:14
console, navigate inside the scoreboard folder, and 2:18
make sure to run npm install to install the project's dependencies. 2:23
Then to run the scoreboard app in the browser, run npm start. 2:28
Now, open the project in your favorite text editor. 2:34
I'm using Visual Studio Code, which has an integrated terminal. 2:36
I brought over all the code we wrote in React Basics to the new project files. 2:40
If you open the file App.js, located inside the src and 2:44
components folder, you'll see the header, counter, player, and app components. 2:49
You'll find the CSS for the app in index.css. 2:55
And over in index.js, you'll see the familiar ReactDOM.render method, 2:58
which is rendering or mounting the app component into the root element. 3:04
An HTML file containing this root element is inside the public folder. 3:09
All right, we're all set up to continue building our app. 3:14
In the next video, you'll learn how to break up your components into modules. 3:18

You need to sign up for Treehouse in order to download course files.

Sign up