React with only es5 features

by Carson Evans

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="app"></div>

JavaScript

var container = document.getElementById('app');
var h = React.createElement;

function Counter(props) {
  React.Component.constructor.call(this);
  this.state = { count: props.start || 0 };
  this.add = this.add.bind(this);
  this.sub = this.sub.bind(this);
}
Counter.prototype = Object.create(React.Component.prototype);
Counter.prototype.add = function() {
	this.setState({ count: this.state.count + 1 });
};
Counter.prototype.sub = function() {
	this.setState({ count: this.state.count - 1 });
};
Counter.prototype.render = function() {
	return h('div', null,
    h('button', { onClick: this.add }, '+'),
    ' ' + this.state.count + ' ',
    h('button', { onClick: this.sub }, '-')
  );
};

ReactDOM.render(h('div', null, 
	h(Counter, { start: 10 }),
  h(Counter, { start: -10 })
), container);