Errata

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.

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.

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.

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.

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

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.

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

Comment should be "Dan", not "Deacon"

Note from the Author or Editor:
Updated Deacon to Dan

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.

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.

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.

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

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.

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()

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.

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.

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.

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.

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

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.

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.

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

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.