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
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.
Resources
Related content
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