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.
When you create a React project using Create-React-App, you get a package.json
file inside the root folder that looks like this:
1{
2 "name": "react-dependencies-app",
3 "version": "0.1.0",
4 "private": true,
5 "dependencies": {
6 "@testing-library/jest-dom": "^4.2.4",
7 "@testing-library/react": "^9.5.0",
8 "@testing-library/user-event": "^7.2.1",
9 "react": "^16.13.1",
10 "react-dom": "^16.13.1",
11 "react-scripts": "3.4.3"
12 },
13...
14 "development": [
15 "last 1 chrome version",
16 "last 1 firefox version",
17 "last 1 safari version"
18 ]
19 }
20}
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.
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:
1npm 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.
1npm install react-router-dom
The above command installs React Router in your project and automatically adds this dependency to your package.json
file.
1//package.json
2{
3 ...
4 "react-router-dom": "^5.2.0",
5 ...
6}
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.
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.
1{
2 ...
3 "react-router-dom": "^4.2.2",
4 ...
5}
Now run the following command:
1npm 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:
1npm 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:
1{
2 ...
3 "react-router-dom": "^5.2.0",
4 ...
5}
Now run the following command:
1npm install
You will now be able to use this dependency in your project.
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.