workshopper / learnyoureact

Let's learn React.js and server side rendering!

learnyoureact

Let's learn React.js and server side rendering!

USAGE

$ (sudo) npm i -g learnyoureact

$ learnyoureact

License

MIT

learnyoureact's Issues

Cannot find module 'regenerator/runtime'

I keep getting this error when I try to run the 1st lesson.

Here is the full error:
Error: Cannot find module 'regenerator/runtime' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (module.js:278:25) at Module.require (module.js:365:17) at require (module.js:384:17) at Object.<anonymous> (/Users/tylerrice/Desktop/learnyoureact/node_modules/express-react-views/node_modules/babel/node_modules/babel-core/lib/polyfill.js:5:1) at Module._compile (module.js:460:26) at Object.require.extensions.(anonymous function) [as .js] (/Users/tylerrice/Desktop/learnyoureact/node_modules/node-jsx/index.js:29:12) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Module.require (module.js:365:17) at require (module.js:384:17)

Change to use `babelify`

#68

When I do this, the isomorphic chapter's error cannot erased.
It seems that reactify causes the error.
I will have to change reactify to babelify.

Error in challenge statement (PropTypes)

Modify TodoList in index.jsx like below.

Before you start, you may want to check your current index.jsx into source control, or create a new index.jsx for this exercise.

import React from 'react';

export default class TodoBox extends React.Component {
// Omitted
}

class TodoList extends React.Component {
// Omitted
}

The exercises asks us to modify TodoList as shown.
But no modifications are being made to TodoList.

Exercise 5 not properly checking solution or working

The handleChange function is never called, even when the whole task verifies.

This is probably due to the way that the tutorials server is set up. After putting the code into a single page like the react tutorial suggests the event actually fires.

Add some chapters of Flux(redux)

npm learnyoureact issue

Hi,

I have node version 0.12.7 and npm version 2.11.3 installed in my machine, but after that if I install learnyoureact using the command npm install -g learnyoureact . I see an error which says learnyoureact not found in npm registry.

Can you tell me how to fix it.

Thanks

Getting Babel 100KB error

Everything was going great until the Isomorphic example. Now the page never full loads (initial loads but status icon keeps spinning), doesn't do anything when clicking, and after page load the console keeps spitting out errors like the following:

[BABEL] Note: The code generator has deoptimised the styling of "C:/node/react/n
ode_modules/babel-preset-react/node_modules/babel-plugin-transform-react-jsx/nod
e_modules/babel-helper-builder-react-jsx/node_modules/babel-types/node_modules/b
abel-traverse/node_modules/babylon/index.js" as it exceeds the max of "100KB".

Moreover, it doesn't seem to actually be doing anything with app.js. I can replace it with a blank file, replace it with gibberish that should error, or replace it with console logs and nothing different ever happens. However it is at least attempting to load it, because if I change the path or filename it immediately errors.

In order to double check myself I have tried using the bundled solutions (all files) for Isomorphic, CSS2, and Event and all do the same thing. Even though it isn't actually working, I can run the verify and it will pass. I've tried in Chrome, FF, and IE.

Thanks for any help

learnyoureact v0.11.1
node v4.2.3
npm v2.14.7
react v1.0.0

Update hello_react/problem.md to more kinder

Now, It's a liitle difficult to understand where to npm install and make program.js for Node.js beginner.

exercise 4 problem statement missing information

Problem expects

<Todo title="Learn React">15:00</Todo>

But instructions say to add

<Todo>15:00</Todo>

Translate to English

1. Make problem.en.md in each problem directories.
2. Translate Japanese to English.

Change Japanese explanatory texts simplify

Now, explanatory texts are too difficult to understand.

version not found: [email protected] in Exercise 8

In Exercise 8, when I was trying to install the npm packages babelify, babel-preset-react and babel-preset-es2015, it returns "version not found: [email protected]". Is it possible to replace these packages use other packages?

Error: Cannot find module 'minimist'

Installed with sudo npm i -g learnyoureact but when I try to run it with learnyoureact, getting this error:

Error: Cannot find module 'minimist'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/learnyoureact/node_modules/workshopper-adventure/adventure.js:1:84)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)

node v5.0.0
npm v3.3.6

Callbacks that are supposed to run for an onChange do not run

