How To Check React App Version Quickly

Friends, in this guide, we will learn how to check the React app version locally and globally.

Since there are several methods to check the installed version of React app, we will be discussing them one by one throughout this tutorial.

 

How To Check The Version Of React App

Step 1- Check The Version Using package.json

We can verify the installed version of React app by directly visiting the package.json file and see the React app version at dependencies: {} section as given below:

{
  ...
  ...
  ...
  "name": "react-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.1"
  },
  ...
  ...
  ...
}

 

Step 2- Check The Version Using node_modules

This method is also a simple and easy one. In this, we can check the version by simply heading over to:

node_modules/react/cjs/react.development.js

 

So, we will be able to see the version in the command section as shown below:

/** @license React v16.13.1
 * react.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

 

Step 3- Show The Version In The Web Application

We will see in this step that technique by using which we can show the version in the web application. For this, we have to add the below-given code in the React component.

Open the src/App.js file and replace it with the following code:

import React from 'react'

function App() {
  return (
    <div className="App">
        Here is the Latest React version: <strong>{React.version}</strong>
    </div>
  );
}

export default App;

 

Now, we will run the command to view the React version.

npm start

 

Step 4- Check The Version Via Command (cmd)

Another way of checking the React version is doing this via a command-line tool. We simply have to run the given command in order to get the details of the installed version.

npm view react version

# 16.13.1

 

For getting the React Native version, we will use the following command.

npm view react-native version

# 0.62.0

 

Step 5- Check The Installed React Native Version Globally

In case, if we want to check which React-Native version is installed in our local development system, the following is the command for it.

npm ls react-native -g

 

Then, it will display a result similar to this on the terminal screen.

/usr/local/lib
└── react-native@0.61.5

 

Step 6- Check Local Packages Installed In The React App

The following can be used if we want to check out what all packages are installed in the React app. It can simply be done from the app’s root folder by using a simple command.

npm list --depth 0

After this, the following result will be shown.

#  react-app@0.1.0 /Users/user/Desktop/react-app
#  ├── @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.1

 

Summary

So, here we reach the conclusion of this tutorial in which we have learnt different methods of checking the installed version of the React app.

 

Thanks