React Base Fiddle (JSX)

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

by Anton Kolesnikov

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.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.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 data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

/* ---------------       LIST       ------------------------ */
var CommentList = React.createClass({
	render : function() {
  	var comments = this.props.data.map(function(comment) {
    	return (
      	<Comment author={comment.author}>{comment.text}</Comment>
      );
    });
  	return (
    	<div className ="commentList">
      	{comments}
      </div>
    )
  }
});

/* ---------------       FORM       ------------------------ */
var CommentForm = React.createClass({
  getInitialState: function() {
    return {author: '', text: ''};
  },
  handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
  },
  handleTextChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
  	e.preventDefault();
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    if (!text || !author) {
    	return;
    }
    
    this.props.onCommentAdd(this.state);
    this.setState({author: '', text: ''});
  },
  render: function() {
  	return (
    	<form className ="commentForm" onSubmit={this.handleSubmit}>
      	<input type="text" placeholder="Name" onChange={this.handleAuthorChange} />
        <br />
        <input type="text" placeholder="Message" onChange={this.handleTextChange} />
        <br />
        <input type="submit" />
      </form>
    )
  }
});
var Comment = React.createClass({
	render: function() {
  	return (
    	<div className ="comment">
      	<h3 className="author">
        	{this.props.author}
        </h3>
        <p>
        	{this.props.children}
        </p>
      </div>
    )
  }
});

/* ---------------       BOX        ------------------------ */
var CommentBox = React.createClass({
	getInitialState: function() {
  	return {data: data};
  },
  onCommentAdd: function(data) {
  	this.state.data.push(data);
   	this.setState({data:...