JSFiddle - React, Tailwind, and code Playground

by Daniel15

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<div id="container">

</div>
<hr />
<div id="log"></div>

Babel + JSX

let functionalRenderCount = 0;
function FunctionalTest(props) {
	log('FunctionalTest render ' + ++functionalRenderCount);
	return <div>Hello {props.name}</div>;
}

let pureRenderCount = 0;
class PureTest extends React.PureComponent {
	render() {
    log('PureTest render ' + ++pureRenderCount);
    return <div>Hello {this.props.name}</div>;
  }
}

class Container extends React.Component {
	render() {
  	return (
    	<div>
      	<FunctionalTest name="Daniel" />
        <PureTest name="Daniel" />
      </div>
    );
  }
}

var $log = document.getElementById('log')
function log(text) {
	$log.appendChild(document.createTextNode(text));
  $log.appendChild(document.createElement('br'));
}

for (var i = 0; i < 10; i++) {
	ReactDOM.render(
  	<Container />, 
    document.getElementById('container')
  );
}