React/Redux Links

    Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.

    Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at

    You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and email newsletters. Finally, I also keep a dev blog at, where I write about React, Redux, Webpack, and more.

    Table of Contents

    Getting Started

    Basic Tutorials

    Intermediate Concepts

    Advanced Topics

    Comparisons and Discussion

    Best of the Best / Suggested Reading List

    All of the links in this collection are worth reading, but there's obviously a LOT of them. Here's a "best-of" list to get you started:

    Basic Concepts and Learning Approaches

    Overviews of Javascript Tools and Concepts

    Suggested Learning Approaches

    • A Study Plan to Cure Javascript Fatigue
      The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem.
    • Grab Front-End Study Guide
      An excellent guide to learning front-end technologies, based on "A Study Plan to Cure Javascript Fatigue". Includes descriptions of each topic, links to learning resources, and estimates for how much time to spend on each topic.
    • React How-To
      Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux)
    • Timeline for Learning React
      How to Learn React
      Another high-level suggested timeline for how to approach learning React and related technologies.
    • Tips to learn React + Redux
      An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, unit testing, and much more.

    Learning Core Javascript (ES5)

    General Resources


    • Eloquent Javascript
      A full online book teaching Javascript from the ground up. Very recommended.
    • You Don't Know Javascript
      An online book series intended to teach all aspects of Javascript, including the "tougher" parts.
    • Exploring Javascript
      Multiple free online books from Dr. Axel Rauschmayer. "Speaking Javascript" covers all of Javascript through ES5; "Exploring ES6" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment.

    Learning Current Javascript (ES6+)

    ES6 Feature Overviews

    In-Depth Details

    • ES6 In Depth
      Many articles covering each feature in greater detail
    • Exploring ES6
      A full online book covering every aspect of ES6 in fine detail

    React Walkthrough

    If you are new to React, try reading these articles in order.

    Getting Started

    • React Documentation: Hello World
      React Documentation: Tutorial
      The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information.
    • Create-React-App
      The official project creation tool from the React team. Allows you to set up a new React project, with no configuration work required.
    • Simple React Development in 2017
      An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production.
    • Modern Web Development with React and Redux
      An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.
    • Learn Raw React
      A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms.
    • 30 Days of React
      A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.

    Data Flow: “State” and “Props”

    Component Patterns

    • React Patterns
      An excellent list of common patterns for structuring React components, with examples
    • The React Component Lifecycle
      A useful description of the order and purpose of React’s component lifecycle methods.
    • Presentational and Container Components
      Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
    • Mixins Considered Harmful
      Dan Abramov explains why the React team discourages use of mixins, and prefers a pattern called “Higher Order Components” instead
    • Components, React, and Flux
      A fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture
    • Reactive, Component-Based UIs
      Another fantastic HTML slideshow describing the three principles of React: "functional over OOP", "stateless over stateful", "clarity over brevity" (use arrow keys to advance slides)

    Function Binding and this

    AJAX requests and Data Fetching

    Immutable Data

    Functional Programming

    • The Little Idea of Functional Programming
      Describes the three basic principles of FP: "data in/data out", "code as data", and "function composition" all the way down, and demonstrates transforming some data. Has some very helpful graphics and illustrations.
    • What Is Functional Programming?
      Describes how side effects and "hidden inputs" add complexity to code, in very clear terms.

    Forms and Inputs


    • Styling in React
      An introduction to using React's built-in inline styling abilities
    • How To Style React
      An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use.


    Getting Started

    • Redux Docs
      The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information.
    • Getting Started with Redux - Video Series
      Getting Started with Redux - Course Notes
      Dan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos.
    • Building React Applications with Idiomatic Redux - Video Series
      Building React Applications with Idiomatic Redux - Course Notes
      Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos.
    • Redux: From Twitter Hype to Production
      An extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture.
    • Leveling Up with React: Redux
      A very well-written introduction to Redux and its related concepts, with some useful cartoon-ish diagrams.
    • Connect.js explained
      A very simplified version of React Redux's connect() function that illustrates the basic implementation

    AJAX, Timeouts, and other “Side Effects”


    • Redux Middleware
      A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them.
    • Exploring Redux Middlewares
      Understanding middlewares through a series of small experiments


    Writing Reducers

    • Redux Docs: Structuring Reducers
      Comprehensive information on writing reducers and structuring data, covering reducer composition, use of combineReducers, normalizing data, proper immutable updating, and more.
    • Taking Advantage of combineReducers
      Examples of using combineReducers multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic.

    Selectors and Normalization


    Getting Started

    Configuration and Concepts

    • Webpack: The Confusing Parts
      A great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the "entry" option, the "output" option / "path" vs "publicPath", loaders and configuration, Babel, plugins, and path resolving.
    • Angular + Webpack < 3
      A long presentation that describes Webpack and its core concepts in depth. A few parts are Angular-centric, but still an extremely clear and informative set of slides. Covers topics like the "entry" and "output" options, "loaders", and "plugins".
    • Advanced Webpack
      An in-depth presentation that walks through Webpack concepts, terms, configuration, and usage. Covers a number of advanced topics, and very worth reading.

    Build Optimization

    Hot Module Reloading


    🚀 Github 镜像仓库 🚀




    贡献者 58