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
- React
- Egghead video lectures (Recommended)
- Cabin by Stream React Tutorial
- thenewboston React Video Tutorials
- Redux
- 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
- Cabin
- React Server Side Rendering
- Official Guide (Recommended)
- 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
- Start with building a static website, couple of pages, 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 API in vanilla React
- Find an interesting public API [List] you could like to search or work with further.
- 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
- 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 [GitHub] to work with server side rendering.
This post was originally published on Hasura Blog.