What is Create React App? Part 2 (package.json,README & node_modules)
Tags: react, javascript, webdev, beginners
Published: 2021-11-28 13:40:43

In [part 1](https://dev.to/codergirl1991/what-is-create-react-app-part-1-installation-5c63) of this series, we learned how to install React using [Create React App](https://create-react-app.dev/). 

In part 2, I will breakdown the following files and folders:

* [What is a package.json file?](#what-is-a-packagejson-file)
* [What is a package-lock.json file?](#what-is-a-packagelockjson-file)
* [What is a README.md file?](#what-is-a-readmemd-file)
* [What are node_modules?](#what-are-nodemodules)

## What is a package.json file?
This is a JSON(JavaScript Object Notation) file that includes key information concerning your project. This is a required file that is needed to run any React project. 

This file includes metadata such as `name`, `author` and `version` as well as starter scripts and dependencies used in the project. 

DO NOT DELETE THIS FILE.

Open up your project in your favorite code editor, and you will see the `package.json` file in the root directory. "The root directory, or root folder, is the top-level directory of a file system." - Source: [Tech Terms](https://techterms.com/definition/root_directory)

![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2rhg7xxcbcn06z56nu2.png)
 
Click on that file and you should see this data in it.
```
{
  "name": "example-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```
Let's break down what all of this means.

### What are the `name`, `version` and `private` fields?
The `name` field is for the name of your project. 
```
"name": "example-project",
```
If you need to change the name of your project, then you can update it in this field. You will also need to make sure to update it in the `package-lock.json` file. 

In the command line of your project folder, run `npm install` which will update the name of your project in the `package-lock.json` file.  

The `version` field is the current version number for your software project. 
```
"version": "0.1.0",
```
If you were to publish this package to the `npm` registry, then this field is important. If you make major changes to the package, it is encouraged that you release a new version so other developers will understand what the new updates are. 

If you want to learn more about publishing, then please read through the [documentation](https://docs.npmjs.com/about-semantic-versioning).

The `private` field has the value of a boolean (true or false) that is automatically set to true. This means that `npm` will not publish your project.

```
"private": true,
```

If you want to publish your project on the `npm` registry, then you will need to change that field to false. 

### What are dependencies? 
This is an object filled with all of the packages that are currently being used in your project.

```
"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
```
Since this is a React project, you need to have `react` and `react-dom` to run your application.

The `react-scripts` allow you to run the project in your local server and will automatically restart the server every time you make changes to a file. 
 
`web-vitals` provides metrics concerning the user experience for your website. [Create React App](https://create-react-app.dev/docs/measuring-performance/) comes with built in code to help you track the metrics of your site and see the user performance analytics. 

Create React App also comes with `jest` and the `react-testing-library`. This allows you to write tests to ensure that your application is running smoothly. 

### What are the scripts?
The `package.json` file comes with an object filled with four different scripts.

```
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```
The `start` script, allows you to run your application in the local server (`http://localhost:3000/`). You would use the command `npm start` in the command line of the project folder. 

Or you would use `yarn start` if you installed React using Yarn. 

The `build` script is used to create an optimized build folder when you are ready to deploy your project to production.

You would run `npm build` or `yarn build` to create that build folder. 

The `test` script allows you to start the test runner in the command line and perform any tests that you have written for your project. 

You would run `npm test` or `yarn test` to launch the test runner. 

The `eject` script is for those developers that want to further customize their build and dependency configurations. This will remove the single build dependency where you are free to configure your React project to your liking.

If you are just starting out, there is zero reason to use this option. 

Even React has this warning in their default README file.
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you are seasoned developer that is comfortable with this option, then you can run `npm eject` or `yarn eject`.

### What is eslintConfig? 
ESLint is a linter that helps you find and fix syntax errors in your code and adheres to the ECMAScript/JavaScript standards. 

This is the config object that extends to the `react-app` and `jest`. 

```
 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
```

### What is the browserslist? 
In this section, you can specify which browsers are supported by your React application. 

```
 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
```
In development, you want to specify that you want to use the latest versions of popular browsers. That will also ensure that you can use ES6 features in your code and it will be supported. 

In production, you can specify the following: 
*  >0.2% - supports browsers that have at least a .2% market share 
* not dead - supports browsers with official support in the last 2 years. 
* not op_mini all - does not support opera mini

If you want to learn more about the `browserslist`, then please visit their [GitHub repository](https://github.com/browserslist/browserslist).

That is a brief description for all of the current data in your starter `package.json` file. 

If you want to learn more about the `package.json` file, then please read through the [documentation](https://docs.npmjs.com/cli/v8/configuring-npm/package-json).

## What is a package-lock.json file?
This is a file that is automatically generated when you make changes to the `package.json` file or `node_modules` folder. 

If you installed React using Yarn, then this file is called `yarn.lock`. 

This file is located in the root directory of your project.

![package-lock file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yn25gf7uktjcj9fy0dr.png)

![yarn lock file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpghidjglw0zbannswfc.png)
 
This file contain thousands of lines of code and it lists out the exact versions for all of the dependencies needed for your project. 

You should not be changing this file directly because that is being handled for you by NPM(Node Package Manager). 

## What is a README.md file?
The `README.md` file is also located in the root directory for your project.

![readme file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekfjjbgirq4aa01itxzh.png)
 
This is a place for you to describe your project to other developers. Create React App comes with a default template for the `README.md` file. 

This information goes over the React starter scripts and other helpful information concerning Create React App.

It is highly encouraged that you customize your `README.md` file, so people will know what your project is all about. 

You can include the following information:

* description of the project
* list of features
* list of technologies used
* types of testing used
* videos or screenshots for the project
* a link to the deployed site
* information on how to run the project locally.

This information is really helpful for other developers that are interested in contributing to your project if it is an [open source](https://www.freecodecamp.org/news/what-is-open-source-software-explained-in-plain-english/) project.

It is also really helpful for potential employers to learn about your project. 

To learn more about how to create good README files, then please read through this [article](https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/).  

The `.md` tells the computer that it is a Markdown file. [Markdown](https://www.markdownguide.org/) is a language you can use to format your documents. 

Here is a [cheat sheet](https://www.markdownguide.org/cheat-sheet/) you can use to help you with the Markdown syntax. 


## What are node_modules?
This folder is located in the root directory of your project.
![node modules folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9eaap6t6qsvx18z55sx.png)
 
This contains hundreds of folders and files that represents the modules needed to run your project.

![node modules files and folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9pmhgm44qby5xu0o2q0.png)

It is important to remember to never commit your `node_modules` folder to GitHub. If this folder is included in production, then it can slow down your website.

I remember making this mistake when I built my first website. Luckily, there was a nice developer on Twitter who reached out to me and let me know how to remove it. 

You don't have to worry about committing your `node_modules` folder to GitHub, because Create React App has already taken care of that for you. We will learn more about why in part 3 of this series. 

That concludes part 2 of the What is Create React App series. 

In part 3, will will learn about the `.gitignore` file and `public` folder.