React: Up & Running

Errata for React: Up & Running

Submit your own errata for this product.


The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.


Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update



Version Location Description Submitted By Date Submitted
Safari Books Online Chapter 3, section "Filtering content", 1st paragraph

From the paragraph: "call the Array.ptorotype.filter() method" that should be "call the Array.prototype.filter() method"

Enrico Zschemisch  Aug 13, 2015 
Safari Books Online Chapter 3, section "Filtering content"

From the text: "When the person clicks the “search” button, the _toggleSearch() function is onvoked. " The last word should be "invoked" instead of "onvoked".

Enrico Zschemisch  Aug 13, 2015 
Safari Books Online Chapter 3, section "Filtering content"

Basically all enumerations/lists in Safari Books are broken, e.g. from chapter 3: " It does its task by: * setting the this.state.search to true or false accordingly * when enabling the search, “remembering” the old data * when disabling the search, reverting to the old data" When it should be: " It does its task by: * setting the this.state.search to true or false accordingly * when enabling the search, “remembering” the old data * when disabling the search, reverting to the old data "

Enrico Zschemisch  Aug 13, 2015 
Safari Books Online ?
Chapter 3, Section "Sorting"

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.

Anonymous  Dec 03, 2015 
Mobi Page loc. 22
"Note" text

"All you need is place in the DOM..." should be "All you need is a place in the DOM..."

Steve Clason  Dec 11, 2015 
Safari Books Online -
Whinepad v.0.0.1, 1st code quote block

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

Anonymous  Apr 17, 2016 
Safari Books Online Chapter 6
Finally, add the example <Logo> to the discovery tool (js/build/discover.js):

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

Anonymous  Jan 18, 2017 
ePub Chapter 3

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.

Anonymous  Feb 21, 2017 
Other Digital Version Ch 6
2252

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.

Greg Sullivan  Jun 07, 2017 
PDF Page n/a
Back cover - bottom of the page

First release: 2016-07-12 "... The author of JavaScript Patterns and Object-Oriented JavaScript (both O'Reilly) ..." Should read: "... The author of JavaScript Patterns (O'Reilly) and Object-Oriented JavaScript (Packt Publishing) ..."

Timea Bálint  Sep 03, 2021 
Printed Page 1
Setup - 2nd paragraph

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"

Jack Tan  Jan 13, 2018 
PDF Page 3
3rd paragraph

The line "React: “do you magic right here”." should rather read "React: “do your magic right here”."

Roman Blöth  Nov 29, 2015 
PDF Page 7
Last part of page at bottom

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.

Anonymous  Jul 23, 2015 
PDF Page 9
last paragraph

The last sentence "Let's how to do just that..." obviously lacks a word.

Roman Blöth  Nov 30, 2015 
PDF Page 19
Bottom page

Following the example at the bottom of page 19, I come up with the following: <!DOCTYPE html> <html> <head> <title>textareacounter React</title> <meta charset="utf-8"> </head> <body> <div id="app"> <!-- my app renders here --> </div> <script src="react/build/react.js"></script> <script> React.render( React.createElement(TextAreaCounter, { text: "Bob" }), document.getElementById("app") ); var TextAreaCounter = React.createClass({ propTypes: { text: React.PropTypes.string }, render: function() { return React.DOM.div(null, React.DOM.textarea({ defaultValue: this.props.text }), React.DOM.h3(null, this.props.text.length) ); } }); </script> </body> </html> Using Chrome it shows nothing. When I inspect the console it gives two warnings and a critical error saying: 'Warning: Only functions or strings can be mounted as React components. Uncaught TypeError: Cannot read property 'toUpperCase' of undefined (react,js: 9259)'

Anonymous  Jul 23, 2015 
PDF Page 19
Bottom page

In my previous post it's important to first code the component before rendering it! So, the code must be in correct order: <script> var TextAreaCounter = React.createClass({ propTypes: { text: React.PropTypes.string }, render: function() { return React.DOM.div(null, React.DOM.textarea({ defaultValue: this.props.text }), React.DOM.h3(null, this.props.text.length) ); } }); React.render( React.createElement(TextAreaCounter, { text: "Bob" }), document.getElementById("app") ); </script>

Anonymous  Jul 23, 2015 
PDF Page 30
Lifecycle Methods

Language is inconsistent. componentWillUpdate() - executed before... componentDidUpdate() - executed after... componentWillMount() - executed before.. componentDidMount() - after the node.. componentWillUnmount() - right before... shouldComponentUpdate() - this method is called... Clearly the Stoyan was tired of typing "executed before/after", etc.

Anonymous  Jul 24, 2015 
Printed Page 37
second code snippet

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.

Jason  Sep 09, 2016 
PDF Page 54
3rd code snippet

At least in React (with addons) v0.14.3 and ReactDOM v0.14.3 the event "e" mentioned in "e.target.dataset.row" has no attribute "target.dataset.row" (target.dataset exists, but it has no "row"), so the code sample fails to function.

Roman Blöth  Jan 16, 2016 
PDF Page 54
3rd code snippet

Sorry, it obviously is no error here - the issue is clarified on the following page. Possibly it would help the reader to mention that there's data missing before the snippet can work.

