« Previous Tutorial Next Tutorial »

Today we’re going to do a bit of maintenance. This series has been going on for long enough that some excellent changes have happened in both the Node and React worlds, and we want to get in on them.

Let’s start with Node. If you’ve been following these tutorials since the start, you are probably using version 7.7.2 or something close to that. At the time this series began, the “long-term stable” version of node was 6.10.X, which was a fine release but didn’t support a lot of the cool ES2015 stuff we’ve been using without transpilation. That’s a bummer, and was why we were using a beta version.

Well, good news! The long-term stable version of node has been bumped all the way up to 8.9.1, meaning we can use the stable version AND get all of that sweet, sweet new syntax we crave. This also brings a host of security and performance improvements, and it won’t break a single thing on our end, so the down-side to upgrading is effectively nonexistent.

If you’re on a Mac and you’re using nvm, or Node Version Manager (which you are, if you followed the installation instructions in tutorial 3), upgrading is ridiculously easy. Simply head for your terminal and type nvm install 8.9.1. Let it do its thing, and it’ll automatically switch you to using that version. However, to ensure that future sessions also use the new version, make sure to also type nvm alias default 8.9.1.

If you’re using Windows, and followed this tutorial, then you should have NVM-Windows installed, and the process is essentially identical. Open a command prompt, type nvm install 8.9.1 and let it install. You can type nvm list to see what versions you have installed, and which is active. If 8.9.1 isn’t the active install, just type nvm use 8.9.1 to set it. Future command prompts should also use that version.

Regardless of your operating system, you must reinstall any global modules you’ve installed previously. I know for a fact that, if you’ve been following along, that includes Nodemon, Yarn, and ESLint, so type the following:

npm install -g yarn eslint@^3.19.0 nodemon

We have to version lock that Eslint because some stuff has changed in the new one and our code will throw a bunch of warnings that I don’t want to worry about for this project. Most of them are indentation-related.

If you’re not using NVM on Mac or Windows, then you’ll need to upgrade by running an installer. You can find more information on how to upgrade your particular install at Nodejs.org. For Windows, it’s simple: just download the installer and run it. For OSX it can be more complicated, but if you already installed your own version of Node, I’m sure you’re capable of figuring it out!

Now that we’ve got Node all set, let’s upgrade React. Why upgrade, you ask? Well, because React 16 is awesome. It’s been rebuilt from the ground up to be faster and lighter (it’s 30% smaller than React 15). The best thing is that nearly everything that works with React 15 works with React 16, even though it’s a complete core rewrite. It also offers a couple of cool new features, including some new return types, better error handling, some witchcraft called portals that allow you to render React elements into DOM elements that are not their parents, and more. You can learn a lot more at Andrew Clark’s excellent blog entry.

We’re going to do this in a slightly unorthodox way, in that we’re going to edit our package.json file and then reinstall our entire node_modules folder, which will also allow us to move a few dev dependencies into the proper place. First things first, we need to delete our existing node_modules folder. If you’re on a Mac, cd to your musiclist directory and type

rm -rf node_modules

If you’re on a PC, you can either navigate to the folder in explorer, click it, and hit delete (or drag it to the recycle bin I guess), or via the command prompt you can cd to your musiclist directory and type:

rmdir /s /q node_modules

Either way, it’s going to nuke that directory into ashes, but don’t worry, we’ll rebuild it shortly.

Next, switch over to Sublime and open package.json. We’re going to change line 38 to this:

    "react": "^16.1.1",

And line 41 to this:

    "react-dom": "^16.1.1",

Now cut line 46, this one:

    "redux-devtools": "^3.4.0",

And move it down to the dev dependencies block below what is now line 63. Then cut lines 51 and 52, these ones:

    "webpack-dev-middleware": "^1.11.0",
    "webpack-hot-middleware": "^2.18.0",

And move them down as well. They should go at the end of the devDependencies block, which means you need to add a comma to the end of line 66 (the supertest line), and remove the comma from line 68, the hot-middleware line.

All set here. Save the file. Let’s make one more quick change, which is that sadly we’re going to need to deactivate the Redux devtools for a bit. They don’t play nice with React 16 and will fill your console with warnings. The good news is: there’s already a pull-request that fixes this, so it’ll probably be updated within a week or two. If you’ve been relying on the devtools a lot during this tutorial, then keep an eye on the github repo for more info.

So, open up /src/index.js and change line 29 to look this this:

          { / <DevTools /> / }

Alternately you could just delete it, but I like the commenting approach since it serves as a reminder that we want to bring it back at some point.

That’s it. Save the file, and head back to a terminal window. Assuming you’re in your musiclist folder, you can just type:

yarn

and hit enter, and it’ll rebuild your node_modules folder. Congrats, you’ve upgraded to React 16. If you fire up your app, you should see that it’s exactly the same … super-exciting, I know, but worth doing!

In our next tutorial, we’ll make the home page substantially less stupid. We’re also going to do a bit of code optimization and fix a few bugs. We’re getting close to the end, folks! Yes, there’s a lot more we could add to this app, but that’s for you to experiment with. The goal here was “build something simple and get it deployed,” and we’re awfully close to that.

See you soon!

« Previous Tutorial Next Tutorial »