Curated links I've collected on React, Redux, ES6, and more. Not quite "awesome", but hopefully useful as a starting point I can give to others.
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:
-
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
| Title | URL | Description |
|---|---|---|
| The Flux Quick Start Guide | http://www.jackcallister.com/2015/02/26/ the-flux-quick-start-guide.html |
A quick overview of the key concepts of Flux |
| Getting to Know Flux | https://scotch.io/tutorials/ getting-to-know-flux-the-react-js-architecture |
A good look at what Flux is, what the pieces are, and how they fit together |
| Flux in Depth - Overview and Components | http://blog.mgechev.com/2015/05/15/ flux-in-depth-overview-components/ |
Another in-depth article on Flux concepts and structure |
| Architecting React Apps with Flux | http://tylermcginnis.com/ reactjs-tutorial-pt-3-architecting- react-js-apps-with-flux/ |
Describes how Flux organizes data flow, and how pieces fit together |
| For Flux' Sake | https://github.com/MIJOTHY/FOR_FLUX_SAKE | A Flux tutorial and description, with a sample project |
| Thinking in Flux | http://www.actioniq.co/blog/thinking-in-flux/ | An example of writing a component that works in a Flux data flow |
| A Cartoon Guide to Flux | https://code-cartoons.com/a-cartoon- guide-to-flux-6157355ab207#.wqzgzhsbv |
A high-level description of Flux concepts, with cartoons |
| React/Flux Tutorial Part 2: Flux | http://spapas.github.io/2015/07/02/ comprehensive-react-flux-tutorial-2/ |
Reworks the app from part 1 to use Flux |
| Title | URL | Description |
|---|---|---|
| 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" |
| Getting Started with Redux - Video Series | https://egghead.io/series/ getting-started-with-redux |
The creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos |
| Single State Tree + Flux | http://merrickchristensen.com/articles/ single-state-tree.html |
Describes the benefits of a Flux architecture, and a single state tree like Redux has |
| Understanding Redux | http://www.youhavetolearncomputers.com/ blog/2015/9/15/a-conceptual-overview- of-redux-or-how-i-fell-in-love-with- a-javascript-state-container |
A higher-level description of what Redux is, the major concepts, and why you would want to use it. Also some additional article links. |
| A Cartoon Guide to Redux | https://code-cartoons.com/a-cartoon- intro-to-redux-3afb775501a6#.3k23w6m18 |
Another high-level description of Redux, with cartoons |
| Managing Data Flow on the Client Side | http://blog.madewithlove.be/post/redux/ | Walks through a small Redux example, and talks about the benefits |
| Redux-Tutorial | https://github.com/happypoulp/redux-tutorial | A file-based tutorial to Redux (click on each numbered .js file in the repo) |
| Getting Started with Redux | http://www.jchapron.com/2015/08/14/ getting-started-with-redux/ |
Walks through setting up a small Redux app, and builds up each layer |
| Full-Stack Redux Tutorial | http://teropa.info/blog/2015/09/10/ full-stack-redux-tutorial.html |
A full-blown, in-depth tutorial that builds up a complete client-server application. |
| Title | URL | Description |
|---|---|---|
| Immutability in Javascript | http://www.sitepoint.com/immutability-javascript/ | Covers the basic concepts of immutable data in Javascript |
| Immutability in React | http://www.sitepoint.com/immutability-react/ | Covers the reasons and basic concepts of using immutable data with React |
| Immutable Data Structures and Javascript | http://jlongster.com/Using-Immutable- Data-Structures-in-JavaScript |
In-depth article covering the value of immutable data, and two common JS libraries |
| Why Should I Care About Immutable Data In React? | http://www.bennadel.com/blog/2903-why-should- i-care-about-immutable-data-in-reactjs.htm |
Describes the major benefits of using immutable data in React, with a demo |
| 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 |
| Short-Circuiting Component Updates in React | http://www.bennadel.com/blog/2904- shouldcomponentupdate-will-short-circuit-an- entire-subtree-of-components-in-reactjs.htm |
Walks through how to optimize React performance by skipping updates for subtrees |
| Title | URL | Description |
|---|---|---|
| React Best Practices and Tips | http://www.toptal.com/react/tips-and-practices | Several excellent guidelines for component structure and behavior |
| Smart and Dumb Components | https://medium.com/@dan_abramov/smart-and- dumb-components-7ca2f9a7c7d0#.uow114hby |
Describes how to split components into two categories for separation of concerns and reusability |
| Redux Best Practices | https://medium.com/lexical-labs-engineering/ redux-best-practices-64d59775802e#.ij385pwu6 |
Guidelines for tools, component structure, file layout, and async data handling |
| "Redux Best Practices?" | https://www.reddit.com/r/javascript/comments/ 3p9o0j/redux_best_practices/ |
Short but good discussion on approaches. |
| Best Practices for Building Large React Applications | http://blog.siftscience.com/blog/2015/best- practices-for-building-large-react-applications |
Excellent advice for structuring components and improving reuse |
| Title | URL | Description |
|---|---|---|
| React.js: The Good and the Bad | http://techblog.trunkclub.com/javascript/2015/ 09/14/reactjs-the-good-and-the-bad.html |
Some very good pros and cons based on experiences |
| The Case for Flux | https://medium.com/swlh/the-case-for- flux-379b7d1982c6#.tgrsz3zhc |
The author of Redux lays out reasons you might want to use a Flux-style architecture |
| Redux: Concept Over Implementation | http://www.schibsted.pl/2015/09/redux- concept-over-implementation/ |
Some high-level thoughts on why Redux over standard Flux |
| Why use Redux over Flux? | http://stackoverflow.com/questions/32461229/ why-use-redux-over-facebook-flux |
Another good post from Redux's author comparing Redux and Flux |
| What's Your #1 Problem With React? | https://www.reddit.com/r/reactjs/comments/ 3pm4b8/we_all_love_react_but_whats_your_ 1_problem_with_it/ |
Developers discuss problems they've run into with React |
| Application Architecture with React | https://news.ycombinator.com/item?id=10213905 | More article discussion on React and Flux experiences |
| "Pros and Cons of React and Flux" | https://www.reddit.com/r/reactjs/comments/ 39wsfi/what_are_pros_and_cons_of_ using_reactjsflux/cs7msvp |
A FANTASTIC comment that points out how each JS framework is a reaction to a specific category of problems |
| "Any Serious / Large / Real Web Apps with React and Flux?" | https://www.reddit.com/r/reactjs/comments/ 3jcdfk/has_anyone_did_any_serious_ large_real_web/ |
Good discussion of scaling React and Flux past a small toy app |
| One Year of React.js at Arkency | http://blog.arkency.com/2015/05/one-year- of-react-dot-js-in-arkency/ |
Thoughts on experience with using React |
| "Redux feels bloat - what alternatives?" | https://www.reddit.com/r/reactjs/comments/ 3towfy/redux_feels_bloated_complicated_ and_not_easy_what/ |
Thoughts on Redux, its ecosystem, and API |
| "Getting Started with Redux" discussion | https://www.reddit.com/r/javascript/comments/ 3u0167/getting_started_with_redux_ a_free_30part_video/ |
Some great discussion on real-world experience with Redux, particularly by user TheAceOfHearts |
| "Why has Redux become so popular vs other Flux solutions"? | https://www.reddit.com/r/reactjs/comments/ 3u54ju/why_has_redux_become_so_ popular_vs_altjs_and/ |
Thoughts on the benefits and pros of using Redux |
| Productive Javascript Development | http://benmccormick.org/2015/11/25/ productive-javascript-development/ |
Looks at 6 ways different frameworks make things "easy": concepts, reading/writing code, architecting / maintaining / debugging apps. |
| "Has anybody actually built a decent sized React app?" | https://www.reddit.com/r/reactjs/comments/ 3wi0cx/has_anybody_actually_built_a_ decent_sized_react/ |
More good discussion on practical experiences |
| Using React is a Business Decision, Not a Technology Choice | https://blog.formidable.com/using-react-is-a- business-decision-not-a-technology- choice-63c4641c5f7#.jsqybujyx |
A higher-level, more business-case look at the pros of React |
| Title | URL | Description |
|---|---|---|
| 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 |
| Avoiding Event Chains in Single-Page Applications | http://www.code-experience.com/avoiding- event-chains-in-single-page-applications/ |
Describes potential problems with Backbone-style events triggering further events, etc |
| From Backbone to React: Experience Scaling an App | http://www.techsonian.net/2014/09/from- backbone-to-react-our-experience-scaling- a-web-application/ |
Thoughts on potential complexity issues in a Backbone app |
| From Backbone to React (comments) | https://news.ycombinator.com/item?id=8329837 | Discussion on the previous article |
| Title | URL | Description |
|---|---|---|
| React and ES6 - Binding Approaches | http://egorsmirnov.me/2015/08/16/ react-and-es6-part3.html |
Various methods of binding "this" in React ES6 classes |
| Which React Component Class Syntax Should I Use? | http://reactkungfu.com/2015/07/what- react-component-class-syntax-should-i-use/ |
Compares the standard React.createClass() syntax vs ES6 React.Component class syntax |
| Coding with React like a Game Developer | https://medium.com/@PhilPlckthun/coding- with-react-like-a-game- developer-e39ffaed1643#.x7pgji44o |
Demonstrates React usage with ES5 vs ES6, plus some other topics |
| The React Quick Start Guide: ES6 Edition | http://www.jackcallister.com/2015/08/30/ the-react-quick-start-guide-es6-edition.html |
An ES6 version of the other guide listed earlier |
| Why and How to Bind Methods in your React Component Classes | http://reactkungfu.com/2015/07/why-and- how-to-bind-methods-in-your- react-component-classes/ |
Another good look at function binding in JS, and how it works with React |