arkency / reactjs_koans Goto Github PK

Learn basics of React.js making the tests pass

License: MIT License

JavaScript 88.22% HTML 4.79% CSS 6.99%

reactjs_koans's Introduction

React.js Koans

If you want to learn React.js you came to the right place. We prepared a set of practical exercises that will help you learn React.js from square one. The only thing you need to know is JavaScript. Here we are using ECMAScript 2015 standard.

The Koans are a set of tasks to complete. Prepared tests checks if they are done correctly.

Installation

Make sure you have Node.js and Python 2 installed.

git clone https://github.com/arkency/reactjs_koans.git
cd reactjs_koans
npm run setup

Koans structure

Edit the files found in the exercises directory.
The koans directory contains the source of all the exercises. test contains the tests.
src contains files compiled from exercises.
build contains sources launched in the web browser version of Koans.

Start a local web server (optional)

You can run a webserver and see your changes live in your web browser:

Run command npm run start
Visit http://localhost:8080/

Instructions

Remember about running the setup script before you start working on Koans!
Work on the code found in the exercises directory and run the tests to see if you did everything right.
You need to do the exercises in the given order.
Try to not peek at the test files! They contain spoilers.
To run the tests, use npm run test. To automatically run tests when your code changes, use npm run watch.

Video walkthrough

More than just Koans

Blog

If you want to read more about React.js and modern JavaScript applications, check out our React Kung Fu blog.

The book

For people who finished Koans, we prepared something to go continue: the React by example book. In this book, we explain how to create common widgets like password-strength meter or credit card input.

For the price of the ebook, you get:

Over 140 pages of React content. From fast introduction to React to example Todo app;
11 practical real-world examples;
Repositories with code for most of the examples;

It's an early version of the book. It means some wording in book may change and there will be more examples later. All updates for the book are free.

You can use special 20% discount code: REACTKOANS. Grab your copy today or download a free chapter

Additional resources

React docs - it's a great source of in-depth information about React.
Why keys are important in React - great reading explaining the reason for React's keys.
Reactiflux. User group on Slack. You can meet a lot of people using React there. There's a channel for beginners needhelp.

About

React Koans is funded and maintained by Arkency. Check out our other open-source projects.

You can also hire us or read our blog.

reactjs_koans's People

Contributors

Stargazers

Watchers

Forkers

ffrancieli winkler1 thomasdavis rikbrowning feng-tao vgoklani yonibot byennen waynehuang13 jordan-acosta mess110 martindale lisp-ceo mjul westernbytes kyasui stevebyerly codevlabs aguynamedsteve anselmo gnagel pollrobots magee jhgg palaa159 rolandnsharp jaybobo phwd dpastoor ulricgan dyhpoon hnq90 lshepard matthova josalmi littlebirdsft jchinmay wjgilmore erophames fredericksilva langelee austinsc lowtalker laanak08 one-aalam jacklin10 nunb ivlists neelotpaldas poltak vidyuthd frimmy allison-lara lobenichou jyeg morrxy nguyenlocduy aaronmgdr javflores raul-gracia tuckerd ahmdrefat markandrewj thecodingsketchbook ybur-yug wpannell leekiernan carver vazquez katiepekarek hasmichaels geirman iarnaud clario wlads sebastianmuszynski mauriciosoares projjol-zz lw7360 davidragone mylesborins boton marb61a leimonio foliveira mosse iamjpg ashlabs kristofferhebert learrrrnin leroyg chimarvine swillis silvaemota niksolaz gzcarlos kenbier fab9 joseph-ortiz kshiraiw

reactjs_koans's Issues

05 Challenge has confusing error

I'm seeing "Apples" in my list, but the test is failing with "GroceriesListItem should display a grocery name".

Changing the test in this way results in a passing test:

-      assert.equal(groceryItem.props.children, "Apples", "GroceriesListItem should display a grocery name");
+      let children = groceryItem.props.children;
+      assert.equal(React.Children.count(children), 1, "GroceriesListItem should contain one child element");
+      let expected = "Apples";
+      React.Children.forEach(children, function (c) { if (c != expected) { throw new Error("GroceriesListItem should display only: "+expected+" not "+c); }});

I'm going to assume that my code is broken instead of the test, since I'm new to React. Can someone help me improve this test so people can understand what's actually wrong?

Test - 7 is not getting executed.

Test - 7 is neither getting failed nor getting executed. It's just hang in there for the whole time, with no response. Screenshot attached. Not sure if I'm doing something wrong. Please help me.

Cannot resolve module 'babel-loader'

 reactjs_koans (master) npm run start

> [email protected] start /Users/trent/Work/reactjs_koans
> npm run compile > /dev/null 2>&1 && nodemon server.js

7 Jul 17:47:59 - [nodemon] v1.3.7
7 Jul 17:47:59 - [nodemon] to restart at any time, enter `rs`
7 Jul 17:47:59 - [nodemon] watching: *.*
7 Jul 17:47:59 - [nodemon] starting `node server.js`
Listening at http://localhost:8080
Hash: 9b45fbab5aa84a663413
Version: webpack 1.10.1
Time: 582ms
 Asset    Size  Chunks       Chunk Names
