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 TestForm = React.createClass({

  getInitialState: function() {
    return {
      message: 'Hello!',
      isHungry: false
    };
  },

  handleValueChange: function(e) {
    // Don't do that - works, but may kill UX:
    e.preventDefault();
    
    // Alternatively call a Flux action creator here instead:
    this.setState({
      message: e.target.value,
    });
  },

  handleCheckboxClick: function(e) {
    // Don't do that - won't work for checkboxes!
    e.preventDefault();
    
    this.setState({
      isHungry: e.target.checked
    });
  },

  render: function() {

    return (
      <div>
          <div>
            <input type="text" 
              onChange={this.handleValueChange}
              value={this.state.message} />
            <input
              type="checkbox"
              checked={this.state.isHungry}
              value={this.state.value}
              onChange={this.handleCheckboxClick}
              {...this.props} /> I'm hungry!
          </div>
          <div style={{'margin-top': '20px'}}>
             <div>Text: {this.state.message}</div>
             <div>Checkbox: {this.state.isHungry ? 'Checked' : 'Not checked'}</div>
          </div>
      </div>
    );
  }

});

 
React.render(<TestForm />, document.body);