dalyaktahmed / react

Specifications React Module

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.	Flux & MobX	MobX, Flux Concepts	W4 Lesson Plan	W4 Homework
5.	API Integration	MobX Async Actions	W5 Lesson Plan	W5 Homework

Read up before we get started

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/

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.

Please read this doc for information on how to where to put your homework for this particular module.

Slides

Find the slides used in class here:

https://slides.com/joostlubach/react-class/live

Learning examples

Counter [source]

Demonstrates:

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

Clocks [source]

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)

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