Post
Ask Question

React - Introduction To Package.json File

Introduction

In this article, we are going to discuss the package.json file, created with React application.

We will cover,

  1. Attributes used in package.json
  2. Package.json versioning symbols

What is package.json

If you ever worked on node.js, npm application, Angular application, etc, you might encounter with packge.json file. This file is a kind of manifest file for your application. This file plays a very important role in the react application development and deployment.

In short, we can say,

Package.json = Metadata associated with project + All Dependencies with version + scripts

In the react project you can see the package.json file in the react project structure, double click on the package. json file and see the code,

Please see below the code of the package.json file,

{
  "name": "first-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "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"
    ]
  }
}

Now we will try to discuss each section of the package.json file to get a better understanding,

Name - Name of the react application.

Please note that there are few naming conditions while defining application name in react,

  1. name should not be in lower case.
  2. the name should be less than 214 characters.
  3. Hyphens and underscores can be used.

You will get the error “ 

* name can no longer contain capital letters”, if the name is in upper case.

Version - Current version of the application. This property follows semantic versioning notations.

x.x.x – major.minor.patches

Private - This is a very critical attribute, mainly used to prevent accidental publication of private repositories. Npm, refuse to publish within the npm ecosystem in case of true.

Dependencies - Contains a list of node modules + required version for production release. In the above code, we need three dependencies with versions.

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

In the above code, react version is mentioned as “^17.0.2” which means npm will install the latest major version matching “17.x.x”.

Scripts - It contains the most commonly use aliases to access react commands.

Eg.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

The npm start command is used for react-scripts start.

Browserslist – This attribute is used to share target browsers and node.js versions between different frontend tools.

eslintconfig  - This property included sharable ESLint Configuration used by Create React App.

devDependeties – This property is not included in the above code but it is very important hence want to discuss it. This property list out packages required for development and testing.

Here we had discussed the most important properties of the package.json file but I would like to add few more properties which might use for your code.

  • author
  •  contributors
  •  bugs
  •  homepage
  •  license
  •  keywords
  •  description
  •  repository
  •  main
  •  devDependencies
  •  engines
  •  browserslist

Package versioning

As we discussed earlier, versioning follows semantic notation means x.x.x.

Package versioning

You might notice a few symbols in the version section of package.json. We should aware of it to get a better understanding of versioning,

  1. ~ : Update patch release only. Eg. If you have 17.0.2 then 17.0.3 will be ok but 18.0.2 will not work.
  2. ^ : Can update Patch + minor. Not major version
  3. * : Can update all three Major + Minor + Patches versions
  4. >: Higher version than specify a version.
  5. >= : Equal and Higher than specify a version
  6. < :  Less than specifying a version
  7. <=: Less or equal to specify a version

That is all for this article. Hope you get an idea of the package.json file and learn something new here.


Similar Articles