React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by evan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var ContextTester = React.createClass({
	childContextTypes: {
    	parcel: React.PropTypes.string
    },
    
    getChildContext: function () {
    	return { parcel: 'owner' };
    },
    
	render: function() {
        return (
        
            <ContextProvider>
                <ContextReceiver />
            </ContextProvider>
        
        );
    }
});

var ContextProvider = React.createClass({
	childContextTypes: {
    	parcel: React.PropTypes.string
    },

    getChildContext: function () {
    	return { parcel: 'parent' };
    },

	render: function () {
    	return this.props.children;
    }
});

var ContextReceiver = React.createClass({
	contextTypes: {
    	parcel: React.PropTypes.string
    },
	render: function () {
    	return <span>Context from {this.context.parcel}</span>;
    }
});

ReactDOM.render(
	<ContextTester />,
    document.getElementById('container')
);