Errata

Learning React

Errata for Learning React

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. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date submitted Date corrected
Safari Books Online
ch2
Code snippet above promises section

Code snippet:

var morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
}

var dinner = "mac and cheese"

var backpackingMeals = {
...morning,
dinner
}

console.log(backpackingMeals) // {breakfast: "oatmeal",
lunch: "peanut butter and jelly",
dinner: "mac and cheese"}

The comments should extend to lunch and dinner lines either using single line comments or multiline comments:

console.log(backpackingMeals) /* {breakfast: "oatmeal",
lunch: "peanut butter and jelly",
dinner: "mac and cheese"} */

or

console.log(backpackingMeals) // {breakfast: "oatmeal",
// lunch: "peanut butter and jelly",
// dinner: "mac and cheese"}

Safari online treats lunch and dinner as variable syntax rather than comments.

Note from the Author or Editor:
fixed

Lincoln  May 04, 2017  Feb 09, 2018
Safari Books Online
ch2
first code snippet in classes section

function Vacation(destination, length) {
this.destination = destination
this.length = length
}

Vacation.prototype.print = function() {
console.log(this.destination + " | " + this.length + " days")
}

var maui = new Vacation("Maui", 7);

maui.print(); // Maui | 7

----

The comment should be: // Maui | 7 days
It is missing " days" in the comment given by print statement.

Note from the Author or Editor:
fixed

Lincoln  May 04, 2017  Feb 09, 2018
Safari Books Online
ch3 reduce and reduceRight section

The reduce and reduceRight functions can be used to transform an array into any value, including a number, string, B Boolean, object, or even a function.

Has a floating B before Boolean. Should be:

The reduce and reduceRight functions can be used to transform an array into any value, including a number, string, Boolean, object, or even a function.

Note from the Author or Editor:
fixed typo

Lincoln  May 05, 2017  Feb 09, 2018
Safari Books Online
ch7
Higher Order Components RandomMeUsers

The count is not conveyed from RandomMeUsers to the DataComponent.

My best pass at a fix:
for:
<RandomMeUsers count={10} />,

use:
<RandomMeUsers results={10} />,

and in DataCompoinent:
for:
fetch(url)

use:
const _this = this
const ext = Object.keys(_this.props)
.map(function(s) { return s + '=' + _this.props[s]; })
.join('&')
fetch(url + "?" + ext)

and for:
<ComposedComponent {...this.state} />}

use:
<ComposedComponent {...this.state} {...this.props} />}

Note from the Author or Editor:
This works as expected, and no further changes are needed.

Paul Newell  May 22, 2017  Feb 09, 2018
Safari Books Online
-
-

Chapter 3 on FP states the following:

"Currying is the practice of holding on to some of the values needed to complete an operation until the rest can be supplied at a later point in time."

That's not the definition of currying but of partial application. (same applies to the currying example after the statement above)

Currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument. i.e. turning a function with arity > 1 into several unary functions.

See https://en.wikipedia.org/wiki/Currying

Note from the Author or Editor:
fixed

Jaime Gonzalez Garcia  Jul 09, 2017  Feb 09, 2018
Safari Books Online
-
-

Chapter 3 on FP states:

"We can write the same function using an ES6 arrow function along with the ES7 object spread operator."

