Creating a React application requires you to set up build tools such as Babel and Webpack. These build tools are required because React's JSX syntax is a language that the browser doesn't understand.
Create React App (CRA) is a tool to create single-page React applications that is officially supported by the React team.
The script generates the required files and folders to start the React application and run it on the browser. This allows you to focus on coding your application without having to bother with build configurations.
The dependencies that create-react-app uses
Although you can't see Babel or Webpack listed as dependencies in the generated
package.json file, CRA still uses Babel and Webpack under the hood. It's just that the configurations are hidden from you inside the
When you look into the
package.json file of react-scripts, you'll see all the packages needed to make React works in the browser. It has 58 packages, from line 31 to 88:
That's a lot of packages! Let's break it down a little to understand what these packages are used for.
Please note that this article was written using Create React App version 4.0.1 as the reference. This article will help you understand what happens under the hood when you use Create React App NPM scripts.
Jest is a testing library by Facebook that plays very well with React. The dependencies for Jest allow you to write test scripts for your application without having to install another testing library.
Now that you have an idea what the dependencies are used for, let's continue with understanding what
react-scripts really do behind the scene.
What react-scripts do
There are four scripts provided by this package:
When you run one of the scripts, the /bin/react-scripts.js will be executed to start the process. This script will look into the arguments that you passed into the call. It only accepts start, build, test, and eject arguments.
Any other argument you passed will cause the script to return an unknown script to the log:
When you pass a valid argument, it will run the scripts located inside the
/scripts folder. Let's start by looking at the
How the react-scripts start process works
start argument, NPM will begin the process to make a development server available for your React application. Here's a list of tasks for this script:
- Set the build environment into
developmentfor Node and Babel
- Ensure environment variables are read for the build process
- Verify the packages installed in your project are not outdated
- Check whether the code is in TypeScript or not
- Import required packages for the process, mostly Webpack-related modules
- Check for available port and host IP, defaults to 0.0.0.0:3000
- Run the compiler and listen for any messages from Webpack. Webpack will take care of using Babel, ESLint, and any other tools to prepare your code
- While Webpack is running, the script will open your browser and start the development server
How to use the react-scripts build command
build command will start the process of creating a production-ready React app for you. Mostly, it does the same step as a
start command, except that it sets the build environment to
Instead of checking for available ports and running a development server, the script will run the
build function, which will bundle all your separate files into one
bundle.js file. The production build will also ensure that your code is optimized and minified to make sure it has the best performance.
If you've already run the
build command before, the script will take your current file size and compare it with the next build. It will show you how much the file size has changed:
The final output of this command can be found in the
build/ folder, which is generated at your project's root.
How to use the react-scripts test command
test command will run any test scripts that you've written using Jest. Your tests will be run under a Node environment. Jest will run under the interactive watch mode, which means every time you save a file, it will re-run the tests, like how the
start command recompiles the code.
You can save your test files anywhere inside the
src/ folder, and the script will find and execute any file with
.spec.js extensions. It will also run any
.js file under the
You can see the test result from the terminal:
Keep in mind that CRA's test command only covers testing your component and business logic under a stable environment. To run an end-to-end test in the browser, you need to use another testing library.
How to use the react-scripts eject command
The last command,
eject, is used to remove the dependency on
react-scripts and expose the build tools and configurations for you to modify.
All the configuration files from
react-scripts will be copied into your project root's
config/ folder, and the scripts to run the build will be copied into the
scripts/ folder. The dependencies will also be moved into your root's
This command is a one-way operation. Once you have ejected from CRA set up, you can't undo it. If you have committed your code into a source code management system like Git, you can undo the changes with
git checkout or
Generally, you don't need to run this command because CRA has already provided sensible configurations suitable for small and mid-sized projects. If you're interested to learn more, I have written a post about ejecting your React App here:
As more people use CRA, the development team will receive more feedback about how the tool is used in real projects. The insights gained by the development team will ensure that CRA will stay updated with the latest tools and has best practices for building React apps.
Until next time!