Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015

Not a readable resource, but I feel it is worth the exception - Watch Dan Abramov's talk [1] about Redux (Reducers + Flux). Gives great insight into his motivation for creating React Hot Loader and Redux. +1 for Dan (aka Gaearon) being an excellent developer [1] [VIDEO]

Dan Abramov's talk on Redux and hot loader at ReactEurope really nails live coding for maximum effect: [VIDEO] His presentation is web-based, so his live coding interacts with his "slide-ware", e.g. changing slides is accomplished by setting application state.

One of my favourites I watched recently was Dan Abramov introducing React hot loading, Redux and Redux Dev Tools in the same 30 minute talk: [VIDEO]

Hey, lib author here. Let me first explain Flux in five seconds. Instead of mutating your models, any data mutation in your app is described as a plain object describing “what happened” (e.g. { type: LIKED_POST, postId: 42 }) and broadcasted globally. Models (called Stores in Flux) have no setters and change their internal state in response to specific mutation objects (called Actions). The goal of Flux is to have single source of truth and make it easy to avoid race conditions and cascading updates. If some data is wrong, just repeat the same Actions in the same order, and you'll get the same data in Stores. Very easy to debug. Now, for Redux. It keeps the properties of Flux (mutations described as objects), but instead of Stores mutating internal state, it has Reducers—pure functions with (state, action) => state signature. While writing Flux apps, I noticed that the _essence_ of every Store I ever wrote was a reducer function. It turns out that using pure functions instead of event emitters has many benefits: they are composable ( [LINK] ), it is possible to hot reload their logic ( [LINK] ). I wrote Redux for my React Europe talk about Hot Reloading and Time Travel ( [LINK] ). It got popular before I explained _why_ I made it. In my talk I show what kind of powerful devtools it is possible to build on top of Redux. The video of my talk will be up soon, you can check when it appears here: [LINK] . Also check out my article on the subject: [LINK] EDIT: THE VIDEO IS UP! [VID

Directives are replaced by React components. I would argue, IMO, that directives are actually a half-assed implementation of components. In terms of services, I would recommend using Flux to perform actions / store your state. This is what a lot of developers are leaning towards these days. There was a great talk at React Conf about Reflux, I've never used it, but the presentation has convinced me to try it out on my next project: [VIDEO] When you build with React, imagine building an application in Angular using only Directives. It isn't that simple, but that is sort of the idea with React components. I started with Angular (and still work day to day with it at work) but if someone asked me how I would architect an application tomorrow, I would go with Flux + React + ES6, no questions asked. Also, Angular2 is heavily influenced by React, so learning React now will allow you to have a better understanding of Angular2.

This is out-dated from my perspective. Check Redux [VIDEO] [LINK] Many Flux implementation lucks of isomorphic, proper hot-reloading, etc. ES6 transition is on its way. Most code will be abandoned. Alt, Reflux, etc are all in trouble.

If you're wondering about which flux implementation to start with, I'd highly recommend checking out Redux : [LINK] The main idea is to think of stores as reducers (redux = reducers + flux). He also gave a very good talk on it at react-europe: [VIDEO]

I think if you take a lot at the motivations that Dan Abramov had for creating Redux [1], you'll see that improving debugging was at the centre of it. Check out his talk he gave at React-Europe. He basically is talking about improving developer tools. The functional approach Redux takes allows for you to see state transitions and replay actions - making it relatively trivial (compared to say Angular.js) to understand how to reproduce a buggy state. [1] [LINK] [2] [VIDEO]