ReactContext ...

gistfile1.js

var React = require('react');

var Grandparent = React.createClass({
    childContextTypes: {
        foo: React.PropTypes.string.isRequired
    },

    getChildContext: function() {
        return {
            foo: this.props.foo
        };
    },

    // 3 next called server side
    getInitialState: function() {
        console.log('getInitialState')
        return {};
    },

    getDefaultProps: function() {
        console.log('getDefaultProps');
        return {};
    },

    componentWillMount: function() {
        console.log('componentWillMount');
    },

    // All the next lifecycles methods are NOT called server side
    componentDidMount: function() {
        console.log('componentDidMount');
    },

    componentWillReceiveProps: function() {
        console.log('componentWillReceiveProps');
    },

    shouldComponentUpdate: function() {
        console.log('shouldComponentUpdate');
        return true;
    },

    componentWillUpdate: function() {
        console.log('componentWillUpdate');
    },

    componentDidUpdate: function() {
        console.log('componentDidUpdate');
    },

    componentWillUnmount: function() {
        console.log('componentWillUnmount');
    },

    render: function() {
        return (
        <Parent bar='bar'/>
        );
    }
});


var Parent = React.createClass({
    childContextTypes: {
        bar: React.PropTypes.string.isRequired
    },

    getChildContext: function() {
        return {
            bar: this.props.bar
        };
    },

    render: function() {
        return (
        <Child/>
        );
    }
});

var genealogyMixin = {
    contextTypes: {
        foo: React.PropTypes.string.isRequired,
        bar: React.PropTypes.string.isRequired
    }
};

var Child = React.createClass({
    mixins: [genealogyMixin],

    render: function() {
        return (
        <div>
            <div>My name is:{this.context.foo}</div>
            <div>My name is:{this.context.bar}</div>
            <GrandChild/>
        </div>
        );
    }
});

var GrandChild = React.createClass({
    render: function() {
        return (
        <div>
            <div>GrandChild can not access context without contextTypes: {this.context.foo}</div>
            <GrandGrandChild/>
        </div>
        );
    }
})

var GrandGrandChild = React.createClass({
    mixins: [genealogyMixin],

    render: function() {
        return (
            <div>GrandGrandChild can even if GrandChild itself could not (GrandChild): {this.context.foo}{this.context.bar}</div>
        );
    }
})

// Finally you render the grandparent
React.render(<Grandparent foo='foo'/>, document.body);

// Server side
// var markup = React.renderToString(<Grandparent foo='foo'/>);