app.js  207 kB       0       main
chunk    {0} app.js (main) 174 kB [rendered]
    [0] multi main 52 bytes {0} [built] [1 error]
    [1] (webpack)-dev-server/client?http://localhost:9090 1.82 kB {0} [built]
    [2] (webpack)-dev-server/~/socket.io-client/index.js 37 bytes {0} [built]
    [3] (webpack)-dev-server/~/socket.io-client/lib/index.js 1.5 kB {0} [built]
    [4] (webpack)-dev-server/~/socket.io-client/~/debug/debug.js 2.46 kB {0} [built]
    [5] (webpack)-dev-server/~/socket.io-client/lib/url.js 1.53 kB {0} [built]
    [6] (webpack)-dev-server/~/socket.io-client/~/parseuri/index.js 690 bytes {0} [built]
    [7] (webpack)-dev-server/~/socket.io-client/~/socket.io-parser/index.js 7.63 kB {0} [built]
    [8] (webpack)-dev-server/~/socket.io-client/~/component-emitter/index.js 3 kB {0} [built]
    [9] (webpack)-dev-server/~/socket.io-client/~/socket.io-parser/~/json3/lib/json3.js 40.1 kB {0} [built]
   [10] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
   [11] (webpack)-dev-server/~/socket.io-client/~/socket.io-parser/~/isarray/index.js 120 bytes {0} [built]
   [12] (webpack)-dev-server/~/socket.io-client/~/socket.io-parser/binary.js 3.84 kB {0} [built]
   [13] (webpack)-dev-server/~/socket.io-client/~/socket.io-parser/is-buffer.js 252 bytes {0} [built]
   [14] (webpack)-dev-server/~/socket.io-client/lib/manager.js 11 kB {0} [built]
   [15] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/index.js 38 bytes {0} [built]
   [16] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/index.js 140 bytes {0} [built]
   [17] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/socket.js 16.9 kB {0} [built]
   [18] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/transports/index.js 1.08 kB {0} [built]
   [19] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/xmlhttprequest.js 1.16 kB {0} [built]
   [20] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/has-cors/index.js 458 bytes {0} [built]
   [21] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/has-cors/~/global/index.js 257 bytes {0} [built]
   [22] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/transports/polling-xhr.js 7.92 kB {0} [built]
   [23] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/transports/polling.js 4.85 kB {0} [built]
   [24] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/component-inherit/index.js 146 bytes {0} [built]
   [25] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/transport.js 2.74 kB {0} [built]
   [26] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/lib/browser.js 14.4 kB {0} [built]
   [27] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/lib/keys.js 297 bytes {0} [built]
   [28] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/has-binary/index.js 1.06 kB {0} [built]
   [29] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/has-binary/~/isarray/index.js 120 bytes {0} [built]
   [30] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/arraybuffer.slice/index.js 725 bytes {0} [built]
   [31] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/base64-arraybuffer/lib/base64-arraybuffer.js 1.7 kB {0} [built]
   [32] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/after/index.js 685 bytes {0} [built]
   [33] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/utf8/utf8.js 6.22 kB {0} [built]
   [34] (webpack)/buildin/module.js 251 bytes {0} [built]
   [35] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/engine.io-parser/~/blob/index.js 973 bytes {0} [built]
   [36] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/parseqs/index.js 708 bytes {0} [built]
   [37] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/debug/browser.js 3.28 kB {0} [built]
   [38] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/debug/debug.js 4.1 kB {0} [built]
   [39] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/debug/~/ms/index.js 2.02 kB {0} [built]
   [40] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/transports/polling-jsonp.js 4.82 kB {0} [built]
   [41] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/lib/transports/websocket.js 4.57 kB {0} [built]
   [42] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/ws/lib/browser.js 831 bytes {0} [built]
   [43] (webpack)-dev-server/~/socket.io-client/~/indexof/index.js 199 bytes {0} [built]
   [44] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/parseuri/index.js 1.19 kB {0} [built]
   [45] (webpack)-dev-server/~/socket.io-client/~/engine.io-client/~/parsejson/index.js 842 bytes {0} [built]
   [46] (webpack)-dev-server/~/socket.io-client/lib/socket.js 6.99 kB {0} [built]
   [47] (webpack)-dev-server/~/socket.io-client/~/to-array/index.js 216 bytes {0} [built]
   [48] (webpack)-dev-server/~/socket.io-client/lib/on.js 370 bytes {0} [built]
   [49] (webpack)-dev-server/~/socket.io-client/~/component-bind/index.js 474 bytes {0} [built]
   [50] (webpack)-dev-server/~/socket.io-client/~/has-binary/index.js 1.08 kB {0} [built]
   [51] (webpack)-dev-server/~/socket.io-client/~/has-binary/~/isarray/index.js 120 bytes {0} [built]
   [52] (webpack)-dev-server/~/socket.io-client/~/object-component/index.js 1.18 kB {0} [built]
   [53] (webpack)-dev-server/~/socket.io-client/~/backo2/index.js 1.4 kB {0} [built]
   [54] (webpack)-dev-server/~/strip-ansi/index.js 161 bytes {0} [built]
   [55] (webpack)-dev-server/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
   [56] (webpack)/hot/only-dev-server.js 2.2 kB {0} [built]
   [57] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]

ERROR in multi main
Module not found: Error: Cannot resolve module 'babel-loader' in /Users/trent/Work/reactjs_koans
 @ multi main

Error messages require rework

Current error messages works in contexts and need tests look-up to know what's going on. We need user to be able to know what's going on without need of looking into tests

Consider Opal as well

You may also want to consider Opal with https://github.com/zetachang/react.rb & https://github.com/zetachang/opal-native.

Slow dependency installing