The object spread operator is not a feature of ES7. The only JavaScript features released as part of ES7 where:
- Array.prototype.includes
- Exponentiation operator
(https://github.com/tc39/proposals/blob/master/finished-proposals.md)

The object spread operator is a proposal level 3 at the moment:
https://github.com/tc39/proposals
https://github.com/tc39/proposal-object-rest-spread

Note from the Author or Editor:
Removed reference to ES7 for clarity.

Jaime Gonzalez Garcia  Jul 09, 2017  Feb 09, 2018
Safari Books Online
ch5
Babel Presets

On the section Babel Presets appears that description for babel-preset-es2017

babel-preset-es2017
Compiles what is in ES2017 to ES2017

In the website of Babel (https://babeljs.io/docs/plugins/preset-es2017/) we can see a description that says:

Only compiles what's in ES2017 to ES2016

I think that right descripcion must be:
babel-preset-es2017
Compiles what is in ES2017 to ES2016

Note from the Author or Editor:
Fixed this typo.

Carlos Tirado  Jul 22, 2017  Feb 09, 2018
ePub
Page ch2
ex 2.6

This declaration is closed with a closing curly brace when it should be a closing parenthesis:



Example 2-6. ./text-helpers.js
export const print(message) => log(message, new Date())

export const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`}

Note from the Author or Editor:
Thanks, Fixed in Atlas.

Patrick Hawley  Jul 27, 2017  Feb 09, 2018
Safari Books Online

In Safaribooksonline, the chapter Emerging Javascript under example 2.3 in the grey box under the sentence "More than one line needs to be surrounded with brackets:" the "new" code has the "lordify" function starting with an underscore.

Note from the Author or Editor:
Fixed the typo - thanks

Scott Huddleston  Jan 11, 2018  Feb 09, 2018
Safari Books Online
in chapter 2 "Emerging JavaScript"

In this sentence "Arrow functions do not block this. For example, this becomes something else in the setTimeout callback, not the tahoe object:" it should say "Regular functions..." instead of "Arrow functions"

Note from the Author or Editor:
Fixed in Atlas.

Scott Huddleston  Jan 11, 2018  Feb 09, 2018
Safari Books Online
Chapter 5
3rd paragraph after Example 5-20

"When the babel loader runs, it will use presents for ES2015 (ES6) and React to transpile any ES6 or JSX syntax into JavaScript that will run in most browsers."

I think the author means "presets" not "presents".

Note from the Author or Editor:
This was fixed during copyedit.

Anonymous  Dec 19, 2016  Apr 26, 2017
Safari Books Online

In the section "Installing Node.js", the 2nd sentence

"However, when working with React, you need to use the Node package manager, nom, to install dependencies. This is automatically installed with the Node installation."

The abbreviated word "nom" is incorrect. It should be "npm"

Note from the Author or Editor:
This was fixed during copyedit.

Mike Barlow  Dec 25, 2016  Apr 26, 2017
Safari Books Online
Part 3
Third from last code section

deepPick("data.info.fullname.first", dan); // "Deacon"

Comment should be "Dan", not "Deacon"

Note from the Author or Editor:
Updated Deacon to Dan

Matthew  Apr 21, 2017  Apr 26, 2017
Safari Books Online
2
"Classes" section of chapter 2

"printDetails" should be "print" for describing the "Vacation" / "Expedition" classes

Note from the Author or Editor:
Removed all instances of printDetails()

Mark Oliver  Jul 06, 2017  Feb 09, 2018
Safari Books Online
2
Chapter 2 Example 2-6. ./text-helpers.js

"the module and two functions are exported." should be "two functions are exported." or alternatively "the module's two functions are exported."

Note from the Author or Editor:
Fixed this.

Mark Oliver  Jul 06, 2017  Feb 09, 2018
Safari Books Online
4
chapter 4, example 4-10

The code snippet missing a closing parethesis ')' at the end in Example 4-10. Mapping an array to li elements

Note from the Author or Editor:
Great note - Fixed this error in Atlas.

Anonymous  Jan 19, 2018  Feb 09, 2018
Safari Books Online
7
Clock Component

In the Clock component

const {hours, minutes, seconds, timeOfDay} = this.state

should be

const {hours, minutes, seconds, ampm} = this.state

Note from the Author or Editor:
Fixed this typo - thanks.

Mark Oliver  Sep 12, 2017  Feb 09, 2018
Printed
Page 12
last paragraph

Traditional string concatenation uses plus signs to compose a string, not commas. One can add commas as a separator, but so can one use any string as separators.
'a'+'b' => 'ab'
but
'a','b' does not yield 'ab'.
Comma is not an operator for string concatenation.
So text in the book needs to remove the "or commas" part.

Note from the Author or Editor:
That was a typo meaning a combination of commas and plus signs. Removed commas as suggested to improve clarity.

M L  Aug 07, 2017  Feb 09, 2018
Printed
Page 14
3rd paragraph under "Default Parameters"

The text is referencing the previous function as "favoriteActivity" whereas it should be "logActivity".

Note from the Author or Editor:
Fixed the named function error

M L  Aug 07, 2017  Feb 09, 2018
PDF
Page 14
3rd paragraph

4th sentence: "Not only Not only" , repeats "not only".

Note from the Author or Editor:
This was fixed during copyedit

Hunter Leachman  Sep 19, 2016  Apr 26, 2017
PDF
Page 16
last example

In order to produce the output...

Kirkwood, Squaw, Alpine, Heavenly, Northstar

...the code needs to join this.resorts with a comma space separator.

Change: console.log(this.resorts.join(","))
To: console.log(this.resorts.join(", "))

Note from the Author or Editor:
Added the space to each instance of this.resorts.join()

Ken A Collins  Aug 25, 2017  Feb 09, 2018
PDF
Page 25
last line of text

current text:
console.log(trip.print()); // Chile will take 7 days.

updated text:
trip.print(); // Chile will take 7 days.

notes:
* the "print" function calls "console.log".. so wrapping it in another call is redundant
* an earlier "conformed errata" has touched this line, which resulted in the "current text" above

Note from the Author or Editor:
Removed the redundant console.log.

Warren Bank  Dec 08, 2017  Feb 09, 2018
PDF
Page 27
1st paragraph after code snippet.

In page 26 in the Jan 26th 2017 update:

"Chaining the print function to an arrow function means that this is actually the window"

I think the author means "Changing" not "Chaining".

Note from the Author or Editor:
Updated "chaining" to "changing"

kerdany  Jan 27, 2017  Apr 26, 2017
PDF
Page 27
output of the first code snippet in the page.

The output of the first snippet says:

"tahoe.print(); // Cannot read property resorts of undefined"

While, in the next paragraph, the author explains:
"Chaining the print function to an arrow function means that this is actually the window."

There's a mismatch between the output "undefined" and the explanation "window". Both are theoretically correct, but this can confuse JS newbies.

As explained here:
http://blog.jesusgollonet.com/2015/04/21/this-undefined-es6-arrow-functions/
and here:
https://babeljs.io/docs/faq/#why-is-this-being-remapped-to-undefined-

"Babel assumes that all input code is an ES2015 module. ES2015 modules are implicitly strict mode so this means that top-level this is not window in the browser nor is it exports in node."

so I guess that a little explanation -without delving into much details- is due here.

Thanks for the great book.

Note from the Author or Editor:
We need to make a code change here. We just have two of the same code samples.

It says: "To verify, let's change the console message to evaluate whether this is the window:"

The code sample after this should be:

var tahoe = {
resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
print: (delay=1000) => {

setTimeout(() => {
console.log(this === window)
}, delay)

}
}

tahoe.print()

kerdany  Jan 27, 2017  Apr 26, 2017
PDF
Page 27
2nd code snippet

The second and third code snippets are actually identical, this is probably a mistake, the second snippet should use an arrow function for `print` instead of a regular function definition.

Here's the -supposedly- correct code:

var tahoe = {
resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
print: (delay=1000) => {
setTimeout(() => {
console.log(this === window)
}, delay)
}
}

tahoe.print(); // true

Note from the Author or Editor:
The previous change fixes this.

kerdany  Jan 27, 2017  Apr 26, 2017
PDF
Page 33
First paragraph under the "ES6 Modules" title. In the Jan 27th release.

In the paragraph:

Until recently, the only way to work with modular javascript was to incorporate a library that could handling importing and exporting modules.

"handling" should be "handle".

Note from the Author or Editor:
This was fixed during copyedit.

Hany el-Kerdany  Jan 28, 2017  Apr 26, 2017
PDF
Page 34
First paragraph after the first code snippet

The paragraph is duplicated:

"Again, both export and export default can be used on any JavaScript type: primitives, objects, arrays, and functions"

Note from the Author or Editor:
This was fixed during copyedit.

Hany el-Kerdany  Jan 29, 2017  Apr 26, 2017
PDF, ePub
Page 38
3 line in code

On line 10;

console.log(trip.printDetails()); // Chile will take 7 days.

should be

console.log(trip.print()); // Chile will take 7 days.

Note from the Author or Editor:
This is a good fix: change the console.log(trip.printDetails()) to console.log(trip.print())

Brett Cooper  Jan 07, 2017  Apr 26, 2017
PDF
Page 41
3rd paragraph, first sentence

Text says:

You do not need a special framework to understand how produce one dataset that is based upon another.

Seems like it should say something like:

You do not need a special framework to understand how to produce one dataset that is based upon another.

Note from the Author or Editor:
Fixed the typo

Karl Herrick  May 11, 2017  Feb 09, 2018
Printed
Page 43
last sentence of last paragraph, continuing into first paragraph on P44

The text starts to talk about the index argument passed in to the callback as second argument, and how that was used as an explanation of the code snippet before it, but the code snippet does not use index for deciding which item in the array to edit. In fact, the book doesn't have an example of how to use the index argument at all.

Note from the Author or Editor:
Fair enough! Edited the text to reflect the change.

M L  Aug 10, 2017  Feb 09, 2018
Printed
Page 50
countdown clock code snippet

The recursion inside the countdown function with a delay should pass the delay argument as the third argument, or else countdown from 9-0 are fixed at 1 sec interval regardless of what delay value is set.
It should be:

setTimeout( () => countdown(value-1, fn, delay), delay);

Note from the Author or Editor:
Fixed this.

M L  Aug 10, 2017  Feb 09, 2018
Printed
Page 50
1st paragraph

typo in sentence.

actual:
Eventually, the value will be 0 and ccountdown will return that value
all the way back up the call stack.

expected:
Eventually, the value will be 0 and countdown will return that value all the way back up the call stack.

Note from the Author or Editor:
Thanks, fixed the typo.

Gary Tsang  Sep 26, 2017  Feb 09, 2018
Printed
Page 53
first line (which happens also to be the code line

The following code is presented on page 53:
const both = date => appendAMPM(civilianHours(date))
However to achieve the desired effect those functions appendAMPM and civillianHours have to be run in the reverse sequence. This is super confusing to the reader. The texst in the paragraph immediately above the code also need to be changed to reflect this.

so the code should be
const both = date civilianHours(appendAMPM(date))

luckily this is later corrected on page 58 in th convertToCivillianTime function.

Note from the Author or Editor:
Ok, I rearranged the text so that an intro to the function is first, then the function. Hopefully this will help minimize confusion.

Ken Buckley  Oct 13, 2017  Feb 09, 2018
Printed
Page 60
first <div> tag in the <body> section of Example 4-1

instead of
<div class="react-container">

it should be
<div id="react-container">

so later on this <div> can be referenced with document.getElementById("react-container") in the book (Page 64).

Note from the Author or Editor:
Thanks - updated this.

M L  Aug 12, 2017  Feb 09, 2018
Printed
Page 93
first two lines

actual:

babel-preset-es2017
Compiles what is in ES2017 to ES2017

expected:

babel-preset-es2017
Compiles what is in ES2017 to ES2016


ref: https://babeljs.io/docs/plugins/preset-es2017/

Note from the Author or Editor:
I fixed the typo. Thanks.

Gary Tsang  Sep 26, 2017  Feb 09, 2018
Printed
Page 107
bottom half

The order of the paragraphs seems mixed up.
It seems like the paragraph starting with 'This will start your application on port 3000. [...]'

Should come directly after the paragraph starting with 'From within my-react-project folder, you can [...]'

The paragraph in-between these two has nothing to do with running the development server, and actually makes the last paragraph confusing, because it starts with 'This', referring to the earlier paragraph.

Note from the Author or Editor:
Great. Fixed these out of order sentences.

Anonymous  Jul 19, 2017  Feb 09, 2018
Printed
Page 114
Code

Default prop assignment for "title" uses "[recipe]" but output on next page (115, Figure 6-6) shows "[untitled recipe]". I can't figure out how "untitled" got in there?

Note from the Author or Editor:
This is a typo. Fixed the code so that the Summary output is correct.

Gary Hogle  Nov 22, 2017  Feb 09, 2018
PDF
Page 116
2nd paragraph under title "Installing Node.js"

line 3, "nom" should be "npm".

Note from the Author or Editor:
This was fixed during copyedit.

Hongru Hou  Jan 15, 2017  Apr 26, 2017
PDF
Page 175
end of chapter 7th

There's a title Flux at the end of chapter 7 but there's no content below it and then chapter 8 just begin with Redux.

Might be missing information or a typo.

Note from the Author or Editor:
This was fixed during copyedit.

Anonymous  Feb 05, 2017  Apr 26, 2017
Printed
Page 177
The code following on from "const countdownActions"

The code on this page, differs from the examples on git hub.
The git hub code works (also the JS Bin code example works if you get rid of the css as I think JS Bin has issue with the css at this time). In the book the function 'tick' should match with the correct github code:

const countdownActions = dispatcher =>
({
tick(count) {
dispatcher.handleAction({
type: 'TICK',
count: count -1
})
},
reset(count) {
dispatcher.handleAction({
type: 'RESET',
count
})
}
})

Note from the Author or Editor:
Fixed the action to send the proper count with each tick.

Ken Buckley  Jan 02, 2018  Feb 09, 2018
Printed
Page 195
First text paragraph


The console output at the top of page 195 will not be the output for the inputs and the code as per that whole section "The Color Reducer" - the rating value will be 0 as against the stated 4.

The id value for existingColor and action do need to be the same for this case. I get what you are trying to do - but the code does not match it. The example in github works fine (because the id's are the same).

Note from the Author or Editor:
Changed the ID to match

Ken Buckley  Jan 09, 2018  Feb 09, 2018
Printed
Page 208
A few typos throughout the page

The last statement of the logger function (the logger function starts on page 207 but ends on the top of page 208) should contain the line:
return result

A note that the style to use the function applyMiddleware function has changed since version 3.1.0 (?) of react, but the given style still works.https://github.com/reactjs/redux/releases?after=v3.1.1

As per Sam Frances comment here in the errata, the line stateData in the function beginning const storeFactory should be replace with: initialState


and finally the final code line of the page may not make sense in the updated github code ( dosen't look like the argument fits the current code I looked at ). i.e. const store =storeFactory(true) should just be const store = storeFactory()

Note from the Author or Editor:
Fixed the typos in Atlas.

Ken Buckley  Jan 17, 2018  Feb 09, 2018
Printed
Page 219
in the gitHub code, in relation to the <TimeAgo> tag.

On page 219, the second last code line on the page, is a code line:
<TimeAgo timestamp={timestamp} />
- which facilitates the printing of when the Color component was added. However this gives a misspelt message on 0 seconds - i.e.
"0 second ago" can occur (due to React's zipiness) in the color component instead of "0 seconds ago".

Just a detail but can be solved by amending the printResult and lessThanAMinute functions in time-helpers.js

i.e. in the function printResult change the code to

`${result} ${timeframeName + (((result > 1) || (result === 0)) ? "s" : "")}` //amended to handle 0 seconds

in lessTaanAMinute you will need to put in a switch statement and a catching of zero of first character on the regular expression which would grab the /second/ . If you want to.

Note from the Author or Editor:
This is technically true, but the goal of the Color component isn't to cover every edge case of timing, it's to show how to render a color on the page. I like that React is able to render this fast in some cases, but I think it complicates understanding if we make a change here.

Ken Buckley  Jan 19, 2018  Feb 09, 2018
Printed
Page 220
First text paragraph, beginning with ColorList is now a component

In the first paragraph of the page that begins with

ColorList is now a component class, - replace ColorList with Color to read
Color is now a component class,

Note from the Author or Editor:
This note is correct. I have fixed this in Atlas.

Ken Buckley  Jan 29, 2018  Feb 09, 2018
PDF
Page 285
First text block after code sample on adding routes

In the text "For example, when the location is ...localhost:300/about/history, the History component" the port number should be 3000, not 300.

Maurice Rickard  May 11, 2017  Feb 09, 2018
PDF
Page 288
1st paragraph

At the top of the page, the text reads "Router parameters allow us to capture this value. They can be defined in routes using a semicolon."

It should read "Router parameters allow us to capture this value. They can be defined in routes using a colon."

Note from the Author or Editor:
Thanks, fixed.

Maurice Rickard  May 11, 2017  Feb 09, 2018
ePub
Page 299
Block of code after “Once the component renders, D3 builds the visualization and adds it to the DOM:” Excerpt From: Alex Banks and Eve Porcello. “Learning React.” iBooks.

`import d3 from 'd3'` should be `import * from d3`

`const scale = d3.time.scale().domain(times).range(range)` should be `const scale = d3.scaleTime().domain(times).range(range)`. It may have worked as written in a previous version of d3 in which case it might be worth specifying the exact version used.

Note from the Author or Editor:
Good note. I added a reference to the D3 version used which is 3.5.6.

Anonymous  May 20, 2017  Feb 09, 2018
Mobi
Page 1432
first code example (page number is from Kindle eBook)

The authors define their own compose function; other compose() functions -- such as the node compose function at https://www.npmjs.com/package/compose simply fails to work.and gets an error variable not found at this line:
hours: date.getHours()

If there's this much difference between compose functions, then this requires a much more in-depth discussion of why they may be different and and admonition to ONLY use the one defined in the book.

Cost me a bunch of time to figure this out -- not good for a book which specifically states they are going to introduce developers to functional programming.

Note from the Author or Editor:
Ok, made a change to note to reiterate that it's important to use our compose function.

JESii  Jun 09, 2017  Feb 09, 2018
Mobi
Page 1962
1st e#)paragraph in section "React.Cmponent in Chapter 4 (mobi pag

The statement "... one of the ky features included in the ES6 spec is React.Component".

I think what you mean is that React.Component uses key features introduced in ES6.

Note from the Author or Editor:
Fixed this for clarity.

Jon Seidel  Jun 10, 2017  Feb 09, 2018
Mobi
Page 1962
Heading "Component Classes as Types"

At location 1869 (2nd paragraph following Figure 4.4, you say you'll investigate "...three different way to create component: createClass, ES6 classes, and stateless functional components."

Best practice for introducing the three topics is to use the three items as the section headings that describe them: instead you use:
1) React.createClass [very close]
2) Component Classes as Types [complete mis-match]
3) Stateless Functional Components [perfect]

My issue is with #2 - it's so far from the expected title that it throws the reader off, trying to figure out what this is all about.

Note from the Author or Editor:
Changed to:

1) createClass
2) ES6 Classes
3) Stateless Functional Components

Jon Seidel  Jun 10, 2017  Feb 09, 2018