React Base Fiddle (JSX)

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

by Juan Lanus

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.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.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>

CSS

.hide-true  {
  display: none;
}

Babel + JSX

var Comp = React.createClass({
	getInitialState: function(){
		return {hide: false};
	},
	toggle: function(){
		this.setState({hide: !this.state.hide});
	},
	render: function() {
		return <div>
			<button onClick={this.toggle}>toggle</button>    
			<div className={'hide-' + this.state.hide}>
        <h1>Hi there!</h1>
      </div>
		</div>;
	}
});

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