JSFiddle - React, Tailwind, and code Playground

by brianmfranklin

HTML

<script src="http://fb.me/react-with-addons-0.12.2.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <div id="example"></div>
    <script type="text/jsx">
    var items = [];
    for ( var i = 0; i < 10000; i++ ) {
      items.push( { value: i } );
    }

    var HelloWorld = React.createClass( {
      getInitialState: function() {
        return {
          items: this.props.items,
          timeTaken: ''
        }
      },
    render: function() {
      return (
        <div>
        <h1>React <button onClick={ this.reversem }>reverse list</button> <span>{ this.state.timeTaken }</span></h1>
      {this.state.items.map(function(item) {
        return <h2>Item #{item.value}</h2>;
      })}
      </div>
    );
  },
  reversem: function() {
    var x = new Date().getTime();
    this.setState( { items: this.state.items.reverse() } );
    setTimeout( function() {
      this.setState( { timeTaken: ' - Reversing took ' + ( new Date().getTime() - x ) + 'ms' } )
    }.bind( this ), 1 );
  }
} );

      React.render(
        <HelloWorld items={ items }></HelloWorld>,
        document.getElementById('example')
      );
    </script>