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.
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 |
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 |
|
Karnei Gozman |
Jan 25, 2019 |
Printed |
Page 176
bottom of page |
|
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 |