React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/benchmark.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://unpkg.com/[email protected]/platform.js"></script>
<script src="https://unpkg.com/[email protected]/benchmark.js"></script>
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class TestClass extends React.Component {
  render() {
    return (
      <div>
        Hello from class component number ${ this.props.number }
      </div>
    )
  }
}
class AppClass extends React.Component {
  render() {
    return (
      <div className="App">
          {new Array(1000).fill().map((e, i) => <TestClass key={i} number={i} />)}
      </div>
    );
  }
}


function TestStateless (props) {
	return <div>Hello from stateless component ${ props.number }</div>
}
class AppStateless extends React.Component {
  render() {
    return (
      <div className="App">
          {new Array(1000).fill().map((e, i) => <TestStateless key={i} number={i} />)}
      </div>
    );
  }
}



let RESULTS = window.RESULTS = [];
const suite = new window.Benchmark.Suite();


function suite1() {
    ReactDOM.render(<AppStateless />, document.getElementById('root'));
}
function suite2() {
    ReactDOM.render(<AppClass />, document.getElementById('root'));
}

suite
    .add('React Class', suite1)
		.add('React Stateless', suite2)
    .add('React Class #2', suite1)
    .add('React Stateless #2', suite2)
    .add('React Class #3', suite1)
    .add('React Stateless #3', suite2)
    .on('cycle', function(event) {
        window.RESULTS.push( {"name": event.target.name, "speed": event.target.hz} );
        console.log(String(event.target));
    })
    .on('complete', function() {
        let RESULTS = window.RESULTS;
        console.log('%c Fastest is ' + this.filter('fastest').map('name'), 'color: yellow');

        for (var i=RESULTS.length; i>0;) {
            RESULTS[--i].rel = RESULTS[i].speed / RESULTS[--i].speed;
        }
        console.log(RESULTS);
    })
    .run({ 'async': true });

/* ReactDOM.render(
  <Hello name="Worlds" />,
  document.getElementById('container')
); */