1
00:00:00,510 --> 00:00:04,530
Earlier, you learned that Create React App
has built in scripts available for

2
00:00:04,530 --> 00:00:07,230
running tests, building your app for
production, and

3
00:00:07,230 --> 00:00:09,940
ejecting out of the default
Create React App set up.

4
00:00:09,940 --> 00:00:10,750
So in this video,

5
00:00:10,750 --> 00:00:15,540
we'll dive deeper into the optional
commands build, test, and eject.

6
00:00:15,540 --> 00:00:19,270
You learn that the Jest testing framework
is already configured when you use

7
00:00:19,270 --> 00:00:20,660
Create React App.

8
00:00:20,660 --> 00:00:24,790
Jest is used for writing unit tests
of your components and logic.

9
00:00:24,790 --> 00:00:27,450
You run unit tests on
the individual units or

10
00:00:27,450 --> 00:00:30,970
components of the app to make
sure that they work as intended.

11
00:00:30,970 --> 00:00:35,950
If you name your files using
a filename convention like .spec.js, or

12
00:00:35,950 --> 00:00:40,990
in this case ,.test.js, or if you place
your test files inside a special test

13
00:00:40,990 --> 00:00:43,885
folder, Jest will find those files and
run your tests.

14
00:00:43,885 --> 00:00:48,050
For example,
app.test.js is a simple unit test

15
00:00:48,050 --> 00:00:52,720
Create React App sets up to test if the
app component renders without crashing.

16
00:00:52,720 --> 00:00:56,036
So back in my terminal,
I'll open a new tab and

17
00:00:56,036 --> 00:00:59,533
make sure that I am in
my search-app directory.

18
00:01:02,414 --> 00:01:08,640
Running the command npm test launches
the test runner in watch mode.

19
00:01:08,640 --> 00:01:12,960
So this means that every time you save
a file, it will re-run your tests,

20
00:01:12,960 --> 00:01:16,080
similar to how npm start
recompiles your code.

21
00:01:17,270 --> 00:01:20,970
Looking at the console,
we see a green check mark

22
00:01:20,970 --> 00:01:25,830
next to renders without crashing, and
it lets us know that our test passed.

23
00:01:25,830 --> 00:01:31,600
Now if I delete a line of code from
app.js, for example, the export statement,

24
00:01:31,600 --> 00:01:36,650
and save the test runner now lets
me know that the test failed.

25
00:01:40,360 --> 00:01:41,660
Unit tests are optional.

26
00:01:41,660 --> 00:01:45,230
It's up to you and your team to
write unit tests for components.

27
00:01:45,230 --> 00:01:47,780
You may write unit tests for
several components.

28
00:01:47,780 --> 00:01:50,670
For example,
test the output of one component and

29
00:01:50,670 --> 00:01:53,650
the component life cycle and
state changes of another.

30
00:01:53,650 --> 00:01:56,670
I've posted the link to the Jest
documentation in the teacher's notes

31
00:01:56,670 --> 00:01:57,200
for this video.

32
00:01:58,220 --> 00:02:03,021
When you're ready to create
a production ready build of your app,

33
00:02:03,021 --> 00:02:05,260
run the command npm run build.

34
00:02:05,260 --> 00:02:09,967
And create react app will generate a build
folder inside your project containing all

35
00:02:09,967 --> 00:02:14,350
the static files that can be
used on a production web server.

36
00:02:14,350 --> 00:02:19,580
Build transpiles your React code into
code the browser understands using Babel,

37
00:02:19,580 --> 00:02:22,900
and it optimizes your files for
best performance.

38
00:02:22,900 --> 00:02:28,060
It bundles all your JavaScript
files into one minified file, and

39
00:02:28,060 --> 00:02:32,769
minifies resources like the HTML template
and CSS to help reduce download times.

40
00:02:33,770 --> 00:02:38,060
Finally, when you create
a project with Create React App,

41
00:02:38,060 --> 00:02:40,405
all the build settings are preconfigured.

42
00:02:40,405 --> 00:02:43,290
That means you can't change
anything about your build setup.

