[reactjs] Upgrading React version and it's dependencies by reading package.json

I have an existing project, which has react@15 and all it's dependencies according to that. But now I have to upgrade to react@16 along with it's dependencies. Now, the problem is - there are a lot of dependencies and it is very time consuming to identify version of each dependency.

So, I was wondering if there was a way where I could upgrade the versions of React and it's dependencies mentioned in package.json, without manually modifying the package.json file.

This question is related to reactjs dependencies upgrade

The answer is


If you want to update any specific version from the package.json you can update the version of the package by doing ==>

yarn add package-name@version-number

or

npm install --save package-name@version-number

If you want to update all packages to the latest version you can run command ==>

npm audit fix --force


I highly recommend using yarn upgrade-interactive to update React, or any Node project for that matter. It lists your packages, current version, the latest version, an indication of a Minor, Major, or Patch update compared to what you have, plus a link to the respective project.

You run it with yarn upgrade-interactive --latest, check out release notes if you want, go down the list with your arrow keys, choose which packages you want to upgrade by selecting with the space bar, and hit Enter to complete.

Npm-upgrade is ok but not as slick.


if you want to update your react and react-dom version in your existing react step then run this command I hope You get the latest version of react and react-dom.

Thanks

npm install react@latest react-dom@latest

Yes, you can use Yarn or NPM to edit your package.json.

yarn upgrade [package | package@tag | package@version | @scope/]... [--ignore-engines] [--pattern]

Something like:

yarn upgrade react@^16.0.0

Then I'd see what warns or errors out and then run yarn upgrade [package]. No need to edit the file manually. Can do everything from the CLI.

Or just run yarn upgrade to update all packages to latest, probably a bad idea for a large project. APIs may change, things may break.

Alternatively, with NPM run npm outdated to see what packages will be affected. Then

npm update

https://yarnpkg.com/lang/en/docs/cli/upgrade/

https://docs.npmjs.com/getting-started/updating-local-packages


Use this command to update react npm install --save [email protected] Don't forget to change 16.12.0 to the latest version or the version you need to setup.


Using npm

Latest version while still respecting the semver in your package.json: npm update <package-name>. So, if your package.json says "react": "^15.0.0" and you run npm update react your package.json will now say "react": "^15.6.2" (the currently latest version of react 15).

But since you want to go from react 15 to react 16, that won't do. Latest version regardless of your semver: npm install --save react@latest.

If you want a specific version, you run npm install --save react@<version> e.g. npm install --save [email protected].

https://docs.npmjs.com/cli/install

Using yarn

Latest version while still respecting the semver in your package.json: yarn upgrade react.

Latest version regardless of your semver: yarn upgrade react@latest.

https://yarnpkg.com/lang/en/docs/cli/upgrade/


If you want to update react use npx update react on the terminal.


you can update all of the dependencies to their latest version by npm update


Examples related to reactjs

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Template not provided using create-react-app How to resolve the error on 'react-native start' Element implicitly has an 'any' type because expression of type 'string' can't be used to index Invalid hook call. Hooks can only be called inside of the body of a function component How to style components using makeStyles and still have lifecycle methods in Material UI? React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function How to fix missing dependency warning when using useEffect React Hook? Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

Examples related to dependencies

Upgrading React version and it's dependencies by reading package.json How do I deal with installing peer dependencies in Angular CLI? RHEL 6 - how to install 'GLIBC_2.14' or 'GLIBC_2.15'? Automatically create requirements.txt node.js TypeError: path must be absolute or specify root to res.sendFile [failed to parse JSON] MavenError: Failed to execute goal on project: Could not resolve dependencies In Maven Multimodule project npm install private github repositories by dependency in package.json Find unused npm packages in package.json Failed to load c++ bson extension Maven dependency update on commandline

Examples related to upgrade

Problems after upgrading to Xcode 10: Build input file cannot be found Upgrading React version and it's dependencies by reading package.json Want to upgrade project from Angular v5 to Angular v6 Update TensorFlow Table 'performance_schema.session_variables' doesn't exist How to upgrade PostgreSQL from version 9.6 to version 10.1 without losing data? How to upgrade PowerShell version from 2.0 to 3.0 upgade python version using pip How do I update pip itself from inside my virtual environment? How to update Python?