Historical errata for React for Real

When copying over the files for movieguide from the project used in the previous chapters, we copy webpack.config.js but do not copy index.js. Webpack is configured to use entry: {app: ‘./src/index.js’}, so an error is generated on Page 158 when npm start is run. I think index.js needs to be added to the list of files to copy from the old project and modified appropriately since configuring webpack to use store.js as an entry doesn’t seem to make sense. With that fixed, I’m getting WARNING in ./src/store.js
5:27-38 "export ‘rootReducer’ was not found in ‘./reducers’ in the console when I run, so I think there may also be a problem on page 156 where we seem to be importing ‘combineReducers’ and also ‘export default combineReducers’ in reducers.js. We then try to import ‘rootReducer’ from reducers.js , so shouldn’t the export be ‘rootReducer’ is is there dark magic going on? Even with those changes, I still can’t see @INIT in the console on page 159, so I’m stumped for now on how to proceed. Great up to this point though!

Amendment to my previous submission:
I created an index.js file containing nothing but imports for React and createStore
I then found the error I had made in store.js where I had imported rootReducers using {} by accident. Once those changes were made, I’m now able to see @INIT in the console.

Code is not indented — everywhere — when reading on Kindle on my iPad. Makes it extremely difficult to wade through the code examples. Never seen this on a PragProg book before and I might not have bought the book had I know this would be the case.

When running “npm test”, jest reports the error: “Error: This promise must be present when running with -o.” This is a known bug in Jest (issue #4419 on jest’s Github repo).

This error only occurs when the project is not initialized for Git (e.g., no “.git” folder). To fix it, install a git client and run “git init” in the wordcount folder.

At the top of the page, it shows the default state. It indicates the default state of ‘loading’ should be ‘false’, but it really should be ‘true’, since the ‘loading’ reducer on page 68 defaults the state value to ‘true’. Indeed, the redux dev tools confirm this, showing ‘loading’ as ‘true’.

In the MovieBox.js source code, the second property is named ‘favorite’. In the paragraph following the source code, this property is mistakenly referred to as ‘favorited’.

For the WordCounter JSX, inclusion of the enclosing div tag messes up the format where the “Word count” and “Progress” are presented on the same line butted up against each other.

It says “Do the same with Counter, Editor, and SaveManager.” But I think SaveManager should not be included here. Later on the next page it talks about how to extract SaveManager and some dependencies: “We’re left with the SaveManager component. Let’s create separate modules for SaveManager, SaveButton, and AlertBox”

Chapter 4 Test Component Boundaries (reading on SafariBooksOnline)

…it’s a good enough substitute if we assume that React itself correctly translates events into calls to the vent handlers.
vent -> event

“Once you understand what’s involved in the build, you can skip most of these steps by using react-create-app.” The name of the package is reversed; it should be “create-react-app”. The name is correct in the footnote.

“After the reducers process @INIT, the new state looks like this:” Here it is stated that the value of `loading` will start as `false`, but earlier we saw that the default state for the loading reducer is `true`.

jest —watch is only supported when a repo (git or hg) is set up. jest —watchAll is required for this example to work properly

In Japanese with utf-8, countWords function does not work correctly.

The following works fine.

function countWords(text) {
return text ? text.match(/\\S+/g).length : 0;
}

Section “Redux fundamentals”

““That means you have to construct an entirely new state for every update, even making new copies of fields that remain the same.”

This is not right. Any object that “changes” needs to return a new 0bject, reflecting the change, but should reference the same fields as the original object for fields that don’t change. This makes it possible to retain a lot of history (for things like undo and redo) without horrible memory issues. It does mean that all ancestor objects of fields that change, will result in new objects, but mostly to the same, unchanged fields as the original. This is only viable as long as you ensure immutability of redux objects, but that’s the redis design.

“To declare a function inside a class, use the function name followed by brackets,”

If this is describing the above declaration of render(), it should read

“To declare a function inside a class, use the function name followed by parentheses,”