Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.

In this 5 week module we will learn React!

Watch this video from Facebook about why they started React:

https://youtu.be/nYkdrAPrdcw

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:

http://es6-features.org

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

Demonstrates:

1. Most basic implementation of component state
2. Handler functions bound to onClick

Follows the React docs clock example here. Uses momentjs and moment-timezone for datetime functionality.

Demonstrates:

1. Using both state and props in a component tree
2. Passing event handlers as props
3. Rendering components in a loop
4. Conditional JSX rendering (header count)
5. State-bound lifecycle and lifecycle events (clock interval)

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 :)