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
- 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 are very useful. Great for intermediate learning.
- React Component Lifecycle events flow-chart — An amazing SVG that sums up the flow of control through a component’s events.
Courses & Starter Kits
- Egghead video lectures (Recommended)
- Cabin by Stream React Tutorial
- thenewboston React Video Tutorials
- Video lectures from Redux inventor, Dan Abramov (Recommended)
- ReactEurope 2015 talk by Dan Abramov (Recommended)
- thenewboston Redux Video Tutorials
React + Redux Examples
- erikras’ React Redux Universal Hot Example (Recommended)
- React Starter Kit (Recommended)
- Pete Hunt’s React How To (Recommended)
- Dan Abramov’s React Makes You Sad Flow Chart (Recommended)
- Universal/Isomorphic app example tutorial
React Server Side Rendering
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
- Start with building a static website, with a couple of pages at least, which just presents information.
- Read about react components [Guide] and start converting the website to a React app.
- 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
- Find an interesting public API [List] you would like to explore further.
- 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
- Set up Redux [Video Tutorials] and store for the app.
- 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