Add a Dependency to React in package.json for a React Component

Sep 12, 2020 • 5 Minute Read

Introduction

Developing apps in React involves external dependencies as reusable components published by other React developers that you can use in your projects. It's always a good idea to use a React component available on npm and modify it according to the needs of your project to create a different version of that component. In order to do all that, you must know how to add dependencies to your React project.

This guide walks you through the easy process of installing and adding dependencies to your package.json file for a React component.

The package.json File

When you create a React project using Create-React-App, you get a package.json file inside the root folder that looks like this:

      {
  "name": "react-dependencies-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
...
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
    

This file keeps track of all the different kinds of dependencies you are using in your project in JSON format. There are essentially two methods for installing a dependency on your React project. The first method is directly running a specific command for installing that dependency as an npm package. This process automatically updates the package.json file with the required details, i.e., the name of the dependency, its version, and its type. The other method is manually updating the package.json first and then running an npm install command to install or update that dependency.

Adding Dependencies Automatically

Create-React-App's CLI (Command Line Interface) offers you an easy method of adding dependencies to your package.json file. Look up the specific command to install a dependency on npmjs.com and run it inside the root directory of your project. The general command for installing any dependency via npm is:

      npm install <package-name> --save-dev

The --save flag is not mandatory and the -dev flag is needed only if you want this dependency to be installed as a development dependency, meaning that you only need that package for local development and testing purposes and not for production.

Let's say you want to install React Router for a component in your project that handles the routing for you.

      npm install react-router-dom

The above command installs React Router in your project and automatically adds this dependency to your package.json file.

      //package.json
{
 ...
	"react-router-dom": "^5.2.0",
 ...
}
    

The name of the package is added as a key and its installed version as the corresponding value in your package.json file, as demonstrated above.

Adding or Updating Dependencies Manually

Sometimes you need to work with a specific version of a dependency, maybe an older version that is more compatible with your project. You can point your package.json file to that specific version of the dependency and run the npm install command to install only that version of the dependency in your project. Let's say you want to use react-router-dom 4.2.2 instead of the latest version.

      {
 ...
	"react-router-dom": "^4.2.2",
 ...
}
    

Now run the following command:

      npm install

Now you have react-router-dom version 4.2.2 installed. You can also use this method to directly install dependencies.

First, let's go ahead and uninstall react-router-dom by running the following command:

      npm uninstall react-router-dom

If you check your package.json file now, you won't see react-router-dom listed in the file. Add it to the file as shown below:

      {
 ...
	"react-router-dom": "^5.2.0",
 ...
}
    

Now run the following command:

      npm install

You will now be able to use this dependency in your project.

Conclusion

When you want to create a React component based on a specific version of a dependency, you can look up these versions and manually edit your package.json file to update or add that dependency to the specified version in your project. In all other scenarios, you should let Create-React-App's CLI handle this process for you.