I just tried npm installing this repo over public WiFi, and it took almost 5 minutes!

Obviously you can't do much to make the internet faster, but I noticed you're using the JSX compiler, babel-loader and mocha-traceur - three different ES6 compilers!

I would recommend trimming down to just babel and having everything use the same transform config

Internal watch failed

hello,
i did npm run setup and npm run start but this problem appear:

[nodemon] Internal watch failed: watch /home/frappe/Documents/reactjs_koans/exercises/05-Challenge-GroceryList-part-1.jsx ENOSPC

Examples doesn't build

Disregard

Setup doesnt work with latest node

npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] setup script 'npm install && ncp koans/ exercises/'.
npm ERR! This is most likely a problem with the reactjs_koans package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm install && ncp koans/ exercises/

Can't launch server

Hey Guys,

I can't launch the local server on OSX El Capitan, is it possible that there is an issue with the reactjs_koans package? I've tried npm rebuild, installed latest npm version, but it is still the same.

# reactjs_koans/exercises/npm-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/5.3.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/head/ruby/reactjs_koans/node_modules/.bin:/Users/head/.bin:/Users/head/.rbenv/shims:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/head/bin:/Applications/LibreOffice 2.app/Contents/MacOS:cli/bin
10 verbose lifecycle [email protected]~start: CWD: /Users/head/ruby/reactjs_koans
11 silly lifecycle [email protected]~start: Args: [ '-c',
11 silly lifecycle   'npm run compile > /dev/null 2>&1 && nodemon server.js' ]
12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `npm run compile > /dev/null 2>&1 && nodemon server.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:818:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/head/ruby/reactjs_koans/exercises
17 error Darwin 15.2.0
18 error argv "/usr/local/Cellar/node/5.3.0/bin/node" "/usr/local/bin/npm" "run" "start"
19 error node v5.3.0
20 error npm  v3.3.12
21 error code ELIFECYCLE
22 error [email protected] start: `npm run compile > /dev/null 2>&1 && nodemon server.js`
22 error Exit status 1
23 error Failed at the [email protected] start script 'npm run compile > /dev/null 2>&1 && nodemon server.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the reactjs_koans package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     npm run compile > /dev/null 2>&1 && nodemon server.js
23 error You can get their info via:
23 error     npm owner ls reactjs_koans
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Lesson #8 - React keys and importance of using it

TypeError while running `npm run test-es6`

I'm getting the following error while running npm run test-es6:

TypeError: Cannot read property 'scryRenderedDOMComponentsWithTag' of undefined                                                                                  
  at Context.<anonymous> (test/es6/01-HelloWorld.js:18:41)

I did some console logging and I found that there is no TestUtils property on the React.addons object used in the file, which means that the testing script fails in it("should complete all tasks", ...). I already tried npm rebuild and downloading the entire project again from Github, but the problem persists.

Is this a bug or am I doing something stupid?

Extra Task in the Grocery List

I wasn't sure what the prompt meant by "extracting creation of grocery to an external service". Could someone clarify or provide a hint?

In 05-Challenge-GroceryList-part-4.jsx:

// Extra Task: Extract creation (`addGroceryItem`) of grocery to external service.

Thank you for creating these koans, by the way.

Tests don't output anything

I'm sure that very interesting things are happening when I run npm run test, but none of it is showing up in the terminal. All that I get (after the output from npm run compile) is the message "ECHO is on", but the first test should be failing and causing mocha to bail.

It may be worth noting that executing the commands separately, as listed in package.json (redirecting the output of mocha to a file because || isn't a valid separator in Win7 PowerShell), generates the same output for npm run compile and nothing at all for mocha.

events.js:141 - app crashed

I tried to run: npm run start but I get:

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8080
    at Object.exports._errnoException (util.js:870:11)
    at exports._exceptionWithHostPort (util.js:893:20)
    at Server._listen2 (net.js:1237:14)
    at listen (net.js:1273:10)
    at Server.listen (net.js:1369:5)
    at EventEmitter.listen (/home/user/ark/reactjs_koans/node_modules/express/lib/application.js:617:24)
    at Object.<anonymous> (/home/user/ark/reactjs_koans/server.js:28:18)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
[nodemon] app crashed - waiting for file changes before starting...

06 - RenderComponent test fails

I have problem with 06 task, i think i made some kind of workaround, or there is something wrong with test for this task. Here is my code of renderName function:

function renderName(domNode) {
  React.render(React.createElement(Name), document.getElementById('tab-content8'))
}

And there is error generated by test:

06 - RenderComponent "before each" hook:
Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at renderName (src/es6/06-RenderComponent.js:18:7)
at Context. (test/es6/06-RenderComponent.js:6:5)

Create test-helpers for all tests

Some words should not be wasted

https://news.ycombinator.com/item?id=9799103

Error While running npm run test

Upon completing the First Exercise npm run test is giving such error:

made the change: Hello World

npm run test 

> [email protected] test
> npm run compile && mocha -b --compilers js:babel/register --require test/helpers.js test/**/*.js || echo


> [email protected] compile
> babel exercises --out-dir src

exercises/01-HelloWorld.jsx -> src/01-HelloWorld.js
exercises/02-PartiesList.jsx -> src/02-PartiesList.js
exercises/03-WhatsYourName.jsx -> src/03-WhatsYourName.js
exercises/04-Quiz.jsx -> src/04-Quiz.js
exercises/05-Challenge-GroceryList-part-1.jsx -> src/05-Challenge-GroceryList-part-1.js
exercises/05-Challenge-GroceryList-part-2.jsx -> src/05-Challenge-GroceryList-part-2.js
exercises/05-Challenge-GroceryList-part-3.jsx -> src/05-Challenge-GroceryList-part-3.js
exercises/05-Challenge-GroceryList-part-4.jsx -> src/05-Challenge-GroceryList-part-4.js
exercises/06-RenderComponent.jsx -> src/06-RenderComponent.js
exercises/07-LifecycleMethods.js.jsx -> src/07-LifecycleMethods.js.js
exercises/main.jsx -> src/main.js
/Users/meetverma/Documents/contributions/reactjs_koans/test/helpers.js:10
global.navigator = { userAgent: "Node.JS" };
                 ^

TypeError: Cannot set property navigator of #<Object> which has only a getter
    at Object.<anonymous> (/Users/meetverma/Documents/contributions/reactjs_koans/test/helpers.js:8:17)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at normalLoader (/Users/meetverma/Documents/contributions/reactjs_koans/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.<computed> [as .js] (/Users/meetverma/Documents/contributions/reactjs_koans/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1234:19)
    at require (node:internal/modules/helpers:176:18)
    at /Users/meetverma/Documents/contributions/reactjs_koans/node_modules/mocha/bin/_mocha:311:3
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (/Users/meetverma/Documents/contributions/reactjs_koans/node_modules/mocha/bin/_mocha:310:10)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
    at node:internal/main/run_main_module:28:49

Node.js v21.5.0

Using the console to look at props and event.target

In the exercises, you mention using console to look at different special variables such as this.props and event.target, however when I try to do it, it comes up with "undefined" or something similar. Is there any way you could give a more in depth explanation of this process?

What I tried to do was going to the inspect screen in both chrome and firefox, clicking over to the 'Console' tab, then either typing in console.log(event.target) or just typing in event.target. Again, neither of these come up with any information, just 'undefined' or something similarly nondescript.

P.S.
Thank you very much for making this, it took me a week to find a tutorial that works for me. And this one really works for me!

npm run watch crashes - illegal hardware instruction

➜  exercises git:(master) ✗ npm run watch

> [email protected] watch /path/to/reactjs_koans
> onchange exercises/*.jsx -- npm run test



#
# Fatal error in ../deps/v8/src/api.cc, line 1244
# Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().
#
[1]    49945 illegal hardware instruction  npm run watch

npm version - 5.6.0

CSS for the Tabs are overlaid in Chrome & Firefox (fix in attached pull request)

Tabs cease to be tab-like in FF and Chrome:
1.) In constrained widths, which are common when debugging, content runs into tabs
2.) FF adds bullets to left of tabs

Minor css fixes to patch this are added to the pull request here:
#34

Test #03, throwing error Invariant Violation: dangerouslyRenderMarkup(...):

This is the error I am getting:

03 - What's Your Name? should complete all tasks Task #1 - greet user Should change name in      paragraph on name change in input:
Error: Invariant Violation: dangerouslyRenderMarkup(...): 
Cannot render markup in a worker     thread. Make sure `window` and `document` are available globally before requiring React when unit     testing or use React.renderToString for server rendering.
      at Context.<anonymous> (test/es6/03-WhatsYourName.js:35:41)

And this is my test code:

var test = (<div>
<p>Hey there. Enter your name.</p>
 <input type="text" name="name" onChange={this.onNameChange} />
    </div>);
    if(this.state.name.length === 0)
      return test;
    else{
      return (
        <div>
          <p>Hello {this.state.name}</p>
          <input type="text" name="name" onChange={this.onNameChange} />
        </div>
      );
    }

I couldn't figure out how to solve the error. From what I could tell, my program worked. I did a some Googling, and it might be because of the way you are requiring the packages, but I am not sure.

Test 1 fails on completion of task.

npm run test:

01 - HelloWorld should complete all tasks:

  AssertionError [ERR_ASSERTION]: Your React component shouldn't render any `div` HTML elements
  + expected - actual

  -false
  +true
  
  at Context.<anonymous> (test/01-HelloWorld.js:20:12)

Only change made to the boilerplate is
Hello World

Exercise # 3 doesn't pass

Exercise # 3 works fine on localhost:8080. When I click on the 'WhatsYourName' tab I get the message "Hey there. Enter your name." with an empty form field beneath that. And when I enter something in the form then the initial message goes away and the new input shows up. I gather that's the expected outcome.

But it doesn't pass the test. I get the following on my terminal -

03 - What's Your Name?
    should complete all tasks
      Task #1 - greet user
        1) Should change name in paragraph on name change in input


  3 passing (64ms)
  1 failing

  1) 03 - What's Your Name? should complete all tasks Task #1 - greet user Should change name in paragraph on name change in input:

      AssertionError: After changing name in input, I should see the change in `p` element's content. In other words: `this.state.name` should change.
      + expected - actual

      -false
      +true

      at Context.<anonymous> (test/03-WhatsYourName.js:36:16)

Here is my code -

var React = require("react");

// Let's get to the most important feature of React.js - reactive state.
//
// Each React component contains 2 important hashes:
// * Properties - we pass these values when we create a component. They don't
//                change during the component's lifecycle.
// * State      - these values can change over entire life of the component.
//                When you change some value in `state` object, React will
//                re-calculate the `render` method and update the HTML to match
//                the new state (in this case, updating the class).
//
// You can pass properties to components using JSX attributes. You did it in
// the last exercise! See the example below.
//
// ```
// <div className="example-class" attr1="ugabuga">[...]</div>
// ```
//
// We created `React.DOM.div` component with properties:
// `{className: "example-class", attr1: "ugabuga"}`
//
// You have two tasks to complete in this exercise:
// Task #1: Someone left broken code in the `onNameChange` method. It is always triggered
//          after changing the value of `name` input. This method takes
//          event as its only argument. You need to retrieve the input value from
//          that object and update the `name` field in the `state` object.
// Warning: Do not try to change the `render` structure.
//
// Task #2: If there is no name given, we should display a message encouraging
//          the user to insert their name.
//          Display text: "Hey there. Enter your name." if name.length is 0.
//
//          Hint: Use temporary variables to achieve the goal. See the example below.
//          ```
//          render() {
//            var numberToDisplay;
//            if (this.state.number > 9000) {
//              numberToDisplay = "IT'S OVER 9000!";
//            } else {
//              numberToDisplay = this.state.number;
//            }
//            return(
//              <span>{numberToDisplay}</span>
//            )
//          ```
//
// Further reading on task #2: https://facebook.github.io/react/tips/if-else-in-JSX.html

