Errata for React: Up & Running

The _sort method doesn't work (at least not in Safari). The problem presumably is that it doesn't fulfil the contract for the sort callback: It returns true or false, rather than -1, 0 or 1.

it should be `cp` not `cd` $ cd ~/reactbook/whinepad\ v0.0.1/

The books states "Finally, add the example <Logo> to the discovery tool (js/build/discover.js):" But we should do the discover.js file in the source directory

In the "Setup" section, the text directs me to go to reacjs.com and click the "download button." This is apparently out of date, as there is no "download" button on the site currently, nor any link like that.

In the code for the Button component, the title of the Button is passed down to the underlying anchor or button as a property of the props object - e.g: <a {...props} className = {cssclasses} /> rather than using the officially documented method of enclosing it between start & end tags. This has been done with no explanation, and moreover, this method is not even mentioned in the official React documentation. I submitted an issue against React on Github: https://github.com/facebook/react/issues/9718 and the React team (at the time of writing) refuse to document this method of passing children. I suggest that the book be updated to use the documented method of passing children, or, at the very least, acknowledge that the current method is NOT documented.

To download a copy of React library, visit https://react-cn.github.io/react/downloads.html Sites may change its content from time to time, google "where to download react.js"

At the bottom of page 7 (of the pdf) are two examples. One of them is: React.DOM.h1( {id: "my-heading"}, React.DOM.span(null, "Hello"), " world!" ); This code must be placed in a render method. The semi-colon is not correct when use inside the render method. A comma is needed. In my opnion it is better is to show the examples including the React render method.

In the snippet under "Do the same in the TextAreaCounter:" "// all other methods..." and "// ... and the rest of the rendering" The "//" at the beginning of these two lines led me to believe that the lines in these sections should be commented out and I don't think they should be.

"When you load the page, the browser.js kicks in, finds all the text/jsx..." I think it should be "finds all the text/babel..."

The code on Github (as of this writing) lacks a package.json file. This is not unusual. Usually, and this is the step missing in the book, you run "npm init" before running "npm install". Like so: npm init // follow the prompts npm install --save-dev react // and so on

build and source directory mixed up: "Finally, add the example <Logo> to the discovery tool (js/build/discover.js):" I think this should be: "Finally, add the example <Logo> to the discovery tool (js/source/discover.js):" I spent a good 1.5 hours trying to find the source of this dreadful error as a result of this typo: "import Logo from './components/Logo'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'"

On execution time, the lines: onClick={!this.props.readonly && this.setRating.bind(this, i)} onMouseOver={!this.props.readonly && this.setTemp.bind(this, i)} return: Warning: Expected `onClick` listener to be a function, instead got `false` Warning: Expected `onMouseOver` listener to be a function, instead got `false` For the sake of sane code, they could be replaced with: onClick={!this.props.readonly ? this.setRating.bind(this,i) : null} onMouseOver={!this.props.readonly ? this.setTemp.bind(this,i) : null}

$ npm i -g eslint eslint-plugin-react eslint-plugin-babel should be $ npm i -g eslint babel-eslint eslint-plugin-react eslint-plugin-babel otherwise the following happens $ eslint js/source/app.js Cannot find module 'babel-eslint' Error: Cannot find module 'babel-eslint'

"rules": { "react/jsx-uses-react": 1 } should be "rules": { "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1 } otherwise the following will result: $ eslint js/source/app.js js/source/app.js 3:8 error 'Logo' is defined but never used no-unused-vars 6:8 error 'Whinepad' is defined but never used no-unused-vars

app.jss should be app.js

In the "Instant Replay" section of chapter 3, the code to log the state has a bug, in that the first user-triggered state (the second state, with the initial state being the first state) is not logged. The simplest fix is just to log BOTH the initial state and the first user-triggered state in the first call to _logSetState, and I include suggested code below. Perhaps a more elegant fix would be to actually log the initial state in a lifecycle method (e.g componentDidMount), and then only log newState in _logSetState. Simple fix: _logSetState: function(newState) { if (this._log.length === 0) { this._log.push(JSON.parse(JSON.stringify(this.state))) }; this._log.push(JSON.parse(JSON.stringify(newState))); this.setState(newState); },