React Base Fiddle (JSX)

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

by Chad Fawcett

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-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://npmcdn.com/redux@3.5.2/dist/redux.min.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 Child = React.createClass({
	contextTypes: {
  	test: React.PropTypes.string.isRequired
  },
	render: function() {
  	return (<div>
    	<h3>{this.props.title}</h3>
      {this.context.test}
    </div>)
  }
})

var ChildContainer = ReactRedux.connect()(Child)

var Parent = React.createClass({
	render: function() {
  	return (<div>
    	<h2>Parent</h2>
      <Child title="Regular Child" />
      <ChildContainer title="Connect Child" />
    </div>)
  }
})

var Grandparent = React.createClass({
	getChildContext() {
  	return {
    	test: this.state.message
    }
  },
  childContextTypes: {
  	test: React.PropTypes.string
  },
  getInitialState() {
  	return { message: 'this is a message' }
  },
  updateMessage() {
  	this.setState({ message: this.state.message + '.' })
  },
  render: function() {
    return (<div>
    	<h1>Grandparent</h1>
      <button onClick={this.updateMessage}>Add period to message</button>
      <Parent />
     </div>);
  }
});

var Provider = ReactRedux.Provider;

ReactDOM.render(
	<Provider store={Redux.createStore((store) => store)}>
  	<Grandparent />
  </Provider>,
  document.getElementById('container')
);