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. 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.
Table of Contents
Getting Started
- Basic Concepts and Overviews
- Git Resources and Tutorials
- Node.js and NPM
- Webpack Tutorials
- Boilerplates and Starter Kits
Basic Tutorials
Intermediate Concepts
Advanced Topics
- React Performance
- React/Redux Architecture
- React Styling
- Redux Side Effects
- Redux Tips and Techniques
- Webpack Advanced Techniques
Guidelines, Comparisons, and Discussion
- Thinking in React and Flux
- Tips, Guidelines, and Best Practices
- 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