Roman Blöth  Jan 16, 2016 
Printed, Safari Books Online Page 54
Last line of the page

The book suggests calling the slice() method on this.state.data to "so you don't manipulate this.state directly". This however only creates a shallow copy as this.state.data is an array of arrays, and retains references to original data rows. Thus, subsequent changes (next book page) end up modifying the original state.data table. Even worse, due to how state.data is initialized, this also ends up modifying the original props.initialData. This will cause problems later on when the reader is asked to implement undo/redo methods as an exercise. A proper fix would be to make a deep copy, for example using JSON.deserialize(JSON.stringify(this.state.data)) as is done in the code sample on p.63.

Dmitry Denisenkov  Apr 27, 2017 
PDF Page 63
6th paragraph

this.setState(newSate); Should be: this.setState(newState);

KC Dunstan  Jan 30, 2017 
Printed Page 70
2nd paragraph

"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..."

Alberto Stefanutti  Nov 03, 2017 
Printed Page 98
Transpile Java Script

babel --presets react,es2015 js/source -d js/build returns error: es2015 doesn't exist I cannot find a solution to the problem other than to use package.json but I don't know how to format that file.

Gary Follett  Sep 17, 2016 
Printed Page 98
Top of page

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

Joseph Brown  Dec 20, 2016 
PDF Page 102
1st sentence

Error: "When you use a <select> input in HTML, you specify pre-selected entires using <option selected>, like so:" entires should be entries

Anonymous  Mar 01, 2016 
PDF Page 105
2nd Code block

Right at the beginning of the code block, it is missing the line: import Excel from './components/Excel'; Without that, it will never, ever run since it will return: Uncaught ReferenceError: Excel is not defined

Enrique Condes  Feb 27, 2018 
Printed Page 107
3rd Paragraph

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'"

Joel  Sep 06, 2016 
Printed Page 108
2nd paragragh

"..., you can start backwards by defining example usage of the component in the discovery.js tool." I think this should be, "..., component in the discover.js tool." not "discovery.js tool" since we are editing the discover.js file.

Joel  Sep 06, 2016 
Printed Page 108
2nd paragragh

"..., you can start backwards by defining example usage of the component in the discovery.js tool." I think this should be, "..., component in the discover.js tool." not "discovery.js tool" since we are editing the discover.js file.

Joel  Sep 06, 2016 
PDF Page 114
2nd paragraph

error: npm install --save-dev babel-preset-es20015 should be: npm install --save-dev babel-preset-es2015 So one 0 too much in es2015.

Anonymous  Mar 02, 2016 
PDF Page 116
1st sentence

$ (Get-Content bundle.css).replace('../../images', 'images') | Set-Content bun dle.css The above command didn`t work in the terminal in Webstorm. The command below did the trick for me. powershell "(Get-Content bundle.css) | foreach-object {$_ -replace '../../images ', 'images'} | Set-Content bundle.css"

Anonymous  Mar 02, 2016 
PDF Page 118
Code Block, 8th line

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}

Enrique Condes  Feb 28, 2018 
PDF Page 131
_sort() function

[column] should be [key]. All four occurrences should be changed.

Anonymous  Jul 13, 2017 
PDF Page 145
After 3rd paragraph

$ 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'

Peer Reynders  Oct 13, 2016 
PDF Page 146
After 3rd paragraph

"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

Peer Reynders  Oct 13, 2016 
Printed Page 156
1st paragraph

Consider correcting "...no promises that down the road, as you app grows, you're not going to end up..." "as you app grows" -> should be "as your app grows"

Karnei Gozman  Jan 24, 2019 
Printed Page 173
End of page, last two lines

Exporation is not a word

Karnei Gozman  Jan 25, 2019 
Printed Page 176
bottom of page

app.jss should be app.js

Karnei  Jan 25, 2019 
Other Digital Version 1255
Code near the bottom of the page

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); },

Greg Sullivan  May 03, 2017 
ePub Page 2069
Chapter 5 - Deployment (end of)

I think readers will need to install the following NPM packages globally: - watch - ugily - cssshrink Otherwise the scripts (watch.sh and deploy.sh) will immediately fail (unknown command). I guess they could add the local directory onto their path, but I think command line tools like this should be available globally.

Daniel Rhoades  Sep 29, 2016 
Other Digital Version 2431
<Rating> component

The sentence: "Next, some helper methods that deal with maintaining the state up to date as the user interacts with the component:" should read: "Next, some helper methods that deal with maintaining the state as the user interacts with the component:" OR: "Next, some helper methods that deal with keeping the state up to date as the user interacts with the component:"

Greg Sullivan  May 22, 2017 
Other Digital Version 2481
N/A

The sentence "The drawback is more boilerplate in the controller" should read "The drawback is more boilerplate in the constructor".

Greg Sullivan  May 22, 2017 
Other Digital Version 2758
Ch 6

In the App Config section, the following sentence: "a description the type of data you want to deal with in the app." add the word "of": "a description of the type of data you want to deal with in the app."

Greg Sullivan  May 25, 2017 
PDF, ePub, Mobi Page 10672
text

typos: "each each element" should be "each element" "accedental" should be "accidental"

Anonymous  Sep 17, 2019