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.