class WhatsYourName extends React.Component {
  // By default `this.state` is `null`. In `render` we are referring to
  // a specific element from the `state` object - `this.state.name`.
  // If we don't set an initial state, we will get an error. It's impossible to fetch
  // an object key from `null`.
  //
  // Think about it: you can set name from a cookie on component initialization!
  //                 What else could you do here?

  constructor(props) {
    // Properties object is called `props`. You can access it with `this.props`.
    // We won't use it in this exercise.
    super(props);
    this.state = { name: "" };

    // Warning! If we don't bind this method - we would not be able to update state.
    this.onNameChange = this.onNameChange.bind(this);
  }

  // `event` is the only argument passed to that method. It will be an event
  // object thrown by React on actions like `click`, `change` etc.
  //
  // You need to correct the call of `setState` method. Just try to set
  // the `name` field to the value passed in event.
  //
  // Hint: use `console.log` to check `event.target`. You will find text
  //       entered to the input there.
  onNameChange(event) {
    // Huh... There's something wrong here...
    this.setState({name: event.target.value});

  }

  render() {
    **var nameToDisplay;
    if (this.state.name.length == 0) {
      nameToDisplay = "Hey there. Enter your name.";
    } else {
      nameToDisplay = this.state.name;
    }
    return (
      <div>
        <p>{nameToDisplay}</p>
        <input type="text" name="name" onChange={this.onNameChange} />
      </div>**
    );
  }
}

