Let's take a look at the dependencies that were installed as part of the bootstrapping process. You can list your projects packages by running npm ls --depth=0. The --depth=0 option means that you only want to see the top-level dependencies:
├── [email protected] ├── [email protected] └── [email protected]
There isn't much here, just the two core React libraries that you need, and something called react-scripts. This latter package contains the scripts that you'll want to run with this project such as starting the development server and making a production build.
Next, let's look at the package.json file that was created by Create React App:
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Here is where dependencies are tracked, so that you can install your app on different machines that don't have Create React App on them. You can see that the dependencies section matches the output of the npm ls --depth=0 command. The scripts section specifies the commands available to run with this project. These are all react-scripts commands—react-scripts is installed as a dependency.
One of the more powerful aspects of Create React App is that it simplifies this package.json configuration for you. Instead of having dozens of dependencies that you have to maintain yourself, you have less than a handful of dependencies. The react-scripts package handles the dynamic configuration aspect for you.
For example, when you run a React development server, you typically have to spend a lot of time messing around with Webpack configuration and making sure that the appropriate Babel plugins are installed. Since react-scripts creates a standard configuration for these things on the fly, you don't have to worry about it. Instead, you can start writing application code write away.
The react-scripts package also handles much of the dependencies that you would normally have to handle yourself. You can use npm ls --depth=1 to get an idea of what dependencies this package takes care of for you:
└─┬ [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] deduped ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected]
├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]
Typically, you wouldn't interact with most of these packages in your application code. When you have to actively manage dependencies that you don't directly use, it can feel like a huge time sink. Create React App helps squash this feeling.