Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using Create React App!
You have completed Using Create React App!
Preview
Create React App has built-in scripts available for running tests, building your app for production, and ejecting out of its default setup. In this video, we'll dive deeper into the optional commands: build, test and eject.
Resources
Related Content
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
Earlier, you learned that Create React App
has built in scripts available for
0:00
running tests, building your app for
production, and
0:04
ejecting out of the default
Create React App set up.
0:07
So in this video,
0:09
we'll dive deeper into the optional
commands build, test, and eject.
0:10
You learn that the Jest testing framework
is already configured when you use
0:15
Create React App.
0:19
Jest is used for writing unit tests
of your components and logic.
0:20
You run unit tests on
the individual units or
0:24
components of the app to make
sure that they work as intended.
0:27
If you name your files using
a filename convention like .spec.js, or
0:30
in this case ,.test.js, or if you place
your test files inside a special test
0:35
folder, Jest will find those files and
run your tests.
0:40
For example,
app.test.js is a simple unit test
0:43
Create React App sets up to test if the
app component renders without crashing.
0:48
So back in my terminal,
I'll open a new tab and
0:52
make sure that I am in
my search-app directory.
0:56
Running the command npm test launches
the test runner in watch mode.
1:02
So this means that every time you save
a file, it will re-run your tests,
1:08
similar to how npm start
recompiles your code.
1:12
Looking at the console,
we see a green check mark
1:17
next to renders without crashing, and
it lets us know that our test passed.
1:20
Now if I delete a line of code from
app.js, for example, the export statement,
1:25
and save the test runner now lets
me know that the test failed.
1:31
Unit tests are optional.
1:40
It's up to you and your team to
write unit tests for components.
1:41
You may write unit tests for
several components.
1:45
For example,
test the output of one component and
1:47
the component life cycle and
state changes of another.
1:50
I've posted the link to the Jest
documentation in the teacher's notes
1:53
for this video.
1:56
When you're ready to create
a production ready build of your app,
1:58
run the command npm run build.
2:03
And create react app will generate a build
folder inside your project containing all
2:05
the static files that can be
used on a production web server.
2:09
Build transpiles your React code into
code the browser understands using Babel,
2:14
and it optimizes your files for
best performance.
2:19
It bundles all your JavaScript
files into one minified file, and
2:22
minifies resources like the HTML template
and CSS to help reduce download times.
2:28
Finally, when you create
a project with Create React App,
2:33
all the build settings are preconfigured.
2:38
That means you can't change
anything about your build setup.
2:40
For example, you don't have
access to a Webpack.config file.
2:43
It's all managed for you by a single
build dependency, react-scripts.
2:46
But you don't have to be
locked into the build tool and
2:51
configuration choices of Create React App.
2:54
You can customize the set up to your
liking by running the eject command.
2:56
Eject means that you're no longer building
your app within the curated development
3:00
environment of Create React App.
3:05
In other words, ejecting gives you full
control over the configuration files and
3:07
dependencies like Webpack,
Babel, ESLint, and so on.
3:12
Now be careful with this step because
running eject is a permanent action.
3:16
Once you eject, you can't go back.
3:21
In my terminal, I'll type npm run eject.
3:23
Since this is a one way operation,
3:28
the console asks if you're
totally sure you want to eject.
3:30
I'll say yes.
3:34
Ejecting forks Create React App's
configuration and
3:37
moves it into your project.
3:40
After the script runs, you'll see
a config directory added to your project
3:41
containing files like webpack.config for
dev and
3:46
production and
a webpackDevServer .config file.
3:50
And if you look at your package.json file,
3:54
you'll see that the single build
dependency, react-scripts,
3:56
was removed from the project and
now lists each individual dependency.
4:00
And from here, you continue building
your app as you normally would.
4:04
And all of the commands like run,
test, and build will still work.
4:07
But at this point, you're on your own.
4:11
So you shouldn't need to
use eject in your projects,
4:14
unless you know exactly
what you're getting into.
4:16
Create React App included
the eject feature for
4:19
customizing a project only
when you're ready for it.
4:21
For example, Dan Abramov,
one of the developers of Create React App,
4:25
mentioned that the only case
in which you need to eject
4:29
Is when a dependency demands that
you also change the build toolchain.
4:33
For example, if a dependency
enforces use of CSS Modules or
4:37
can't work without a Babel plugin.
4:41
In that case, you would need to eject.
4:43
So congrats, you just learned a new tool
that will give you a massive head start
4:46
when building React apps.
4:50
As with most popular development tools,
React and
4:52
Create React App are going
to be updated frequently.
4:56
So be sure to check the teacher's
notes for up to date information and
4:59
links to more Treehouse courses and
workshops about React.
5:02
Thanks everyone, and happy coding.
5:05
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