Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.
HackYourFuture - React
In this 5 week module we will learn React!
Planning
| Week | Topic | Read | In Class | Homework |
|---|---|---|---|---|
| 1. | React Components | JSX, Elements, Components and Props | W1 Lesson Plan | W1 Homework |
| 2. | State and Lifecycle | Lifecycle, Events, Conditional Rendering, List and Keys | W2 Lesson Plan | W2 Homework |
| 3. | Forms and Managing State | Forms, Manage State, Thinking in React | W3 Lesson Plan | W3 Homework |
| 4. | API Integration | Component Lifecycle and Fetch | W4 Lesson Plan | W4 Homework |
| 5. | Flux & MobX | MobX, Flux Concepts | W5 Lesson Plan | W5 Homework |
Read up before we get started
Watch this video from Facebook about why they started React:
Also be sure you're familiar with ES6-syntax. See this video about ES6 (the video is in Node, but the syntax for React is the same):
https://www.lynda.com/Node-js-tutorials/Switching-ES6-Node-js/546100-2.html
This is a handy reference of all features of ES6:
Please do not worry about understanding all. However, do make sure you understand the following, as we'll be using them a lot:
- http://es6-features.org/#Constants
- http://es6-features.org/#ObjectMatchingShorthandNotation
- http://es6-features.org/#RestParameter
- http://es6-features.org/#SpreadOperator
Read about React here:
https://facebook.github.io/react/
Handing in homework
Take a look at this video made by Daan, he explains how your homework needs to be handed in.
Also review the Git workflow material from the JavaScript3 module, use this as a reference.
Slides
Find the slides used in class here:
For reference, slides from HYF NL: https://slides.com/joostlubach/react-class/live
Learning examples
Counter [source]
Demonstrates:
- Most basic implementation of component state
- Handler functions bound to
onClick
Clocks [source]
Follows the React docs clock example here. Uses momentjs and moment-timezone for datetime functionality.
Demonstrates:
- Using both state and props in a component tree
- Passing event handlers as props
- Rendering components in a loop
- Conditional JSX rendering (header count)
- State-bound lifecycle and lifecycle events (clock interval)
Real world example
Have a look at Mattijn's real world React project:
https://github.com/mattijnlahuis/beertools
The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)