View prefetch.js
function prefetch(getKey, getValue, getInitialValue, propName) {
const inFlight = new Set();
const cache = new Map();
return ChildComponent => {
return class extends React.Component {
state = {value: getInitialValue(this.props)};
componentWillReceiveProps(nextProps) {
const key = getKey(nextProps);
if (cache.has(key)) {
// Use cached value
View app.js
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
.foo :global(.some-ovid-class) .bar {
color: blue;
}
View app.js
const history = createHistory();
const router = createReactRouter(routes);
history.listen((location => {
router.match(location, (err, state, redirectInfo) => {
// Integrate with external state library (Redux), or render directly
React.render(
<RouterComponent {...state} />;
);
});
View gist:1168dd2c3cbd8e4cb477
function reactRouter(router) {
return (reducer, initialState) => next => {
const baseStore = next(reducer, initialState);
function storeIsInSyncWithRouter() {
//... blah blah implementation details
}
// Apply router middleware which intercepts TRANSITION_TO actions
const wrappedDispatch = routerMiddleware(router)()(baseStore.dispatch);
View flux.js
/**
* Basic proof of concept.
* - Hot reloadable
* - Stateless stores
* - Stores and action creators interoperable with Redux.
*/
import React, { Component } from 'react';
export default function dispatch(store, atom, action) {
View gist:c7eb7ac45617d9332b60
import Flummox from 'flummox';
import { Map } from 'immutable';
// Instead of a constructor, just wrap flux creation inside a function
export default function createFlux() {
const flux = new Flummox();
// Actions are the same. Just pass an object instead of a class.
const thingActions = flux.createActions('things', {
incrementSomething(amount) {
View gist:dfbac9ed62474e1be605
const flux = new Flux();
flux.createActions('foobar', {
foo() {
return 'bar';
},
bar() {
return 'baz';
}
View pureRenderMixin.js
function pureRenderMixin(Component) {
Component.prototype.shouldComponentUpdate(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
}
return Component;
}
class MyComponent extends React.Component {}
View gist:d1c1b7bc95e5f869424d
class Store {
constructor(state = {}) {
this.state = state;
}
getState() {
return this.state;
}
}