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:

1

Uncaught TypeError: Object(...) is not a function

It'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.

1

npx install create-react-app sample-app

Once the sample app's finished installing, you can open up the package.json file and see the versions of the react-scripts, the corresponding react and react-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.