goshacmd / react-redux-links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more

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 https://www.reactiflux.com.

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.

Table of Contents

Getting Started

• Basic Concepts and Overviews
• Community Resources
• Javascript Resources
• Git Resources and Tutorials
• Node.js and NPM
• Webpack Tutorials
• Boilerplates and Starter Kits

Basic Tutorials

• ES6 Features and Samples
• React Tutorials
• Flux Tutorials
• Redux Tutorials
• MobX Tutorials

Intermediate Concepts

• Using React with ES6
• Functional Programming
• Immutable Data
• React/Redux Testing
• React Native

Advanced Topics

• Architecture and Structure
  • Project Structure
  • React Component Patterns
  • React State Management
  • React Architecture and Best Practices
  • Redux Architecture and Best Practices
  • React/Redux Performance
• React:
  • React Implementation and Concepts
  • React and Forms
  • React and AJAX
  • React Styling
  • React Server Rendering
  • React and Routing
• Redux
  • Redux Middleware
  • Redux Side Effects
  • Redux Tips and Techniques
• Other
  • Webpack Advanced Techniques
  • Static Typing

Comparisons and Discussion

• React/Flux/Redux Pros, Cons, and Discussion
• React and Flux vs Backbone

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:

• React How-To
  https://github.com/petehunt/react-howto
  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)

• ES6 - The Bits You'll Actually Use
  http://jamesknelson.com/es6-the-bits-youll-actually-use/
  A quick tour through some of the more useful features in ES6

• ES6 Features Comparison
  http://es6-features.org/
  Code snippets comparing ES6 features with their ES5 equivalents

• Webpack - The Module Bundler
  http://alp82.github.io/webpack-experiment-slides/#/
  HTML slideshow that describes Webpack's features and links to demos

• React to the Future
  http://elijahmanor.com/talks/react-to-the-future/dist/#/
  A fantastic HTML slideshow describing what React is, what makes it special, and how to work with it

• Relieving Backbone Pain with Flux & React
  http://product.hubspot.com/blog/moving-backbone-to-flux-react
  A fantastic video that walks through common problems with using Backbone, and how React can help solve those

• Components, React, and Flux
  http://slides.com/danabramov/components-react-flux-wip#/
  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
  http://banderson.github.io/reactive-component-ui-presentation/#/
  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)

• Redux Docs
  http://redux.js.org/index.html
  The official Redux documentation. FANTASTIC writing - not just "here's the API", but "here's what you want to do and how we came up with this"

• Managing Data Flow on the Client Side
  http://blog.madewithlove.be/post/redux/
  Walks through a small Redux example, and talks about the benefits

• Pros and Cons of Using Immutability With React
  http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/
  Excellent description of what immutability is, how to use it with React, and pros and cons of using it

• React Best Practices and Tips
  http://www.toptal.com/react/tips-and-practices
  Several excellent guidelines for component structure and behavior

• Redux Best Practices
  https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e
  Guidelines for tools, component structure, file layout, and async data handling