We are using React at work. The official documentation is really good - especially the Thinking in React section. But I could still use some additional examples, ideas, etc. so when I saw an offer for several books on React, including one from Arkency that I had been considering buying for a while, I broke down and bought the bundle. The first one I read is “React Under the Hood” by Freddy Rangel.

Overall it is a really good book. The author points out that some of the ideas in react come from the game development world. To emphasize that, the example code for the book is a Star Trek ‘game’. The author provides a git repository you can clone to get started. The project is set up to use babel and webpack and a node dev server - all of which just work out of the box. I need to dig into one of the other books from the Indie Bundle, Survive JS, to learn more about how to set these up. You build almost all of the code - except for the rather hairy navigation and animation parts which are available in the clone you are encouraged to use to get started.

The example stresses good engineering practices - especially having one or two smart components that control all state mutation and lots of well separated dumb components that just render the approprite info for a given state. I really liked the EditableElement component and will probably steal it for a play project I want to do after completing this book.

The author did not use ES6 syntax because it might be unfamiliar to some people. I actually find the new syntax easier so I translated most things into using ‘let’ instead of var and all seemed to go just fine. The other change I made throughout is to the module.exports for each .jsx file. The book suggests starting each class like this:

    module.exports = React.createClass({
      render: function() {
        //whatever
      },
    });

If you do this, the React plugin for the Chrome Developer tools just labels each component as ... which means you have to dig around for the section of rendered code you want to inspect. The project I am on at work uses a slightly different syntax but one that is a lot easier to read and understand:

    let Something = React.createClass({
      render: function() {
        //whatever
      },
    });

    module.exports = Something;

If you do this, then the React debugging tab now shows this component as <Something attr1=xxx…></Something> which makes it a LOT easier to find the code you want to inspect.

The example was good but the best part was the great material in the final chapter. It discusses

1. PropTypes (which I had heard of but forgotten).

2. getDefaultState and getDefaultProps (haven’t used them, but they might come in handy).

3. How to profile you code with Perf - and then some suggestions about what to do about what you find. Good information about how to improve performance of components that are basically render only (per the design espoused in the rest of the book) using a React add on called PureRenderMixin. I am going to have to look into mixins.