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);
}
Object.assign(Counter.prototype, React.Component.prototype, {
	add: function() {
    this.setState({ count: this.state.count + 1 });
  },
  
  sub: function() {
    this.setState({ count: this.state.count - 1 });
  },

  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);