When I run my program in terminal (ex: node program.js 3000 Milk 13:00) in the exercises:

State
CSS2
Event

I direct my browser to localhost:3000, everything is initially rendered fine. However, when I do something like click on the check boxes or the "Add" button in Event, nothing happens to the any of the elements they are supposed to change the state of (i.e. checking the box does not strike through the letters). The check boxes still get a check and the buttons still highlight when you press them, but that is it.

I wrote code that passed the exercises. I even copied and pasted the solutions from the module's repository into my program, ran it again, and got the same result.

When I click on the button, the table does not get updated with the new information. I tried adding a console.log(1) in the functions that are supposed to update the DOM state, and the console does not print anything when I click on the forms. It seems like onChange does not do anything.

Update React to v0.14

Is server side source should be changed to ES6?

Error on run/verify when server starts slowly

When I run/verify program.js and my server starts slowly, I get the following error.

✗ Error connecting to http://localhost:14880: ECONNREFUSED
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: connect ECONNREFUSED
    at exports._errnoException (util.js:746:11)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:983:19)

It seems that exercise programs wait only 1 second. It can be problematic on low-spec machines.

Use ES2015 and Babel

Loading bundle.js is too slow?

Hello,

Loading bundle.js is too slow. How can we fix it?

Thanks!

Not working with babbel 6.5

Hello :)
I'd tried to upgrade to the latest babbel 6.5.2

And first example not working anymore

