Have you ever wondered what version of React application is your project using? Not sure how to update it? Luckily it’s quite a simple process, let’s take a look at how you can handle this yourself in a few steps.

React version

To check which React version is your project using you need to open the package.json. Take a look under the dependencies section. It should list all of the dependencies of your project and one of those should be React.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  }

You can clearly see that the current version of my local React project is 17.0.2.

You may be wondering why does the version number look so weird? That’s because React is using the semantic versioning policy in the format of X.Y.Z, where

  • X changes during a major, often breaking change
  • Y changes during minor patches and updates
  • Z changes during critical bug fixes

You can inspect the history of version changes here.

Updating React version

To change the React version your project is using you need to run the following command
npm install –saveΒ react@<version>, where <version> is a variable. You should substitute it for the desired version of React.
Let’s take a look at how to downgrade it. I will instal the version 16 of React by running

$ npm install –save react@16

Now you can see that my dependencies section of the package.json has been successfully updated.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^16.14.0",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  }

To restore back the latest version of React I will use latest as the version variable in the previous command.

$ npm install –save react@latest

And as expected, my React version has been updated back to the latest one released.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  }
πŸ‘‹ Hey, I'm Dawid Budaszewski
Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. Now it's time to pass the knowledge onto somebody else!

πŸ’¬ Leave a comment

Your email address will not be published.

We will never share your email with anyone else.