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 ExampleApplication = React.createClass({
  getInitialState: function() { return {count: 0}},
  handleClick: function() {
    console.log('handleClick 1');
    console.log(JSON.stringify(this.state))
    this.setState({count: this.state.count+1}, function() {
      console.log('handleClick 3');
      console.log(JSON.stringify(this.state))
    });
    console.log('handleClick 2');
    console.log(JSON.stringify(this.state))
  },
  componentWillReceiveProps() {
    //console.log('componentWillReceiveProps 1');
    //console.log(JSON.stringify(this.state))
    this.setState({count: this.state.count+1}, function() {
      //console.log('componentWillReceiveProps 3');
      //console.log(JSON.stringify(this.state))
    });
    //console.log('componentWillReceiveProps 2');
    //console.log(JSON.stringify(this.state))
  },
  render: function() {
    var elapsed = Math.round(this.props.elapsed  / 100);
    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
    var message =
      'React has been successfully running for ' + seconds + ' seconds.';

    return <p onClick={this.handleClick}>clickme - {this.state.count} - {message}</p>;
  }
});

var start = new Date().getTime();

setInterval(function() {
  React.render(
    <ExampleApplication elapsed={new Date().getTime() - start} />,
    document.body
  );
}, 2000);