React Base Fiddle (JSX)

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

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

JavaScript 1.7

var data = ['First', 'Second', 'Third'];
	var App = React.createClass({
		 getInitialState: function() {
			return {toggle: false}
		 },
		 handleClick : function(event){
			this.setState({toggle : !this.state.toggle});
		 },
		 render: function(){
			var checkboxes = [];
			this.props.data.forEach(
			function(name)
			{
				checkboxes.push(<CheckBox onClick={this.handleClick} name={name} />);
			});
			var textBox = this.state.toggle ? <InputBox name="Bar" /> : null;
			return (
				<div>
					<CheckBox name="Foo" onClick={this.handleClick} />
					{checkboxes}
					{textBox}
				</div>
			);
		}
	});
	
	
	var InputBox = React.createClass({
		render: function(){
			return (
			 <div class="form-group">
				<label>{this.props.name}</label>
				<input type="email" class="form-control" placeholder="Enter email" />
			  </div>
			);
		}
	});
	
	var CheckBox = React.createClass({
		handleClick : function(){
			this.props.onClick(this);
		},
		render: function(){
			return(
			<div class="checkbox">
			  <label>
			  {this.props.name}
				<input onClick={this.handleClick} type="checkbox" value="" />
			  </label>
			</div>
			);
		}
	});
	React.renderComponent(<App  data={data} /> ,  document.body);