Learning React + Redux

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

• 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

Popular libraries/plugins

There are many middlewares used and available.

• React Router - Bindings React and router
• React Redux Router - Binding between Redux and router
• History - Used to sync and work with URL changes on Redux event
• Isomorphic Fetch - Implements the fetch API
• Async Connect - Helps finishing async calls during server side rendering

How To Start Off?

• Set 1: Getting familiar with React

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.

• Set 2: Setting up API in vanilla React

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.

• 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 [GitHub] to work with server side rendering.

This post was originally published on Hasura Blog.