// Notice some details here:
//   1. `onChange` attribute isn't placed between `" "`, but `{ }` - we want to
//      reference function, not string.
//   2. You must be very careful on methods binding. You can do it in the constructor.
//   3. `state` object is `null` by default! If you want to display initial
//       value from state object, you should initialize state object.

// ProTip: Always specify input's `name` attribute: React uses it to identify
//         inputs on page. Not doing so may cause you to waste a long time
//         debugging your program.

export default WhatsYourName;

On OS X you need to hit return key to return to prompt after running `npm run test-es6`

Exercise 03: Why must 'name' be explicitly used? (Spoilers)

Exercise 03, task 1.

In the onNameChange(event) function you take an event and is supposed to use that event to update the state.

The working solutions, for the tests, is to explicitly name the key, ie: this.setState({name: event.target.value});

But, if you want to be more general, and you don't want to explicitly say that it's the "name" attribute that should always be updated, you can do this:

onNameChange(event){
   let obj = {};
   obj[event.target.name] = event.target.value;
   this.setState(obj);
}

Which works great in the browser, but fails in the tests.

Is there a specific reason for this that I'm missing?

Trouble with #05 - Part 1: GroceriesListItem should display a grocery name

My code

var React = require("react");

// This exercise is a bit bigger than the previous ones.
// We will make a reactive grocery list.
//
// Task: Fill the `return` of `GroceryList` render method. It should return
//       a list of `GroceryListItem`. You need to display the groceries names
//       using `this.props` in `GroceryListItem`. We already prepared the variable
//       `groceriesComponents` inside `render` method` containing list of these items for you.

class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [ { name: "Apples" } ]
    };
  }

  render() {
    let groceriesComponents = [];
    // Properties are a way to pass parameters to your React components.
    // We mentioned this in the third exercise. Properties are to React
    // components what attributes are to HTML elements.
    //
    // Below you can see how to pass properties to child components.
    // We have defined a `grocery` property for each `GroceryListItem`.
    for(var index = 0; index < this.state.groceries.length; index++) {
      groceriesComponents.push(
          <GroceryListItem grocery={this.state.groceries[index]} key={index} />
      );
    }

    // Hint: Don't forget about putting items into `ul`
    return (
      <ul>
        {groceriesComponents}
      </ul>
    );
  }
}

// Render grocery name from component's properties.
// If you have problem check `this.props` in the console.
class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <li>{this.props.grocery}</li>
    );
  }
}

export default GroceryList;

I'm pretty sure the issue is due to an extra  being inside the <li> like:

<li data-reactid=".3.$0">
    <span data-reactid=".3.$0.$name:0">Apples</span>
</li>

but I'm not sure how to fix it. Any help would be much appreciated.

nom issues while trying to install

