Learning React + Redux

Posted on July 19, 2016

Last updated on 30 Jul ’16.

Update: You should try our yeoman react-redux starter kit out! It has 5 super useful examples that you can directly start building on top off.

Guides and Cheat Sheets

Use the official guides. [Babel / React / Redux / (ES2015 / ES6)] API docs for all libraries are helpful. [Babel / React / Redux]

React In Patterns - Shows vanilla React paradigms that would be very useful. Great for intermediate learning.

React Component Lifecycle events flow-chart - An amazing SVG that sums up the flow of control through component’s events.

Courses & Starter Kits

  1. Egghead video lectures (Recommended)
  2. Cabin by Stream React Tutorial
  3. thenewboston React Video Tutorials
  1. Video lectures from Redux inventor, Dan Abramov (Recommended)
  2. ReactEurope 2015 talk by Dan Abramov (Recommended)
  3. thenewboston Redux Video Tutorials
  1. erikras’ React Redux Universal Hot Example (Recommended)
  2. React Starter Kit (Recommended)
  3. Pete Hunt’s React How To (Recommended)
  4. Dan Abramov’s React Makes You Sad Flow Chart (Recommended)
  5. Universal/Isomorphic app example tutorial
  6. Cabin
  1. Official Guide (Recommended)
  2. Smashing Magazine Tutorial

There are many middlewares used and available.

How To Start Off?

  1. Start with building a static website, couple of pages, which just presents information.
  2. Read about react components [Guide] and start converting the website to a React app.
  3. Use React Router [Github] to fill the routes. Now you should have a static vanilla React app ready.
  1. Find an interesting public API [List] you could like to search or work with further.
  2. Use the most familiar Ajax library [jQuery / Backbone] to have a component change it’s state at the occurrence of an event.
  1. Set up Redux [Video Tutorials] and store for the app.
  2. Use isomorphic-fetch [Github] to get the data from the API source.

This post was originally published on Hasura Blog.