SyntaxError: /Users/acherepanov/learnyoureact/views/index.jsx: Unexpected token (5:11)
  3 | export default class TodoBox extends React.Component{
  4 |   render() {
> 5 |     return <div className="todoBox">
    |            ^
  6 |         Hello, world!
  7 |       </div>
  8 |   }
    at Parser.pp.raise (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:1425:13)
    at Parser.pp.unexpected (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:2905:8)
    at Parser.pp.parseExprAtom (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:754:12)
    at Parser.pp.parseExprSubscripts (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:509:19)
    at Parser.pp.parseMaybeUnary (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:489:19)
    at Parser.pp.parseExprOps (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:420:19)
    at Parser.pp.parseMaybeConditional (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:402:19)
    at Parser.pp.parseMaybeAssign (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:365:19)
    at Parser.pp.parseExpression (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:329:19)
    at Parser.pp.parseReturnStatement (/Users/acherepanov/learnyoureact/node_modules/babylon/index.js:2106:26)
SyntaxError: /Users/acherepanov/learnyoureact/views/index.jsx: Unexpected token (5:11)

Dependencies:

├── [email protected]  extraneous
├── [email protected]  extraneous
├── [email protected]  extraneous
├── [email protected]  extraneous
├── [email protected]  extraneous
└── [email protected]  extraneous

i get this error after running program.js an the button doesnt add to the todolist

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

Error: Cannot find module '/home/jose/reactdos/isomorphic/solution/app.js' from '/home/jose/reactdos'
at /home/jose/reactdos/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
at load (/home/jose/reactdos/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/home/jose/reactdos/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /home/jose/reactdos/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)

using v0.11.1 - handleChange called with incorrect context

https://github.com/kohei-takata/learnyoureact/blob/master/exercises/state/solution/views/index.jsx#L45

When handleChange is invoked after selecting checkbox, this is undefined and so this.setState throws error 'cannot call setState on undefined'. However when I bind this to handleChange in the onChange attribute it works. Any thoughts on why I have to do this:

<input
  type="checkbox"
  checked={this.state.checked}
  onChange={this.handleChange.bind(this)}
/>

rest of my Todo component:

class Todo extends React.Component {
   constructor(props) {
     super(props);
     this.state = { checked: false };
   }

   handleChange(e) {
     debugger;
     this.setState({ checked: e.target.checked });
   }
}

How to verify problem 8?

I see the HTML outputted is the right answer but by running learnyoureact verify I get the following error:

Use mocha and do browser test when verifing

Now, we should open browser by hand and check by eyes whether the sources is correct when verifing.
After that, we run verify command.
In this issue, change to use mocha and do browser test automatically.
refs https://twitter.com/yodatomato/status/655323501977403392

Japanese and Korean update in hello_react

refs #82

• Japanese
• Korean

ECONNREFUSED error occured

refs #22 (comment)
Can I fix by this code?
https://gist.github.com/martinheidegger/a7cf754d91f847c29965
I will try.

Solution servers survive when submitted server doesn't start/respond

Related to #22

After enjoying this great workshop, I noticed that solution servers are still alive.

$ ps ax | grep node
  154   ??  S      0:00.76 /Users/shuhei/.nvm/versions/node/v0.12.0/bin/node /Users/shuhei/.nvm/versions/node/v0.12.0/lib/node_modules/learnyoureact/exercises/props_from_server/solution/solution.js 51137 Bread 14:00
  165   ??  S      0:00.74 /Users/shuhei/.nvm/versions/node/v0.12.0/bin/node /Users/shuhei/.nvm/versions/node/v0.12.0/lib/node_modules/learnyoureact/exercises/props_from_server/solution/solution.js 45928 Milk 13:00
  174   ??  S      0:00.70 /Users/shuhei/.nvm/versions/node/v0.12.0/bin/node /Users/shuhei/.nvm/versions/node/v0.12.0/lib/node_modules/learnyoureact/exercises/props_from_server/solution/solution.js 46569 Car 15:00
...

It seems like solution server survives when the command doesn't connect to submitted server. You can reproduce the phenomenon with the following steps:

1. Create an empty program.js
2. learnyoureact and choose an exercise.
3. learnyoureact verify program.js
4. ps ax | grep node

I'm still not sure if this is an issue of this repo or workshopper modules though.

Refactor JSX out of Components lesson

The 2nd lesson, on components, teaches both JSX and components at the same time. Some people may have difficulty understanding, or may think that they are the same thing. It may be worth separating JSX into its own lesson so that it's clear what benefit it provides.

Personally I'd like to see the Components lesson rewritten to use old-school JavaScript DOM manipulation, and then a new JSX lesson added next that re-does the Components lesson with JSX.

Can't combine front-end and server-side rendering

I don't know how to use React.js event at front-end.
I want to add exercises of "Add text-decoration: line-through style to Todo if the Todo is checked" or "Delete Todos" or "Add Todos" by using front-end events.
Should I use browserify or reactify or etc?
If you know, please tell me how.
PR is welcome.

---

現在、このワークショッパーではサーバサイドレンダリングを行っていますが、これをフロントのイベントと組み合わせたいと思っています。
しかし、考えうる方法で試してみたのですが、うまくいきません。。。
具体的には、フロントのイベントを使用して、「Todoがチェックされた際にスタイルとして text-decoration: line-through を付ける」や「Todoを削除する」や「Todoを追加する」といったエクササイズを追加したいと思っています。
browserify や reactify を使う必要があるのでしょうか？
ご存知の方がいらっしゃったら、教えていただきたいです。
PRも歓迎です。

Change md files of Japanese and Korean

We have to change md files like #30 .

• hello_react/problem.md
• hello_react/problem.ko.md
• components/problem.md
• components/problem.ko.md
• proptypes/problem.md
• proptypes/problem.ko.md
• css/problem.md
• css/problem.ko.md
• state/problem.md
• state/problem.ko.md

Use npm init

Use npm init instead of using npm install.

Exercise 5 Sample Code Contains Solution

I copy-pasted the code from exercise 5 and the task verified right away. The handleChange function and the initial state of the component were already completed in the sample code.

Solution not working for state and mutable values exercise

I wrote the handleChange() function and used the setState() function inside it. But when I am running verify, it is not passing the test case.

In particular, I am getting this:

1.  ACTUAL:    "<!DOCTYPE html><div class=\"todoBox\"><h1>Todos</h1><div class=\"todoList\"><table style=\"border:2px solid black;\"><tbody><tr><td style=\"border:1px solid black;\"><input type=\"checkbox\"/></td><td style=\"border:1px solid black;\">Shopping</td><td style=\"border:1px solid black;\">Milk</td></tr><tr><td style=\"border:1px solid black;\"><input type=\"checkbox\"/></td><td style=\"border:1px solid black;\">Hair cut</td><td style=\"border:1px solid black;\">13:00</td></tr></tbody></table></div><div class=\"todoForm\">I am a TodoForm.</div></div>"
1.  EXPECTED:  "<!DOCTYPE html><div class=\"todoBox\"><h1>Todos</h1><div class=\"todoList\"><table style=\"border:2px solid black;\"><tbody><tr><td style=\"border:1px solid black;\"><input type=\"checkbox\"></td><td style=\"border:1px solid black;\">Shopping</td><td style=\"border:1px solid black;\">Milk</td></tr><tr><td style=\"border:1px solid black;\"><input type=\"checkbox\"></td><td style=\"border:1px solid black;\">Hair cut</td><td style=\"border:1px solid black;\">13:00</td></tr></tbody></table></div><div class=\"todoForm\">I am a TodoForm.</div></div>"

The > and /> after checkbox are different. I don't know what's going on.

I copy pasted the solution, but same issue. What am I doing wrong here? I have also posted on the gitter channel, but no one responded.

Sorry if this is a coding issue on my part, but I need to get a response fast!

Get error in Windows

nodeschool/discussions#1142

Error upon `learnyoureact`

Hi,

recently installed a copy of learnyoureact. Upon launching it via CLI, I got an unexpected error

learnyoureact/node_modules/workshopper-adventure/adventure.js:262
      return error(this.__('error.exercise.missing_file', {exerciseFile: meta.
                        ^
TypeError: undefined is not a function

Nothing seems to work. If I'm given a few pointers, I wouldn't mind helping out.

All the best,
obligated_user

Add new exercises

Add excercises

• isomorphic
• css2
• event(Add Todo)
• prop_and_state(Delete Todo)

Translation(English)

• isomorphic
• css2
• event(Add Todo)
• prop_and_state(Delete Todo)

Can't delete Todos.

現在、最後のエクササイズとして、Todoを削除するものを追加しようとしています。
こちらを参考に個々のTodoからTodoListにDeleteのイベントを委譲して実装しようとしています。

solutionのほうを作成してみたのですが、ブラウザで表示すると以下のようなエラーが表示され、Todoを削除することができません。

Uncaught TypeError: this.props.onDelete is not a function
React.createClass._onDelete @ bundle.js:101
executeDispatch @ bundle.js:3394
SimpleEventPlugin.executeDispatch @ bundle.js:16022
forEachEventDispatch @ bundle.js:3382
executeDispatchesInOrder @ bundle.js:3403
executeDispatchesAndRelease @ bundle.js:2772
forEachAccumulated @ bundle.js:17928
EventPluginHub.processEventQueue @ bundle.js:2979
runEventQueueInBatch @ bundle.js:11037
ReactEventEmitterMixin.handleTopLevel @ bundle.js:11063
handleTopLevelImpl @ bundle.js:11149
Mixin.perform @ bundle.js:16998
ReactDefaultBatchingStrategy.batchedUpdates @ bundle.js:9481
batchedUpdates @ bundle.js:15225
ReactEventListener.dispatchEvent @ bundle.js:11243

ソースはこちら

どなたか理由をご存知の方がいらっしゃいましたら、教えていただけないでしょうか。
PRも歓迎です。
よろしくお願いします。

Use ES6 and Babel

Problem CSS2, not good example using inline-style on tr

I don't recommend much this solution which is to switch inline-style 'text-decoration' on tag.
Some browsers didn't work well it before.

'text-decoration' should be used into td, li or p etc.

npm WARN deprecated [email protected]: react-tools is deprecated.

https://fb.me/react-tools-deprecated

Trouble running lesson 8 (supposedly Babel error)

Hi! My setup is node 4.4.4 and learnyoureact 0.11.6.

I have trouble running my project in browser starting with lesson 8. Code verifies successfully, but when I try to load page, I constantly get an error (both in 8 and 9 lessons):

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

TypeError: Cannot read property 'error' of undefined while parsing file: /Users/user/Developer/learnyoureact/app.js
    at OptionManager.mergeOptions (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:28)
    at OptionManager.addConfig (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:107:10)
    at OptionManager.findConfigs (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:168:35)
    at OptionManager.init (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:12)
    at compile (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:117:22)
    at normalLoader (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:14)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/user/Developer/learnyoureact/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

Looks like a Babel error, so I've tried to downgrade to babel 5.8.23 from 5.8.38 but to no avail.

Also, when I run npm list I get peer invalid messages:

├─┬ [email protected] peer invalid
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
└── [email protected] peer invalid

npm ERR! peer invalid: [email protected] /Users/user/Developer/learnyoureact/node_modules/react
npm ERR! peer invalid: [email protected] /Users/user/Developer/learnyoureact/node_modules/react-dom
npm ERR! extraneous: [email protected] /Users/user/Developer/learnyoureact/node_modules/browserify
npm ERR! extraneous: [email protected] /Users/user/Developer/learnyoureact/node_modules/babelify
npm ERR! extraneous: [email protected] /Users/user/Developer/learnyoureact/node_modules/babel-preset-react
npm ERR! extraneous: [email protected] /Users/user/Developer/learnyoureact/node_modules/babel-preset-es2015

Anyone saw something like this? What should I do?

Thanks!

Exercise 4 (propTypes) passes trivially

Exercise 4 says to expect a Warning in the console, but no warning shows by default. This clause is added:

Todo.propTypes = {
        title: React.PropTypes.string.isRequired
    };

but both the Todos already have titles.

One solution would be to add an invalid item in TodoBox

<Todo>5 km</Todo>

and add expected output, including a line like

<td style="border:1px solid black;">Run</td><td style="border:1px solid black;">5 km</td>

Exercise 7: Nothing to do!

similar to #91

Exercise 7 is simply a series of steps to get React set up to render on the client side. There is no student input of any kind.

What challenges can/should be added to the workshop?

Hey @tako-black

I really enjoyed going through the challenges so thank you!

I would like to go through again now and add more links to documentation and even add some more challenges about aspects of React that I am finding as a 'beginner' that would be beneficial to learn.

Do you have any thoughts on this? Are there any ideas you have had but maybe no time to implement.

Thought I'd ask first before just diving in and changing your workshop :)

Thanks.

exercise 1 error

hi,

I have used the eaxact solution for first exercise, but after i do node program.js and hit the url http://localhost:3000/, I get the follwing error can you tell me why its happening

attaching my code structure error too, let me know if I have done anything wrong

Exercise 5 Hint no longer compatible with ES2015

Exercise 5 on State asks students to

Write code to set the initial value of checked and define handleChange.
You can set the initial value of checked in a special getInitialState function.

However, with the ES2015 classes used in the code provided, getInitialState no longer works. Rather, students should be assigning bound instances in the constructor as suggested in this Quora answer: http://stackoverflow.com/questions/30720620/reactjs-w-ecmascript-6

I can change the problem description. Please let me know if a pull request is appreciated.

Isomorphic explanation is a little lacking

Hi Guys, great tutorials!

I am working my way through all of them.

Can you please review and revise the descriptions in ISOMORPHIC.
I am having trouble learning from it because some of the English is a little off.

Also, there are some huge changes to the app, yet they are hardly explained.

Thanks again!

-Russ

Why I run learnyoureact run program.js,but recive nothing?

As title,It's run well yesterday

`Props from server` error: map function cannot be applied to undefined.

I am getting this error on exercise 7:

`Props from server` error: map function cannot be applied to undefined.

I tried running your solution file, but I am still getting the error.
Maybe data is not being passed to the view ?
How can I test in jsx file that data has been passed correctly ?

Error Logs:

TypeError: Cannot read property 'map' of undefined
   at TodoList.render (/Users/yasksrivastava/learnyoureact/views/index.jsx:17:35)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactCompositeComponent.js:587:34)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactCompositeComponent.js:607:32)
   at [object Object].wrapper [as _renderValidatedComponent] (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactPerf.js:66:21)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactCompositeComponent.js:220:30)
   at [object Object].wrapper [as mountComponent] (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactPerf.js:66:21)
   at Object.ReactReconciler.mountComponent (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactReconciler.js:37:35)
   at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactMultiChild.js:241:44)
   at ReactDOMComponent.Mixin._createContentMarkup (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactDOMComponent.js:591:32)
   at ReactDOMComponent.Mixin.mountComponent (/Users/yasksrivastava/learnyoureact/node_modules/react/lib/ReactDOMComponent.js:479:29)

Thanks.

Can't name the directory react

In the first lesson it states:

First, create the directory where you will write your code.
(...)
You can change learnyoureact to any name you like.

You can't name it react otherwise you get this error:
npm ERR! Refusing to install react as a dependency of itself