✘ freak4pc@ShaiBookPro ⮀ ~/Work/Libs/reactjs_koans ⮀ ⭠ master ⮀ npm run setup

> [email protected] setup /Users/freak4pc/Work/Libs/reactjs_koans
> npm install && ncp koans/ exercises/

npm ERR! fetch failed https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz
npm WARN retry will retry, error on last attempt: Error: SSL Error: https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz does not support SSL
npm ERR! fetch failed https://registry.npmjs.org/express/-/express-4.12.4.tgz
npm WARN retry will retry, error on last attempt: Error: SSL Error: https://registry.npmjs.org/express/-/express-4.12.4.tgz does not support SSL
npm ERR! fetch failed https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz
npm WARN retry will retry, error on last attempt: Error: SSL Error: https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz does not support SSL
npm ERR! fetch failed https://registry.npmjs.org/express/-/express-4.12.4.tgz
npm WARN retry will retry, error on last attempt: Error: SSL Error: https://registry.npmjs.org/express/-/express-4.12.4.tgz does not support SSL
npm ERR! fetch failed https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz
npm ERR! fetch failed https://registry.npmjs.org/express/-/express-4.12.4.tgz
npm ERR! Darwin 14.3.0
npm ERR! argv "/Users/freak4pc/.nvm/versions/io.js/v2.2.0/bin/iojs" "/Users/freak4pc/.nvm/versions/io.js/v2.2.0/bin/npm" "install"
npm ERR! node v2.2.0
npm ERR! npm  v2.11.0
npm ERR! code ESSL

npm ERR! SSL Error: https://registry.npmjs.org/mocha-traceur does not support SSL
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/freak4pc/Work/Libs/reactjs_koans/npm-debug.log

