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 on this page are worth reading, but there's obviously a LOT of them. Here's a "best-of" list to get you started:
| Title | URL | Description |
|---|---|---|
| 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#.ij385pwu6 |
Guidelines for tools, component structure, file layout, and async data handling |
| Title | URL | Description |
|---|---|---|
| Exploring ES6 | http://exploringjs.com/es6/index.html | A full online book covering every aspect of ES6 in fine detail |
| ES6 Features Overview | https://github.com/lukehoban/es6features | Examples of each of the new major features |
| ES6 Features Comparison | http://es6-features.org/ | Code snippets comparing ES6 features with their ES5 equivalents |
| ES6 Overview in 350 Bullet Points | https://ponyfoo.com/articles/es6 | Quick samples and descriptions of all the various ES6 capabilities |
| ES6 In Depth | https://ponyfoo.com/articles/ tagged/es6-in-depth |
Many articles covering each feature in greater detail |
| Javascript Features | http://jsfeatures.in/#ES6 | More samples of features in ES5, ES6, and ES7 |
| 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 |
| Title | URL | Description |
|---|---|---|
| The Hitchiker's Guide to Modern JS Tooling | http://reactkungfu.com/2015/07/the-hitchhikers- guide-to-modern-javascript-tooling/ |
A great overview of many of the most common build tools, package managers, test frameworks, and code quality tools currently in use |
| SurviveJS | http://survivejs.com/ | A full book online book that covers setting up Webpack, developing using React and Flux, and using ESLint for code quality |
| Beginner's Guide to Webpack | https://medium.com/@dabit3/beginner-s- guide-to-webpack-b1f1a3638460#.g3xg8v2q3 |
A walkthrough for getting started with a Webpack dev setup |
| Webpack - The Module Bundler | http://alp82.github.io/ webpack-experiment-slides/#/ |
HTML slideshow that describes Webpack's features and links to demos |
| Webpack Your Bags | http://blog.madewithlove.be/post/ webpack-your-bags/ |
In-depth article describing what Webpack is, why you would want to use it, and how to set it up |
| Webpack + React is Awesome | http://www.christianalfoni.com/articles/2014_12_13_ Webpack-and-react-is-awesome |
Another tutorial explaining how to use and set up Webpack |
| Title | URL | Description |
|---|---|---|
| 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 |
| React Tutorial | https://facebook.github.io/react/ docs/tutorial.html |
The original React tutorial page from the React docs |
| React: Getting Started and Concepts | https://scotch.io/tutorials/learning-react- getting-started-and-concepts |
Walks through the basics of components, JSX, props/lifecycle, and data flow |
| A Comprehensive Guide to Building Apps with React | http://tylermcginnis.com/reactjs- tutorial-a-comprehensive-guide- to-building-apps-with-react/ |
Walks through the major concepts and API functions in React |
| React.js for Stupid People | http://blog.andrewray.me/ reactjs-for-stupid-people/ |
A high-level overview of what React is, and some pros and cons |
| Learn Raw React | http://jamesknelson.com/ learn-raw-react-no-jsx-flux-es6-webpack/ |
A ground-up React tutorial that leaves out any other related "modern" technologies |
| React.js Tutorial and Guide to the Gotchas | https://zapier.com/engineering/ react-js-tutorial-guide-gotchas/ |
Excellent look at what React and JSX are, and how to handle components and state. Also some excellent guidelines to be aware of when writing React code. |
| React/Flux Tutorial Part 1: React | http://spapas.github.io/2015/06/05/ comprehensive-react-flux-tutorial/ |
Demonstrates building up a CRUD app UI using React |
| Intro to the React Framework | http://code.tutsplus.com/tutorials/ intro-to-the-react-framework--net-35660 |
Discusses components, JSX, component lifecycle, state/props, and mixins |
| React.js Introduction For People Who Know Just Enough jQuery To Get By | http://reactfordesigners.com/labs/ reactjs-introduction-for-people-who- know-just-enough-jquery-to-get-by/ |
A step-by-step tutorial that builds a simple component with jQuery and with React |
| Title | URL | Description |
|---|---|---|
| Thinking in React | https://facebook.github.io/react/ docs/thinking-in-react.html |
The original guide to breaking a UI into components and setting up data flow |
| Removing User Interface Complexity, or Why React is Awesome | http://jlongster.com/Removing- User-Interface-Complexity,-or- Why-React-is-Awesome |
A long walkthrough that builds up a pseudo-React-like library, demonstrating what React does and why you would want to use it. Has lots of embedded demos. |
| Describing UI State with Data | http://nicolashery.com/ describing-ui-state-with-data/ |
Demonstrates modeling the state and actions of an application, and updating the UI based on that. (CSS/images may be blocked on the NGGN, but a useful read anyway) |
| Common React Mistakes - Unneeded State | http://reactkungfu.com/2015/09/common- react-dot-js-mistakes-unneeded-state/ |
Examples of how to think about and model data and UI state |
| Understanding the Functional Revolution in Front-End Applications | http://blog.reactandbethankful.com/posts/2015/ 09/15/understanding-the-functional-revolution/ |
Higher-level tutorial describing functional programming and how it relates to Javascript, UI, and client-side applications |
| Functional UI and Components as Higher Order Functions | https://blog.risingstack.com/functional-ui- and-components-as-higher-order-functions/ |
Another tutorial on functional programming and how it relates to React |
| 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) |
| Why You Should Care About Flux | http://jaysoo.ca/2015/06/02/ why-you-should-care-about-flux/ |
Describes the value in separating "reads" from "writes", and eliminating local state |
| Lessons Backbone Developers Can Learn From React | http://benmccormick.org/2015/09/09/ what-can-backbone-developers-learn-from-react/ |
Discusses 3 lessons from React: "UIs are trees of reusable components", "modern JS is cleaner code", and "don't use DOM for state" |
| State is an Anti-Pattern | https://www.reddit.com/r/reactjs/comments/ 3bjdoe/state_is_an_antipattern/ |
Some long-winded but useful thoughts on what makes a good component: "intuitive", "same input -> same output", "pure", and "only side effects are Flux actions" |
| Why Local Component State is a Trap | https://www.safaribooksonline.com/blog/2015/ 10/29/react-local-component-state/ |
Thoughts on a "single state tree" vs local component state |
| 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 |