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
Create React App lets you create a modern build setup for your React apps in no time. You install the tool and focus on just building your actual app.
Update
It is no longer necessary (or recommended) to install Create React App globally. Instead, you should use the npx command to create the "search-app" project used in this workshop with a single command:
npx create-react-app search-app
If you have previously installed Create React App globally you should uninstall it as recommended in this documentation.
NPX is a package runner that is included with NPM, as of version 5.2. It makes it easy to install and run packages, especially command-line tools like Create React App.
Learn more about npx here, or see npx in action in this Treehouse video.
Resources
- Create React App – repo
- Jest testing framework
- Progressive Web Apps
- Service Workers: an Introduction
- Web App Manifest
Related Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With create-react-app,
you create a modern build setup for
0:00
your React apps in no time.
0:03
You install the tool and
focus on just building your actual app.
0:05
To get started, you'll need to
install create-react-app globally.
0:09
So open your terminal or console and
0:12
run npm install -g followed
by create-react-app.
0:15
Once it's installed, you create
a new react project with the command
0:42
create-react-app, followed
by the name of your project.
0:46
So I'll navigate to my desktop and
run create-react-app.
0:50
And I'll name my project search-app.
0:57
Running the command installs the
dependencies needed to build your project.
1:01
It also generates the initial
project structure.
1:05
Now, it may take a couple of minutes
to complete the installation.
1:07
And once it's complete, you'll see
the success message in the console,
1:11
letting you know that your project was
successfully created at this location.
1:15
And it says that inside the directory,
you can run several commands.
1:19
These instructions list four important
commands for create react app, start,
1:24
build, test, and eject.
1:28
Npm start starts
the development server and
1:31
auto reloads the page
anytime you make edits.
1:34
Npm run build bundles the app
into static files for production.
1:38
Npm test starts the test runner, and
1:42
this will let you start testing
your app with Jest as you build it.
1:44
And npm run eject takes your app
out of the create-react-app setup,
1:49
which lets you customize
your project configuration.
1:53
You'll learn more about these
commands in a later video.
1:57
But now create-react-app suggests that we
navigate to our new search app folder and
1:59
run npm start to start
the development server.
2:04
So let's do that now.
2:07
Starting the server automatically
launches your app in the browser on
2:17
localhost port 3000.
2:21
In addition to the localhost address, the
console output displays a LAN address so
2:22
that you can access the app from
a mobile device on the same network.
2:27
Now in the browser,
2:31
you can see the template create-react-app
provides to help you get started.
2:32
An app lets us know that to get
started building out the App,
2:37
edit the app.js file in
the source directory.
2:40
And save the file to
reload in the browser.
2:43
So now open the project in your
text editor, I'm using Atom, and
2:46
let's explore the project structure and
files.
2:49
Create-react-app generates only the files
you need to start your React project.
2:53
And if you've built react apps before,
you're not going to see or have access to
2:56
configuration files for Webpack, Babel,
ESLint, or even see a bundle.js file.
3:01
Most of the files you are going
to be working with are located in
3:06
the src folder.
3:09
For example, App.js is currently
the main wrapper component of the app.
3:10
Its importing App.css which contains
style specific to the app component.
3:15
And the logo.svg you see
at the top of the page.
3:20
Now, index.js is the entry file for
the app.
3:24
It imports index.css,
the apps-based style sheet.
3:28
And imports and renders the app
component into the DOM via the root
3:32
div located in the index.html
file inside the public folder.
3:37
So this is the app's HTML template file.
3:42
In the previous video, I mentioned
that create-react-app sets up a fully
3:46
functional offline first
progressive web app by default.
3:50
Progressive web apps, or PWAs,
3:53
are web applications that use a collection
of modern web technologies to
3:55
provide native app-like experiences
on all types of devices.
4:00
What they do is they take advantage
of the latest browser features,
4:04
to make your apps more performant,
reliable, and safe.
4:07
Even send push notifications and work when
there's no Internet connection available.
4:10
So, progressive web apps rely on special
scripts called service workers to give
4:14
users that app-like experience.
4:19
An index.js imports and
enables a service worker created for
4:21
you here in the file
registerServiceWorker.js.
4:26
So, this file caches
your static assets and
4:30
serves them from local caching production,
4:33
ensuring that your web app is reliably
fast even on a slower, unreliable network.
4:35
Another key feature in progressive
web apps is the web app manifest.
4:41
The manifest is a JSON file containing
metadata associated with your app,
4:46
like the app's name, author,
description, and more.
4:49
So create-react-app sets
up a manifest,json file for
4:53
you that describes
the configuration of your app.
4:56
The main purpose of the manifest is to
install the app to the home screen of
5:00
a device, providing your users with
quicker access and a richer experience.
5:04
Manifest.json also contains
information about the icon to
5:09
display on a device's home screen.
5:13
And by default sets the app
to display in standalone mode
5:15
when launched from the home screen.
5:18
This will make the application look and
feel like a standalone native app.
5:21
You'll customize this file with details
specific to your web application.
5:24
For example, the icons, names, and
5:28
branding colors to use when
the web app is displayed.
5:31
You can learn a whole lot more
about progressive web apps and
5:34
the resources posted in
the teacher's notes.
5:36
Finally, the Jest testing framework
is already configured when you
5:40
use create-react-app.
5:43
So the file App.test.js runs a simple test
5:46
that checks if the app component
renders to the DOM without crashing.
5:48
And you'll learn more about
running tests in a later video.
5:53
So just like that, we have a React
project running on our computer.
5:56
And we didn't have to install any extra
dependencies, configure a build tool or
6:00
module bundler and
create the project structure.
6:04
In the next video, I'll teach you how to
customize and build out your project.
6:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up