npm ERR! Darwin 14.3.0
npm ERR! argv "/Users/freak4pc/.nvm/versions/io.js/v2.2.0/bin/iojs" "/Users/freak4pc/.nvm/versions/io.js/v2.2.0/bin/npm" "run" "setup"
npm ERR! node v2.2.0
npm ERR! npm  v2.11.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] setup: `npm install && ncp koans/ exercises/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] setup script 'npm install && ncp koans/ exercises/'.
npm ERR! This is most likely a problem with the reactjs_koans package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm install && ncp koans/ exercises/
npm ERR! You can get their info via:
npm ERR!     npm owner ls reactjs_koans
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/freak4pc/Work/Libs/reactjs_koans/npm-debug.log

Failure while running npm run setup

This is the error I'm getting.

npm ERR! not ok code 0
npm ERR! weird error 3
npm WARN This failure might be due to the use of legacy binary "node"

I tried symlink solution and installing nodejs-legacy package from here: http://stackoverflow.com/questions/21168141/can-not-install-packages-using-node-package-manager-in-ubuntu

But still getting the same issue.

Spoilers -- Answer Key

I like the idea behind ReactJS Koans but the wording of some of the questions left me scratching my head and the tests don't exactly ensure correctness. It would have been nice to compare my answers with known correct ones.

So, FWIW, here are the answers I came up with.

Happy to convert this into a pull request if desired.

diff --git a/koans/es6/01-HelloWorld.jsx b/koans/es6/01-HelloWorld.jsx
index 1590b81..9634709 100644
--- a/koans/es6/01-HelloWorld.jsx
+++ b/koans/es6/01-HelloWorld.jsx
@@ -23,7 +23,7 @@ class HelloWorld extends React.Component {

   render() {
     return (
-        <div>FILL ME IN!</div>
+        <span>Hello World</span>
     );
   }
 }
diff --git a/koans/es6/02-PartiesList.jsx b/koans/es6/02-PartiesList.jsx
index 7eb9329..391d12d 100644
--- a/koans/es6/02-PartiesList.jsx
+++ b/koans/es6/02-PartiesList.jsx
@@ -11,8 +11,9 @@ class PartiesList extends React.Component {
   // Doesn't this code look familiar to you?
   render() {
     return (
-      <ul className="FILL ME">
+      <ul className="parties-list">
         <li>Party at Aperture Laboratories</li>
+        <li>Party at Lawrence Livermore Laboratories</li>
       </ul>
     );
   }
diff --git a/koans/es6/03-WhatsYourName.jsx b/koans/es6/03-WhatsYourName.jsx
index af7cef2..cf2e435 100644
--- a/koans/es6/03-WhatsYourName.jsx
+++ b/koans/es6/03-WhatsYourName.jsx
@@ -75,14 +75,15 @@ class WhatsYourName extends React.Component {
   // Hint: use `console.log` to check `event.target`. You will find text
   //       entered to the input there.
   onNameChange(event) {
-    // Huh... There's something wrong here...
-    this.setState({bad_attribute: "ChangeME!"});
+    this.setState({name: event.target.value});
   }

   render() {
+    var howdy = "Hello " + this.state.name;
+    if(this.state.name.length <= 0) howdy = "Hey there. Enter your name."
     return (
       <div>
-        <p>Hello {this.state.name}</p>
+        <p>{howdy}</p>
         <input type="text" name="name" onChange={this.onNameChange} />
       </div>
     );
diff --git a/koans/es6/04-Quiz.jsx b/koans/es6/04-Quiz.jsx
index 5c8efb5..c622b32 100644
--- a/koans/es6/04-Quiz.jsx
+++ b/koans/es6/04-Quiz.jsx
@@ -3,32 +3,32 @@
 var Answers = {
   // Question #1: What is the name of the class that we extend to create components class?
   // Tip: See any of the exercises
-  answer1: "Enter your answer here",
+  answer1: "React.Component",

   // Question #2: JSX is converted directly into JavaScript. True or false?
   // Tip: See the first exercise.
-  answer2: null, // true/false?
+  answer2: true, // true/false?

   // Question #3: What's the name of the method that must be defined in every component?
-  answer3: "FILL ME IN",
+  answer3: "render",

   // Question #4: If I want to set `div` component's HTML class, what attribute
   //              should I declare in JSX?
   // Tip: See exercise #2.
-  answer4: "class",
+  answer4: "className",

   // Question #5: A component's properties can be changed after its initialization. True or false?
   // Tip: See exercise #3
-  answer5: null, // true/false?
+  answer5: false, // true/false?

   // Question #6: What's the name of the method for changing the component's state?
   // Tip: See exercise #3
-  answer6: 'stateSet',
+  answer6: 'setState',

   // Question #7: You must bind a component's methods (except `render`)
   //              to make it possible to change the state. True or false?
   // Tip: See exercise #3
-  answer7: null // true/false?
+  answer7: true // true/false?
 };

 export default Answers;
diff --git a/koans/es6/05-Challenge-GroceryList-part-1.jsx b/koans/es6/05-Challenge-GroceryList-part-1.jsx
index 137ac7a..98ff6a9 100644
--- a/koans/es6/05-Challenge-GroceryList-part-1.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-1.jsx
@@ -35,7 +35,7 @@ class GroceryList extends React.Component {
     // Hint: Don't forget about putting items into `ul`
     return (
       <div>
-        // Put your code here
+        <ul>{groceriesComponents}</ul>
       </div>
     );
   }
@@ -50,9 +50,7 @@ class GroceryListItem extends React.Component {

   render() {
     return (
-        <li>
-          // Put your code here.
-        </li>
+        <li>{this.props.grocery.name}</li>
     );
   }
 }
diff --git a/koans/es6/05-Challenge-GroceryList-part-2.jsx b/koans/es6/05-Challenge-GroceryList-part-2.jsx
index 448ce8f..ed065f7 100644
--- a/koans/es6/05-Challenge-GroceryList-part-2.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-2.jsx
@@ -42,8 +42,12 @@ class GroceryList extends React.Component {
   // Hint #1: You should use the `concat` function to modify groceries list.
   // Hint #2: Remember about the case where input is empty.
   // Hint #3: Name of the new grocery item will be stored in `this.state.newGroceryName`.
-  addGroceryItem() {
-    // Put your code here
+  addGroceryItem(event) {
+    debugger
+    if(this.state.newGroceryName.length > 0) {
+      let groceries = this.state.groceries.concat({name: this.state.newGroceryName})
+      this.setState({groceries: groceries})
+    }
   }

   render() {
@@ -62,13 +66,15 @@ class GroceryList extends React.Component {
     // Here are components for task #2.
     newProductInput = <input className='new-item' type="text" onChange={this.inputChanged}/>;
     // Something is missing here... Will anything happen if you click this button now?
-    newProductAddButton = <button className='add-product'>Add new Product</button>;
+    newProductAddButton = <button className='add-product' onClick={this.addGroceryItem}>Add new Product</button>;

     return (
       <div>
         <ul>
           {groceriesComponents}
         </ul>
+        {newProductInput}
+        {newProductAddButton}
       </div>
     );
   }
diff --git a/koans/es6/05-Challenge-GroceryList-part-3.jsx b/koans/es6/05-Challenge-GroceryList-part-3.jsx
index 50c4ac0..edf265b 100644
--- a/koans/es6/05-Challenge-GroceryList-part-3.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-3.jsx
@@ -44,7 +44,7 @@ class GroceryList extends React.Component {
   // Fill the definition of the following method to allow clearing the list
   // Hint: You can just simply set the groceries to an empty array.
   clearList() {
-    // Put your code here
+    this.setState({groceries: []})
   }

   render() {
@@ -72,6 +72,7 @@ class GroceryList extends React.Component {
         </ul>
         {newProductInput}
         {newProductAddButton}
+        {clearListButton}
       </div>
     );
   }
diff --git a/koans/es6/05-Challenge-GroceryList-part-4.jsx b/koans/es6/05-Challenge-GroceryList-part-4.jsx
index 6b0b062..f241022 100644
--- a/koans/es6/05-Challenge-GroceryList-part-4.jsx
+++ b/koans/es6/05-Challenge-GroceryList-part-4.jsx
@@ -75,7 +75,10 @@ class GroceryList extends React.Component {
   // Fill the definition of the following method to allow completing each item
   // Hint 1: Pay attention to the element's index on the list.
   toggleGroceryCompleteness(groceryIndex) {
-    // Put your code here
+    var newState = React.addons.update(this.state, {
+      groceries: { [groceryIndex]: {completed: {$set: true}}}
+    });
+    this.setState(newState)
   }

   render() {
diff --git a/koans/es6/06-RenderComponent.jsx b/koans/es6/06-RenderComponent.jsx
index 98d7e06..5accba6 100644
--- a/koans/es6/06-RenderComponent.jsx
+++ b/koans/es6/06-RenderComponent.jsx
@@ -14,7 +14,8 @@ class Name extends React.Component {

 // See you got a domNode passed as a `domNode` argument.
 function renderNameComponent(domNode) {
-  // Put your code here
+  let element = React.createElement(Name);
+  React.render(element, domNode);
 }

 // Hint: You have to use the `React.render(ReactElement element, DOMNode node)` method.
diff --git a/koans/es6/07-LifecycleMethods.js.jsx b/koans/es6/07-LifecycleMethods.js.jsx
index 18c96e2..6b5e2ee 100644
--- a/koans/es6/07-LifecycleMethods.js.jsx
+++ b/koans/es6/07-LifecycleMethods.js.jsx
@@ -56,6 +56,7 @@ class LifecycleMethodsComponent extends React.Component {
     // Task 1: Display a message "I'm mounted!" in developer's console when the
     //         component finishes mounting.
     //         Use `console.log` function for it.
+    console.log("I'm mounted!");   // these tasks are absurd
   }

   componentDidUpdate(prevProps, prevState) {
@@ -66,6 +67,7 @@ class LifecycleMethodsComponent extends React.Component {
     //         to previous values of properties and state.
     //         Think about it: Could you find a possible use case
     //                         for using previous state and properties values?
+    console.log('Updated!')
   }

   componentWillUnmount() {
@@ -77,6 +79,7 @@ class LifecycleMethodsComponent extends React.Component {
     //         you are listening for events. Your event listeners use setState
     //         directly. What will happen if you unmount the component?
     //         How can this lifecycle method help you to avoid such problems?
+    console.log("Goodbye, cruel world! :(");
   }

   render() {

is webpack listening on 2 ports? 8080 and 9090

I'm getting this error in chrome console when running npm run start:

GET http://localhost:9090/build/app.js net::ERR_CONNECTION_REFUSED

The ui displays but none of my edits to the koan exercises update however the tests register my changes.

missing build/app.js

I tried running the koan files in the browser and get an error that says the /build/app.js file cannot be found.

Where is it? Am I missing something?

OSX: Can't launch server & tests return nothing

Everything I did - is that I changed text "

FILL ME IN!

" to "Hello world" in first example.

Oh, and now I upgraded node from 0.10.32 to 0.12.2_1 and I now get this even with untouched examples:
https://gist.github.com/inem/a037c7616d8044527ab3

Why it happens all the time I try do something with node??!!

webpack requires node-libs-browser peer

npm WARN EPEERINVALID [email protected] requires a peer of node-libs-browser@>= 0.4.0 <=0.6.0 but none was installed.

The setup doesn't appear to be working from a windows environment

Comment from Hacker News: https://news.ycombinator.com/item?id=9799539

Full description:

The setup doesn't appear to be working from a windows/mingw32 environment. (Most npm installers do work in this environment.)

#03　(expected ， actual)　 looks like the same,why?

error:

03 - What's Your Name? should complete all tasks Task #2 - don't greet user if name wasn't provided Should display welcoming message if user didn't provide their name:

  AssertionError: If user didn't enter the name (`this.state.name` length is 0), show "Hey there. Enter your name.". See the hint in task's description.
  + expected - actual

  -Hey there. Enter your name
  +Hey there. Enter your name.

looks like the same;why ?
my code ：
render() { var howdy = "Hello " + this.state.name; if(this.state.name.length<=0) howdy ='Hey there. Enter your name';


return (
  <div>
    <p>{howdy}</p>
    <input type="text" name="name" onChange={this.onNameChange} />
  </div>
);

}

Running test ends with no feedback output

When I run npm run test, nothing is output before the command finishes besides the command being issued. As a side note-in the browser, I am able to see my changes correctly.

Simpler solution for Grocery Challenge Part 4?

You say:

  // Fill the definition of the following method to allow completing each item
  // Hint 1: Pay attention to the element's index on the list.

This is what I came up with:

  toggleGroceryCompleteness(groceryIndex) {
    var newState = React.addons.update(this.state, {
      groceries: {[groceryIndex]: {completed: {$set: true}}}
    });
    this.setState(newState)
  }

But this seems odd because you never told us about React.addons.update.

Is there a simpler solution that I'm overlooking? Thanks!

Tests throw error, module not found.

Path to source files is wrong. For instance we have

import HelloWorld from '../src/01-HelloWorld.js';

and it should be

import HelloWorld from '../koans/01-HelloWorld.jsx';

I'll submit pull request in a second.

setup didn't work os x (please help)

npm run setup gave out errors copy and paste my ~/reactjs_koans/npm-debug.log file here

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/4.1.1/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'setup' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'presetup', 'setup', 'postsetup' ]
5 info presetup [email protected]
6 info setup [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec setup script
9 verbose stack Error: [email protected] setup: `npm install && ncp koans/ exercises/`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:214:16)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at EventEmitter.emit (events.js:172:7)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at ChildProcess.emit (events.js:172:7)
9 verbose stack     at maybeClose (internal/child_process.js:817:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/ugp/code/reactjs_koans
12 error Darwin 14.5.0
13 error argv "/usr/local/Cellar/node/4.1.1/bin/node" "/usr/local/bin/npm" "run" "setup"
14 error node v4.1.1
15 error npm  v2.13.1
16 error code ELIFECYCLE
17 error [email protected] setup: `npm install && ncp koans/ exercises/`
17 error Exit status 1
18 error Failed at the [email protected] setup script 'npm install && ncp koans/ exercises/'.
18 error This is most likely a problem with the reactjs_koans package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     npm install && ncp koans/ exercises/
18 error You can get their info via:
18 error     npm owner ls reactjs_koans
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]