Upgrade the React App Version
Before we can do anything else, we must upgrade our sample app's React version to start taking advantage of the advances.
Upgrade the React app version#
Hooks weren't introduced until React v16.8.0, but our app is currently running v16.4.0. The first thing we have to do is upgrade the version of React our application is running.
This lesson will walk through upgrading our app to use the latest version of React released to date.
If you were to attempt to add a hook to our app as it currently exists, you'd see an error in the browser's developer tools along the lines of:
1Uncaught TypeError: Object( ) is not a functionIt's not a very helpful error message, but after a quick Google search, you'll figure out a React version that doesn't work with hooks is the actual issue.
Sample code zip file
If you need a fresh copy of the sample app before we start to upgrade it, it's available here.
Create React app docs#
Since we have an already existing Create React App, our path to upgrading is a little different than if we were starting from scratch with the most up-to-date version of React. Lucky for us, the official Create React App docs have a fairly well-documented upgrade process.
Check the CRA changelog for the latest react-scripts version#
Step one: Go to the changelogs for the React Scripts, and find the newest version of the react-scripts available.
At the time of writing this, the React Scripts are up to v4.0.3. They may be higher when you start — best to check the Create React App website.
If you scroll down past the initial notes of what new updates this version contains, you should see a section titled "Migrating from X.X.X to X.X.X".
Here are the npm and yarn commands we'll need to upgrade the react-scripts
, which can then be used to update the React versions in our project.
Copy the yarn command (or npm, if that's your preference): yarn add --exact [email protected]
, and paste it into your terminal while inside the client/
folder of your application.
yarn add --exact react-scripts@4.0.3
Upgrade all of your React dependencies manually#
I'm not sure if it's just the fact that our version of Create React App is so outdated (it was running react-scripts: 1.1.4
, after all), or if it is something to do with my computer, in particular, but after upgrading the react-scripts
dependency, deleting my node-modules
in the client/
folder, and re-running yarn
, the React and React DOM versions in my package.json
did not upgrade on their own.
Not to worry though, we can do it ourselves.
Step two: Manually update your package.json
's "dependencies"
section to the new versions of react
and react-dom
, and paste in the unit testing libraries you'll need.
Normally, in a new CRA project starting from scratch, these testing dependencies are included from the start. So we're including them, too, because they are the best options currently out there for automated testing of React apps.
Here are the additional dependencies we need to add or modify for our package.json
.
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
Notice that the @testing-library
packages are all new, and you can manually update the existing react
and react-dom
versions to ^17.0.2
. Then, delete your node_modules
folder once more from the client/
folder, and run yarn
one more time.
A way to get all the correct package dependencies to go with the new react-scripts version
Unfortunately, there's no easy way to see what React versions go along with which versions of the
react-scripts
, but I found a workaround, made a little easier by the fact we were upgrading to the latest version of React. It's hacky, but it works.The solution? Make a sample project using the terminal command to spin up a new starter project.
1npx install create-react-app sample-appOnce the sample app's finished installing, you can open up the
package.json
file and see the versions of thereact-scripts
, the correspondingreact
andreact-dom
packages, and any other new upgrades (like the@testing-library
packages for testing).Then, just make our project's dependencies match the one in the starter project's
package.json
.
Double check the new React versions in the node_modules folder#
Before we try to restart the app, it's worth doing a quick spot-check that the updated versions of React and the other new dependencies we added took effect.
Step three: Confirm the updated dependencies by opening up the freshly installed node_modules
folder and checking a couple of key libraries that should have been updated.
Check React Scripts are v4
The first dependency I want to ensure has been successfully upgraded are the react-scripts
. If you open the node_modules
inside the client/
folder, scroll down forever to the react-scripts
and check the package.json
file.
If everything went as expected, you'll see the the version of this package is 4.0.3, like the image below.

Things are off to a good start. Let's check a few more packages.
Check React is up to v17
Next, let's find the react
package in node_modules
to see if it's running the latest React version. Here's what you should see to confirm the new version.

If you look closely at the image, you'll notice the React version here in the react
library itself is "version": "17.0.2"
. Nice! That looks to be in order, too.
Check Jest testing library is v26
Finally, one last key dependency we can confirm is to make sure the newest version of Jest (part of our unit testing framework), v26, is present. Scroll back up in the node_modules
folder to the jest
package. Open up the package.json
accompanying this library, and you should be able to confirm the version is 26.
This page is a preview of The newline Guide to Modernizing an Enterprise React App