How to Quickly Check React App Version in npm or CMD

In this tutorial, we are going to discuss different ways to quickly check the React App version locally and globally. We will also learn how to display the React App version on Runtime in the application itself.

We can easily check the version of React app using various methods. Let’s discuss these ways one by one in detail below:

Using package.json file

At root, open the package.json file and check to React app version inside dependencies section. The "react" or "react-dom" will tell the React application version.

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

Check Version Inside node_modules

You can directly check inside the node_modules folder and move to this file

~my-react-app\node_modules\react\cjs\react.development.js

On top line comments. you will see the React app version.

/** @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.
 */

How to Display React App Version on Runtime?

Sometimes, you may need to display the Reaction version inside the application components. You can update the React component to show the React app version while running the application in runtime on the browser.

Open the App.js file, then add the React.version inside the template as shown below:

// src/App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h2>React Application Version : {React.version}</h2>
    </div>
  );
}
export default App;

Now run the app by executing $ npm start to see the React application version in browser

Check React Version using CMD Command Prompt/  Terminal

You can also quickly check out the React or React Native version using the CMD tool. Just execute the following command to display the version rightaway.

Check React Version

$ npm view react version
17.0.2

Check React Native Version

$ npm view react-native version
 0.64.2

How to Check/List Installed Packages in React Application?

As a bonus tip, you can check the list of all packages installed in your React application by executing below npm command:

$ npm list --depth 0

The list command is not specific to React, you can check packages installed in any project like Angular as well.

The depth 0 will show only dependencies installed in the application and show results as shown below:

$ npm list --depth 0
[email protected] I:\JollyLab\React\my-react-app
+-- @testing-library/[email protected]
+-- @testing-library/[email protected]
+-- @testing-library/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Conclusion

That is, this was a quick walk-through on a very basic but important trick to fetch React version details. Hope this was helpful!