React package.json

Creating package.json

Run the following command in project root folder to create package.json file

npm init -y

The command generates the package.json file in project root folder. The package.json file initially looks like as given below.

{
  "name": "dum",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  "keywords": [],
  "author": "",
  "license": "ISC"
}

Following is a sample package.json after adding more key-value pairs in it.

{
  "name": "react-appk",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  }
}

Difference between package.json vs package-lock.json

In a React project, 'package.json' and 'package-lock.json' files serve different purposes:

1. package.json:

• 'package.json' is a metadata file for project that lists all the npm packages the project depends on, as well as various metadata about the project itself (such as its name, version, description, author, etc.).
• It includes information such as the name and version of each dependency, as well as the version ranges specified for each dependency.
• Developers typically interact with 'package.json' directly by adding or removing dependencies, updating versions, or running scripts defined in the 'scripts' section.
• 'package.json' is committed to version control repositories like Git and shared with other developers to ensure consistent development environments.

2. package-lock.json:

• 'package-lock.json' is a file automatically generated by npm that serves as a lockfile. It keeps track of the exact versions of all the npm packages and their dependencies that are installed in your project's 'node_modules' directory.
• It's used to ensure that the same versions of dependencies are installed across different development environments, ensuring consistency and reproducibility.
• The 'package-lock.json' file is automatically updated whenever you install, uninstall, or update packages using npm.
• While 'package.json' specifies the version ranges allowed for dependencies, 'package-lock.json' specifies the exact versions that were installed, along with their transitive dependencies.
• 'package-lock.json' is primarily used by npm internally to ensure deterministic builds and to resolve dependency conflicts.

In summary, 'package.json' is a human-readable metadata file that lists project dependencies and scripts, while 'package-lock.json' is a machine-readable lockfile that ensures dependency versions are consistent across different environments.