React by Example as a book is focused on 12 different examples of UI widgets. Every chapter is a walkthrough on implementing such component, whether it’s a password strength meter or article list with voting. Each one has accompanying Git code repository which enables you to peek into individual commits and take the example further.

At the moment of writing initial version of the book the freshest version of React was 0.13.3. Fast-forward and we’re on 16.0.

How did we manage to update the code and what helped us in the process? Read on!

Upgrade foundation

Official React blog was the main source of tips what to look for when upgrading step-by-step from one version to another:

The last of step was actually the easiest and required almost no work at all besides bumping version number in package.json:

Tools assisting the migration

Most helpful tool turned out to be the one recommended in aforementioned React posts: react-codemod In short it works by parsing the JS code to Abstract Syntax Tree form, transforming this AST and finally generating textual code from it again.

There are several code transformation you can run. The ones that were useful in the context of the book were:

Automated code transform can be very rewarding when you have to change larger codebase. But it can only recognize a limited set of patterns.

Next we’ve used eslint to help us spot places demanding deeper look and manual work. We’ve used following configuration:

{
  "parser": "babel-eslint",

  "plugins": [
    "react",
    "import",
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
  ],
  "settings": {
    "import/resolver": "webpack",
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
  },
  "rules": {
    "no-extra-semi": [0],
    "no-useless-escape": [0],
    "no-unused-vars": [0],
    "no-console": [0],
    "react/display-name": [0],
    "react/prop-types": [0],
    "react/no-render-return-value": [0],
    "import/no-named-as-default-member": [0],
    "import/no-named-as-default": [0],
  }
}

For this to work you’d need:

yarn global add eslint eslint-plugin-react eslint-plugin-import babel-eslint eslint-import-resolver-webpack

You’ll run it as following:

eslint -c eslint.config --no-eslintrc src/

Finally we’ve inspected any warnings that where printed in the browser’s console. That required running and going through every example in browser.

An example of introduced changes

Below are the most typical changes required in order to have your app running on React 16.0 if you’re still on 0.13.3. Without further ado:

-import React from 'react/addons';
+import React from 'react';

import React from 'react';
+import ReactDOM from 'react-dom';

-React.render(<div>
+ReactDOM.render(<div>

-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types';
+import React from 'react';

Fun fact – the most “troublesome” change for the book was introduced in react-bootstrap dependency. The API of that library changed much regarding input components and at the same time it was impossible to stay on the version prior to their API redesign.

Nice to haves

Last but not least and upgrade was a chance to improve consistency of the examples itself. The examples and thus book chapters were written by several authors. The code style and and the procedure to run example and where to look for source code sometimes varied.

With the help of create-react-app that is no longer a case. Each example is run exactly the same and follows identical source structure. It’s also very convenient to use because the tool gives decent user experience.

Another valuable improvement came from prettier. It’s no-brainer to have a consistent code style when a computer does it for you and does it so well.

PS. We’re participating in the bestjavascript.io bundle. You’ll find updated React by Example among other books and courses from 7 Javascript expert authors. Hurry up, bundle ends Friday, Dec 1.

PPS. It is THAT_TIME_OF_YEAR and you’ll get any book from us you want 40% off using that coupon. Valid no longer than Friday, Dec 1.

comments powered by Disqus