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

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 Example Screenshot

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)

Clocks Example Screenshot

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