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 | Preparation | Lesson plan | Homework |
|---|---|---|---|---|
| 1. | Thinking the react way Understanding the component model Props State |
Preparation | Lesson plan | Homework |
| 2. | Building components Create react app Component tree Stateful logic List keys Life cycle |
Preparation | Lesson plan | Homework |
| 3. | Advanced react Forms and events Using data fetching Children Prop types |
Preparation | Lesson plan | Homework |
| 4. | Managing state Context State management libraries Render props |
Preparation | Lesson plan | Homework |
| 5. | Connecting to node React router Refs Node api project |
Preparation | Lesson plan | 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/
Real world example
Have a look at Exemplary real world application built with React + Redux:
https://github.com/gothinkster/react-redux-realworld-example-app
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 :)
Beyond React
The following libraries are worth mentioning to use in conjunction with React:
- FlowType - a way to annotate ES6 with types, similar to TypeScript
- Redux - predictable (application) state container, a Flux implementation
- Webpack - a JS packager, used by
create-react-app - Babel - a ES6+ to JS transpiler, also used by
create-react-app - JSS - a way to write CSS-like styles inside your component files