43
00:02:43,290 --> 00:02:46,425
For example, you don't have
access to a Webpack.config file.

44
00:02:46,425 --> 00:02:51,350
It's all managed for you by a single
build dependency, react-scripts.

45
00:02:51,350 --> 00:02:54,017
But you don't have to be
locked into the build tool and

46
00:02:54,017 --> 00:02:56,510
configuration choices of Create React App.

47
00:02:56,510 --> 00:03:00,720
You can customize the set up to your
liking by running the eject command.

48
00:03:00,720 --> 00:03:05,194
Eject means that you're no longer building
your app within the curated development

49
00:03:05,194 --> 00:03:07,410
environment of Create React App.

50
00:03:07,410 --> 00:03:12,000
In other words, ejecting gives you full
control over the configuration files and

51
00:03:12,000 --> 00:03:15,330
dependencies like Webpack,
Babel, ESLint, and so on.

52
00:03:16,570 --> 00:03:21,640
Now be careful with this step because
running eject is a permanent action.

53
00:03:21,640 --> 00:03:23,750
Once you eject, you can't go back.

54
00:03:23,750 --> 00:03:28,460
In my terminal, I'll type npm run eject.

55
00:03:28,460 --> 00:03:30,740
Since this is a one way operation,

56
00:03:30,740 --> 00:03:34,560
the console asks if you're
totally sure you want to eject.

57
00:03:34,560 --> 00:03:35,190
I'll say yes.

58
00:03:37,050 --> 00:03:40,480
Ejecting forks Create React App's
configuration and

59
00:03:40,480 --> 00:03:41,950
moves it into your project.

60
00:03:41,950 --> 00:03:46,800
After the script runs, you'll see
a config directory added to your project

61
00:03:46,800 --> 00:03:50,350
containing files like webpack.config for
dev and

62
00:03:50,350 --> 00:03:54,620
production and
a webpackDevServer .config file.

63
00:03:54,620 --> 00:03:56,970
And if you look at your package.json file,

64
00:03:56,970 --> 00:04:00,050
you'll see that the single build
dependency, react-scripts,

65
00:04:00,050 --> 00:04:04,120
was removed from the project and
now lists each individual dependency.

66
00:04:04,120 --> 00:04:07,810
And from here, you continue building
your app as you normally would.

67
00:04:07,810 --> 00:04:11,840
And all of the commands like run,
test, and build will still work.

68
00:04:11,840 --> 00:04:14,000
But at this point, you're on your own.

69
00:04:14,000 --> 00:04:16,800
So you shouldn't need to
use eject in your projects,

70
00:04:16,800 --> 00:04:19,090
unless you know exactly
what you're getting into.

71
00:04:19,090 --> 00:04:21,980
Create React App included
the eject feature for

72
00:04:21,980 --> 00:04:25,200
customizing a project only
when you're ready for it.

73
00:04:25,200 --> 00:04:29,060
For example, Dan Abramov,
one of the developers of Create React App,

74
00:04:29,060 --> 00:04:33,090
mentioned that the only case
in which you need to eject

75
00:04:33,090 --> 00:04:37,840
Is when a dependency demands that
you also change the build toolchain.

76
00:04:37,840 --> 00:04:41,570
For example, if a dependency
enforces use of CSS Modules or

77
00:04:41,570 --> 00:04:43,510
can't work without a Babel plugin.

78
00:04:43,510 --> 00:04:45,140
In that case, you would need to eject.

79
00:04:46,370 --> 00:04:50,990
So congrats, you just learned a new tool
that will give you a massive head start

80
00:04:50,990 --> 00:04:52,690
when building React apps.

81
00:04:52,690 --> 00:04:56,280
As with most popular development tools,
React and

82
00:04:56,280 --> 00:04:59,450
Create React App are going
to be updated frequently.

83
00:04:59,450 --> 00:05:02,620
So be sure to check the teacher's
notes for up to date information and

84
00:05:02,620 --> 00:05:05,770
links to more Treehouse courses and
workshops about React.

85
00:05:05,770 --> 00:05:07,120
Thanks everyone, and happy coding.