chenglou

Interesting part (unmounting & API) is at the end if you're not interested in the rest =).

Stress Tests

This animation proposal is just an attempt. In case it doesn't work out, I've gathered a few examples that can test the power of a future animation system.

1. Parent is an infinitely spinning ball, and has a child ball that is also spinning. Clicking on the parent causes child to reverse spinning direction. This tests the ability of the animation system to compose animation, not in the sense of applying multiple interpolations to one or more variables passed onto the child (this should be trivial), but in the sense that the parent's constantly updating at the same time as the child, and has to ensure that it passes the animation commands correctly to it. This also tests that we can still intercept these animations (the clicking) and immediately change their configuration instead of queueing them.

2. Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch

sebmarkbage

Deprecating transferPropsTo

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.

We used to have a helper function called transferPropsTo. We no longer support this method. Instead you're expected to use a generic object helper to merge props.

render() {
 return Component(Object.assign({}, this.props, { more: 'values' }));

gaearon

'use strict';

var React = require('react'),
    classSet = require('react/lib/cx'),
    _ = require('underscore');

var ClassNameMixin = {
  propTypes: {
    className: React.PropTypes.string,
    context: React.PropTypes.string

sebmarkbage

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

• ReactElement / ReactElement Factory
• ReactNode
• ReactComponent / ReactComponent Class

React Elements

insin

{
  "browser": true,
  "node": true,

  "curly": true,
  "devel": true,
  "globals": {
    "ActiveXObject": true,
    "async": true,
    "moment": true,

gaearon

// Usage example:
//
// willTransitionTo(transition, params, query, callback) {
//   observeStore(DraftStore, s => s.isLoaded()).then(() => {
//     if (DraftStore.isMissingTitle()) {
//       transition.redirect('composeDraft', params);
//     }
//   }).finally(callback);
// }

fdecampredon

// in this first option events handlers are just RxJs functor Subject
// those subject are passed down to the render function and are manually injected into
// the properties of react component


var RxReact = require('rx-react');
var React = require('react');

alexeisavca

var React = require('react/addons');
var ReactIgnore = {
    displayName: 'ReactIgnore',
    shouldComponentUpdate (){
        return false;
    },

    render (){
        return React.Children.only(this.props.children);
    }

threepointone

// store.js
let {store, handler} = sto(initialState, reduceFn);   // where reduceFn: function(currentState, action, ...args){}

dispatcher.register(handler);
export store;

// elsewhere
store.get()  // -> current state

store.toObservable() // -> to be used with .observe()

chenglou

key is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:

• Clone state

<Comp key={1} /><Comp key={1} />

• Preserve component state across different parents: