by Ossi Hanhinen, @ohanhi
with the support of Futurice 💚.
Licensed under CC BY 4.0.
// ------------ | |
// counterStore.js | |
// ------------ | |
import { | |
INCREMENT_COUNTER, | |
DECREMENT_COUNTER | |
} from '../constants/ActionTypes'; | |
const initialState = { counter: 0 }; |
Hi Nicholas,
I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:
The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't
Note: if you want to skip history behind this, and just looking for final result see: rx-react-container
When I just started using RxJS with React, I was subscribing to observables in componentDidMount
and disposing subscriptions at componentWillUnmount
.
But, soon I realised that it is not fun to do all that subscriptions(that are just updating property in component state) manually, and written mixin for this...
Later I have rewritten it as "high order component" and added possibility to pass also obsarvers that will receive events from component.
This is a draft list of what we're thinking about measuring in Etsy's native apps.
Currently we're looking at how to measure these things with Espresso and Kif (or if each metric is even possible to measure in an automated way). We'd like to build internal dashboards and alerts around regressions in these metrics using automated tests. In the future, we'll want to measure most of these things with RUM too.
import { Component } from "React"; | |
export var Enhance = ComposedComponent => class extends Component { | |
constructor() { | |
this.state = { data: null }; | |
} | |
componentDidMount() { | |
this.setState({ data: 'Hello' }); | |
} | |
render() { |
var Bar1 = base => class extends base { | |
componentWillMount(){ | |
super.componentWillMount(); | |
console.log('Bar1'); | |
} | |
}; | |
var Bar2 = base => class extends base { | |
componentWillMount(){ | |
super.componentWillMount(); |
2015-01-29 Unofficial Relay FAQ
Compilation of questions and answers about Relay from React.js Conf.
Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.
Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
__SSTOKENSTRING = "@generated SignedSource<<dbe928e1275c495c1922c1bf063ffb70>>"; | |
! function(e) { | |
function t(e) { | |
function t() { | |
var t = Array.prototype.map.call(arguments, function(e) { | |
if (null == e) return null === e ? "null" : "undefined"; | |
if ("string" == typeof e) return '"' + e + '"'; | |
try { | |
return JSON.stringify(e) | |
} catch (t) { |