Specifications React Module
| Week | Topic | Read | Homework |
|---|---|---|---|
| 1. | React Components | JSX, Elements, Components and Props | Week 1 Homework |
| 2. | State and Lifecycle | Lifecycle, Events, Conditional Rendering, List and Keys | Week 2 Homework |
| 3. | Forms and Managing State | Forms, Manage State, Thinking in React | Week 3 Homework |
| 4. | Application State | Flux Concepts | Week 4 Homework |
| 5. | MobX + APIs | MobX Async Actions | Week 5 Homework |
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/
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.
Find the slides used in class here:
https://slides.com/joostlubach/react-class/live
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)
Have a look at Mattijn's real world React project: