React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

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

CSS

.msgbox {
    border: 1px solid #999;
    height: 100px;
    margin-bottom: 2em;
}

.msgbox .echo {
    margin-top: 1em;
}

JavaScript 1.7

var MsgBox = React.createClass({
  getInitialState() {
    return {msg: ''}
  },
  
  handleKeyUp(event) {
  	this.setState({msg: event.target.value});
  },
  
  sendUp() {
  	var inp = React.findDOMNode(this.refs.txt);

    this.props.msgSetter(inp.value);
  },
  
  render() {
    return (
      <div className="msgbox">
        <input onKeyUp={this.handleKeyUp} ref="txt" />
        <button onClick={this.sendUp}>Send it up!</button>
        <div className="echo">{this.state.msg}</div>
      </div>
    )
  }
});

var Hello = React.createClass({
    getInitialState() {
      return {latestMessage: 'N/A'}
    },
    
    setLatestMessage(msg) {
	  this.setState({latestMessage: msg});
    },
    
    render() {
      return (
        <div>
          <p>The latest message is {this.state.latestMessage}.</p>
          <div className="msgboxes">
            <MsgBox msgSetter={this.setLatestMessage} />
            <MsgBox msgSetter={this.setLatestMessage} />
            <MsgBox msgSetter={this.setLatestMessage} />
          </div>
        </div>
      )
    }
});
 
React.render(<Hello name="World" />, document.getElementById('container'));