On page 208, you say:

"In example 8-10 we create a store instance using the storeFactory. Since we do not send any arguments to this store, the initial state will come from state data."

But in the actual example, you do pass an argument true.

Invalid

the links in CH 12 are inactive or invalid

When I build color-organizer-containers, I get this error.
The code in my app is the same, the only difference is that I create my app by create-react-app (did not take the code from the repository)

What could be wrong in the app

Hi,

Checking out the preview book on O'Reilly, I ran across a small issue with the initial recipe.js example under "Break Components into Modules".

import React from "react";

function Recipe({name, ingredients, steps}) {
    return (<section id="baked-salmon"><h1>{name}</h1>
        <ul className="ingredients">        {ingredients.map((ingredient, i) => (
            <li key={i}>{ingredient.name}</li>))}      </ul>
        <section className="instructions"><h2>Cooking Instructions</h2>        {steps.map((step, i) => (
            <p key={i}>{step}</p>))}      </section>
    </section>);
}

Using this Recipe function, it appears every top level <section> would have an id of "baked-salmon". The examples leading up to this point "slugified" something for the id, but this example loves baked salmon specifically!

Hello @MoonTahoe !

I have a question about this line.

What do you mean by error in <p>Error Loading Members: error</p> after :.
In this place should be a visible error like word error or error like error message?
Cause I thought it was a message about the error and it should be in figure brace {error}.

Thank you for your book!

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

var dinner = "mac and cheese"

var backpackingMeals = {
...morning,
dinner
}

console.log(backpackingMeals)

gives me the following error in chrome developer tools:

Uncaught SyntaxError: Unexpected token ...

Dear Authors,

The code snippet in Ch 2 returns undefined:

const getFakePerson = async () => {
  try {
    let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
    let { results } = res.json();
    console.log(results);
  } catch (error) {
    console.error(error);
  }
};

getFakePerson();

I believe the solution is to add await before the res.json():

const getFakePerson = async () => {
  try {
    let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
    let { results } = await res.json();
    console.log(results);
  } catch (error) {
    console.error(error);
  }
};

getFakePerson();

Using the instructions in Ch 5 to install webpack and babel result in errors and nothing will work.

$ npm install babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 --save-dev

Results in:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/username/projects/learning-react/package.json'
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN learning-react No description
npm WARN learning-react No repository field.
npm WARN learning-react No README data
npm WARN learning-react No license field.


+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 154 packages from 68 contributors and audited 2879 packages in 10.018s
found 0 vulnerabilities

Then running $ npm install react react-dom --save

Returns this:

npm WARN enoent ENOENT: no such file or directory, open '/Users/username/projects/learning-react/package.json'
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN learning-react No description
npm WARN learning-react No repository field.
npm WARN learning-react No README data
npm WARN learning-react No license field.

+ [email protected]
+ [email protected]
added 6 packages from 1 contributor and audited 8785 packages in 1.544s
found 0 vulnerabilities

So it installs something but still gives errors. Then I created webpack.config.js and when I run webpack I get:

 - configuration.output.path: The provided value "dist/assets" is not an absolute path!
   -> The output directory as **absolute path** (required).

