Learning React + Redux

A list of tutorials, guides, libraries and starter kits for React and Redux

Last updated on 30 Jul ‘16.

Update: Check out our yeoman react-redux starter kit ! It has 5 super useful examples that you can directly start building with.

Guides and Cheat Sheets

  1. Use the official guides. [Babel / React / Redux / (ES2015 / ES6)]
  2. API docs for all libraries are helpful. [Babel / React / Redux]
  3. React In Patterns — Shows vanilla React paradigms that are very useful. Great for intermediate learning.
  4. React Component Lifecycle events flow-chart — An amazing SVG that sums up the flow of control through a component’s events.

Courses & Starter Kits

React

  1. Egghead video lectures (Recommended)
  2. Cabin by Stream React Tutorial
  3. thenewboston React Video Tutorials

Redux

  1. Video lectures from Redux inventor, Dan Abramov (Recommended)
  2. ReactEurope 2015 talk by Dan Abramov (Recommended)
  3. thenewboston Redux Video Tutorials

React + Redux Examples

  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

React Server Side Rendering

  1. Official Guide (Recommended)
  2. Smashing Magazine Tutorial

There are many middlewares used and available.

How To Start Off?

Set 1: Getting familiar with React

  1. Start with building a static website, with a couple of pages at least, 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.

Set 2: Setting up APIs in vanilla React

  1. Find an interesting public API [List] you would like to explore further.
  2. Use the most familiar Ajax library [jQuery / Backbone] to have a component change its state at the occurrence of an event.

Set 3: Setting up Redux

  1. Set up Redux [Video Tutorials] and store for the app.
  2. Use isomorphic-fetch [Github] to get the data from the API source.

Finally, try the example scaffold [GitLab] to work with server side rendering.

Add backend APIs to your apps in minutes with the Hasura platform. Take it for a spin here: https://hasura.io

This post was originally published on 19-July, 2016


Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.


Hasura

Hasura

The Hasura GraphQL Engine gives you realtime, high performance GraphQL on any Postgres app. Now supports event triggers for use with serverless.

Read More