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"
}
💬 Leave a comment