Let's learn React.js and server side rendering!
$ (sudo) npm i -g learnyoureact
$ learnyoureact
MIT
Let's learn React.js and server side rendering!
License: MIT License
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.
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
Use npm init
instead of using npm install
.
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.
Now, It's a liitle difficult to understand where to npm install
and make program.js
for Node.js beginner.
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.
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.
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
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.
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?
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
.
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
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.
Add excercises
Translation(English)
refs #82
Hello,
Loading bundle.js is too slow. How can we fix it?
Thanks!
problem.en.md
in each problem directories.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 });
}
}
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.
Now, explanatory texts are too difficult to understand.
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.
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)
現在、最後のエクササイズとして、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も歓迎です。
よろしくお願いします。
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
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
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
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も歓迎です。
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 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.
We have to change md files like #30 .
Problem expects
<Todo title="Learn React">15:00</Todo>
But instructions say to add
<Todo>15:00</Todo>
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!
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
As title,It's run well yesterday
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:
program.js
learnyoureact
and choose an exercise.learnyoureact verify program.js
ps ax | grep node
I'm still not sure if this is an issue of this repo or workshopper modules though.
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 Todo
s 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>
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)
refs #22 (comment)
Can I fix by this code?
https://gist.github.com/martinheidegger/a7cf754d91f847c29965
I will try.
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.
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
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.