React Base Fiddle (JSX + harmony)

Starting point for creating JSFiddles with React. This uses React with Addons and enable harmony option .

by koba04

HTML

<script src="http://fb.me/JSXTransformer-0.13.0-rc1.js"></script>
<script src="http://fb.me/react-with-addons-0.13.0-rc1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

JavaScript 1.7

var items = _.chain(_.range(100)).map(function(i) {
  return { id: i, name: i + " item" };
});

var App = React.createClass({
  getInitialState: function() {
    return {
      items: []
    };
  },
  onClick: function() {
    React.addons.Perf.start();
    this.setState({ items: items }, function() {
      React.addons.Perf.stop();
      var measurements = React.addons.Perf.getLastMeasurements()
      console.log("=========== printDOM ==============");
      React.addons.Perf.printDOM();
      console.log("=========== getLastMeasurements ==============");
      console.log(measurements);
      console.log("=========== printInclusive ==============");
      React.addons.Perf.printInclusive();
      console.log("=========== printInclusive with measurements ==============");
      React.addons.Perf.printInclusive(measurements);
      console.log("=========== printExclusive ==============");
      React.addons.Perf.printExclusive();
      console.log("=========== printWasted ==============");
      React.addons.Perf.printWasted();
    });
  },
  render: function() {
    return (
      <div>
        <button onClick={this.onClick}>load</button>
        <List items={this.state.items} />
      </div>
    );
  }
});

var List = React.createClass({
  render: function() {
    var items = this.props.items.map(function(item) {
      return <Item key={item.id} item={item} />;
    });
    return <div>{items}</div>;
  }
});

var Item = React.createClass({
  render: function() {
    return <div>{this.props.item.name}</div>
  }
});

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