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/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

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

var TimeWaster = React.createClass({
  propTypes: {
    children: React.PropTypes.any,
    loops: React.PropTypes.number,
    onComplete: React.PropTypes.func,
    testFn: React.PropTypes.func,
    testProp: React.PropTypes.string,
  },
  getDefaultProps() {
    return {
      loops: 50,
      onComplete: (summary) => console.log(summary),
      testFn: () => Math.random(),
      testProp: 'data-test-prop',
    };
  },
  componentWillMount() {
    this.setTestProp();
  },
  componentDidMount() {
    this.runTest().then(() => this.endTest());
  },
  setTestProp(cb = () => {}) {
    const {testProp, testFn} = this.props;
    this.setState({
      [testProp]: testFn(),
    }, cb);
  },
  runTest() {
    let i = 0;
    React.addons.Perf.start();
    return new Promise((resolve) => {
      const execTest = () => {
        i++;
        setTimeout(() => {
          if (i < this.props.loops) {
            this.setTestProp(execTest);
          } else {
            React.addons.Perf.stop();
            resolve(React.addons.Perf);
          }
        }, 100);
      };
      execTest();
    });
  },
  endTest() {
    const measurements = React.addons.Perf.getLastMeasurements();
    const wasted = React.addons.Perf.getWasted(measurements);

    const summary = {};

    summary.hasWastedTime = function(component) {
      const result = find(wasted, (n) => n.key.indexOf(`> ${component}`));
      if (result) {
        return `${result.key} wasted ${result.inclusiveRenderDuration}ms across ${result.renderCount} renders`;
      }
      return false;
    };

    return this.props.onComplete(summary);
  },
  render() {
    const {children, testProp} = this.props;
    const testValue = this.state[testProp];
    const props = {};
    props[testProp] = testValue;
    return React.cloneElement(React.Children.only(children), props);
  }
});

ReactDOM.render(
  (
  	<TimeWaster...