So I changed that value to an absolute path and I get this:

			throw new Error(
			^

Error: options/query cannot be used with loaders (use options for each array item) in {
  "test": {},
  "exclude": {},
  "loader": [
    "babel-loader"
  ],
  "query": {
    "presets": [
      "env",
      "stage-0",
      "react"
    ]
  }
}
    at Function.normalizeRule (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:264:10)
    at rules.map (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:110:20)
    at Array.map (<anonymous>)
    at Function.normalizeRules (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (/usr/local/lib/node_modules/webpack/lib/RuleSet.js:104:24)
    at new NormalModuleFactory (/usr/local/lib/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (/usr/local/lib/node_modules/webpack/lib/Compiler.js:586:31)
    at Compiler.newCompilationParams (/usr/local/lib/node_modules/webpack/lib/Compiler.js:603:30)
    at Compiler.compile (/usr/local/lib/node_modules/webpack/lib/Compiler.js:611:23)
    at readRecords.err (/usr/local/lib/node_modules/webpack/lib/Compiler.js:284:11)
    at Compiler.readRecords (/usr/local/lib/node_modules/webpack/lib/Compiler.js:479:11)
    at hooks.run.callAsync.err (/usr/local/lib/node_modules/webpack/lib/Compiler.js:281:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeRun.callAsync.err (/usr/local/lib/node_modules/webpack/lib/Compiler.js:278:19)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/usr/local/lib/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.run (/usr/local/lib/node_modules/webpack/lib/Compiler.js:275:24)
    at processOptions (/usr/local/lib/node_modules/webpack-cli/bin/cli.js:352:14)
    at yargs.parse (/usr/local/lib/node_modules/webpack-cli/bin/cli.js:363:3)
    at Object.parse (/usr/local/lib/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
    at /usr/local/lib/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-cli/bin/cli.js:365:3)
    at Module._compile (internal/modules/cjs/loader.js:736:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
    at Function.Module._load (internal/modules/cjs/loader.js:560:3)
    at Module.require (internal/modules/cjs/loader.js:665:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:736:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
    at Function.Module._load (internal/modules/cjs/loader.js:560:3)

Researching this error gives me a lot of pages suggesting how to fix babel 6 vs 7 issues and everything I've tried is a rabbit hole that doesn't fix anything.

First, "Thanks for the really good book 'Leanring-React'".

I was trying the useEffect sample locally in my project. It was not working as shown in the book. Then I tried the sandbox of yours... It was working correctly but when I just updated package version to the latest, the sample though working but misbehaving.

After checking the checkbox, alert appears first and then the check mark is displayed.

Please see the sandbox. https://codesandbox.io/s/learning-react-useeffect-3-forked-udpqd

I love your books.
In the first edition, you omitted the semicolons, but why did you add semicolons at end of the statement in the second edition?

The link from Chapter 2 for getFakeName (http://jsbin.com/ceteja/1/edit?js,console) does not seem to work. When I run the JSBin, I get the following error:

XMLHttpRequest cannot load http://api.randomuser.me/?nat=US&results=5. Redirect from 'http://api.randomuser.me/?nat=US&results=5' to 'https://api.randomuser.me/?nat=US&results=5' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://null.jsbin.com' is therefore not allowed access.

I'm curious, why was storeFactory implemented as follows:

const storeFactory = (initialState=stateData) => applyMiddleware(logger, saver)(createStore)( combineReducers({colors, sort}), (localStorage['redux-store']) ? JSON.parse(localStorage['redux-store']) : initialState )

My first (newbie) instinct would be to create storeFactory instead as
const storeFactory = (initialState=stateData) => createStore(combineReducers({colors, sort}),(localStorage['redux-store']) ? JSON.parse(localStorage['redux-store']) : initialState, applyMiddleware(logger, saver)

Any insights would be appreciated. thanks!

1. Is it equivalent of defaultProps in the stateless functional component's onNewColor definition?

const AddColorForm = ({ onNewColor=f=>f }) => {};
AddColorForm.propTypes = {
  onNewColor: PropTypes.func
}

2. Can I refactor that statement as:

const AddColorForm = ({ onNewColor=()=>{} }) => {};
AddColorForm.propTypes = {
  onNewColor: PropTypes.func
}

npm ERR! Failed at the [email protected] postinstall script.

$ npm install
npm WARN deprecated [email protected]: This version of react-dom/server contains a minor vulnerability. Please update react-dom to 16.0.1 or 16.4.2+. Learn more: https://fb.me/cve-2018-6341

in this file: https://github.com/MoonHighway/learning-react/blob/master/chapter-07/mounting-lifecycle-clock/package.json

:) happy hacking

In the ReadMe, it says go to first-edition branch for first-edition book. I am looking for code sample for first edition book.
I couldn't find 'first-edition' branch, I did find master branch that has similar code to first edition book.

In this file:
https://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/05-hocs.html

I don't think componentWillReceiveProps method in MenuButton class is needed:

Chapter 2 topics:-
ES6 modules and CommonJs
are missing from code

<Redirect from="/history" to="/about/history" />

https://rawgit.com/MoonHighway/learning-react/master/chapter-11/company-website/dist/#/history
can't be redirected to the link below
https://rawgit.com/MoonHighway/learning-react/master/chapter-11/company-website/dist/#/about/history

Hi,

I'm following the code example from chapter-11/color-organizer. Basically, I mimic the code in my project with few minor changes.

I can successfully run the example locally, but when I run my project I see my store being empty when it comes to load ui components. I don't get any compile or console errors, and I see other parts of the app working fine. I spent lots of time debugging store creation code but I can't figure out why it doesn't work. Please help to find the reason.

Here are my findings:

You can clone my project and run it with npm install and npm run dev. (Note: project also has back end code but it is irrelevant. Question is only about front end part where I use static data file).

There are two url available in my project: / and /cars. The /cars url reads data file directly and it does output all the data correctly.

The root url suppose to do the same by utilizing redux store. However the data array used by ui component comes empty. I guess there is something wrong with the code for store creation (below), although I precisely mimicked the code example. There is literally only one change that I made which is carsReducer, and I coded it exactly as other reducers in the example.

I also noticed that localStorage isn't being populated in the console, but it doesn't give much clue.

PS. I apologize if this is the wrong place for my question, but I really want to understand the issue and I hope someone can help me.

src/main/resources/static/js/store/index.js

const storeFactory = (initialState=stateData) =>
    applyMiddleware(logger, saver)(createStore)(
        combineReducers({carsReducer}),
        (localStorage['redux-store']) ?
            JSON.parse(localStorage['redux-store']) :
            initialState
    )

Chapter 7 example for HOC with toggle button has wrong links. Current url is for example number 4, not 5

project: chapter-05\recipe-app
env: windows
error: when run "npm run start" it failed because the start script used "open dist/index.html" while it should be "start dist/index.html" for windows

In the 7-th chapter Higher Order Components section has a wrong link for 5-th example ( both Demo and Source code links are incorrect )

Instead of proper link for demo and proper link for source code used the wrong ones

Simply increment the value of the document in the link:

From this: https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/04-hocs.html

To that: https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/05-hocs.html

Hey there, noticed an error in this code snippet. Won't run, wanted to bring it to your attention.

Love the book!!!

http://jsbin.com/gapoxa/9/edit?js,console

Readme file's content is not displayed on initialisation or when choosing a repo.

I followed the code in second edition book + sample in sandbox, both gave the same result.

Issue: RepoMenu component is expecting a login prop, but when used in UserRepositories component, the property is not passed and no calls are made to get the readme file data.

I fixed it and forked the sandbox with the solution adding the login prop when using RepoMenu component.

Invalid Links

please update the links in chapter 12

Running this example shows the year as '117' (brackets/chrome), switching to getFullYear fixes the problem.

the website you're currently using for hosting your demos rawgit will be shut down the next month do you have any plans to host the demos in another website so we still have access to them

Chapter 4 - 03-react-components/01-components.html

The target container or div name - they need to match. Only one change to be made.

1. Change

    <div id="react-container"></div>

TO

    <div id="root"></div>

OR

document.getElementById("root")

TO

document.getElementById("react-container")

Hello,

I enjoy reading your book, and looking forward when it will be released. Right now I'm reading your book from safaribooksonline and I found that chapter 11 doesn't matches with code that you have. In the book you use react-router, but in your code examples on GitHub you use react-router-dom. Looks like react-router-dom is a new router v4.0 and it's a way to go. So my question is are you going to cover new react-router-dom in the book, and if so do you know when it will be updated on safaribooksonline?

Thank you very much and keep up a good work.

Folks,

I have no idea where is this SearchForm. The textbook keeps using it throughout the demo. I have checked the current repo and you dont use it in any of your sandboxes.

So, where this this SearchForm component?

Or, are you suggesting that we build it using what we have learnt till now.

This is the sentence 'Assuming we have a SearchForm component ready to collect search strings from the user'. Why would you assume that?

I dont get it.

Hi, I tried the example from p.182 (Incorporating React Markdown) and I can't display Readme's content.

My browser show the following error:

Line 21:8: React Hook useEffect has missing dependencies: 'loadReadme' and 'login'. Either include them or remove the dependency array react-hooks/exhaustive-deps

The readme file isn't displayed on CodeSandbox neither (https://codesandbox.io/s/cocky-fog-h6xde?file=/src/App.js), and RepositoryReadme.js has the following error:

Don't know if this matters but I'm using Firefox.

Both the webpack.config.js in the book, and the one here fail in different ways when used with the current version of webpack.

The error I'm getting when running webpack in the chapter 5 recipie app folder is Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize inste ad. and on the version in the book I get Error: options/query cannot be used with loaders (use options for each array item)

At this point I'm pretty stuck trying to continue through the examples. I've never used webpack before and don't know the api well enough to fix either issue.

The spread operator in this code App.js line 62 keeps giving me the following ESLint error, yet the spread operator works fine in other places, e.g. ColorList.js line 11. The line/column numbers below are mine, not yours, but there's no significant difference in the code. I've actually cut-and-pasted that function directly and it still gives me the error.

file: 'file:///.../color-rater/src/Component/App.js'
severity: 'Error'
message: 'Parsing error: Unexpected token ...'
at: '37,11'
source: 'eslint'

Wondering why this is a problem in that one spot. If I replace App.js lines 61-64 with Object.assign({}, color, { rating }) it works as expected.

Loving early access to the e-book... thanks for providing it that way!

Hello. I'm working through Safari's React Starter Kit—A Quick Start Guide to the React Ecosystem and Creating Your First App ... and there is no Star.css to be found anywhere. Not in bit.ly, not in Gist, not in the source files.

Hi,

I have a question in this code, which is also in Example 8-9 in the book:

const storeFactory = (initialState=stateData) =>
    applyMiddleware(logger, saver)(createStore)(
        combineReducers({colors, sort}),
        (localStorage['redux-store']) ?
            JSON.parse(localStorage['redux-store']) :
            stateData
)

Is the last line correct? Shouldn't it be initialState instead? Otherwise what is the purpose of passing an initialState argument to the function?

Hi there,
is there an updated running example of the color organizer which i can download like in the first edition of the book?
I am completely confused about only having links to demo pages and not the full project.
Best regards,
Andreas

Error: open' is not recognized as an internal or external command operable program or batch file

I have installed Node 6.11.3 and Npm 3.10.10

this occurs on the "color-organizer"

This doesn't actually work, at least in two browser consoles I've tried:

const getFakePerson = async () => {
  try {
    let res = await fetch("https://api.randomuser.me/?nat=US&results=1");
    let { results } = res.json();
    console.log(results);
  } catch (error) {
    console.error(error);
  }
};

getFakePerson();

The fourth line needs to be:

let { results } = await res.json();

Running this on jsbin is fine but not on the chrome console:

let schools = [
{ name: "Yorktown"},
{ name: "Stratford" },
{ name: "Washington & Lee"},
{ name: "Wakefield"}
]

const editName = (oldName, name, arr) =>
arr.map(item => {
if (item.name === oldName) {
return {
...item,
name
}
} else {
return item
}
})

let updatedSchools = editName("Stratford", "HB Woodlawn", schools)

console.log( updatedSchools[1] )
console.log( schools[1] )

I get the Uncaught SyntaxError: Unexpected token ...

Following this: http://stackoverflow.com/questions/38490804/spread-operator-in-react-throwing-error-of-unexpected-token did not work.

In useHooks in chapter 06, ColorProvider.js should be renamed to color-hooks.js to be consistent with the book.

CodeSandbox link: https://codesandbox.io/s/learning-react-color-organizer-8-jqchd?file=/src/ColorProvider.js

I get an npm install error running on windows 10 node 8.0.0. npm 5.0.3:

Microsoft Windows [Version 10.0.14393]
(c) 2016 Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>cd c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer

c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer>npm -v
5.0.3

c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer>npm install
npm WARN prefer global [email protected] should be installed with -g

[email protected] install c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.1/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.1/win32-x64-57_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

[email protected] install c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\fsevents
node install

[email protected] postinstall c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-sass
node scripts/build.js

Building: C:\Program Files\nodejs\node.exe c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'C:\Program Files\nodejs\node.exe',
gyp verb cli 'c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\bin\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:13:12)
gyp verb which failed at F (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:68:19)
gyp verb which failed at E (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:80:29)
gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:89:16
gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\index.js:42:5
gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed python2 { Error: not found: python2
gyp verb which failed at getNotFoundError (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:13:12)
gyp verb which failed at F (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:68:19)
gyp verb which failed at E (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:80:29)
gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:89:16
gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\index.js:42:5
gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21) code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python C:\Python36\python.EXE
gyp verb check python version C:\Python36\python.EXE -c "import platform; print(platform.python_version());" returned: "3.6.0\r\n"
gyp verb could not find "C:\Python36\python.EXE". checking python launcher
gyp verb could not find "C:\Python36\python.EXE". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Python36\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack at PythonFinder. (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.14393
gyp ERR! command "C:\Program Files\nodejs\node.exe" "c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-sass
gyp ERR! node -v v8.0.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxxxx\AppData\Roaming\npm-cache_logs\2017-06-18T05_53_06_349Z-debug.log

c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer>

In this line:

I think stateData should be initialState, which is the parameter of the function.

in chapter 5 on "npm start" I get the following error:

24 verbose npm v5.5.1
25 error code ELIFECYCLE
26 error errno 1
27 error [email protected] start: opener dist/index.html
27 error Exit status 1
28 error Failed at the [email protected] start script.
28 error This is probably not a problem with npm. There is likely additional logging output above.
29 verbose exit [ 1, true ]
<<<

I would like to run the examples. Thanks for any help.

When rating a Color, the alert displays as expected, but color and background of <h1>title</h1> remain still, not changing as illustrated in the book. Looks like that setting style of the element in componentWillUpdate has no effect.
After clicking the alert, the background of the <section> element does turn white as illustrated.
I downloaded the repository in zip and npm start'ed this sample without any modification. My Chome's version is 64.

Hi Alex,

I enjoy reading your 'Learning React' book. Good content and great examples.

I have a question for you. Are you going to cover styles in this book? I could not find any information about it.

Thanks and keep up a great work.

I'm following along with the book and I came across a problem.

On chapter 6, in the Color Organizer exercise, I keep getting the error e is undefined

It looks like it's referencing the default colors array and since it's empty it's complaining about the id. Because when I take out the reference to it it works but it renders two colors (an empty one for the first one) and then the one that I've selected. It then complains that the first color doesn't have a title, or color.

I got it to work correctly by filtering the array to remove the empty item but I'd like to know what is causing this. I'm new to React so I want to make sure I'm doing things correctly.

Here is my code:

class ColorList extends Component {

	render() {
		const {colors, onRate, onRemove} = this.props
		return (
		    <div className="color-list">
		        {(colors.length === 0) ?
		            <p>No Colors Listed. (Add a Color)</p> :
		            colors.map(color =>
		                <Color key={color.id}
		                       {...color}
		                       onRate={(rating) => onRate(color.id, rating)}
		                       onRemove={() => onRemove(color.id)} />
					)
		        }
			</div>
		)
	}

}

ColorList.propTypes = {
    colors: PropTypes.array,
    onRemove: PropTypes.func,
	onRate: PropTypes.func    
}


ColorList.defaultProps = {
	colors: [],
	onRate: f=>f,
	onRemove: f=>f
}

export default ColorList