cpq/minimal-preact-es3.html

## minimal-preact-es3.html
<!DOCTYPE html>
<html class="h-100">

<head>
  <title>Preact with JS3</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/preact"></script>
</head>

<body class="h-100 bg-dark">
  <script>
    'use strict';
    var h = preact.h;
    var App;

    var createComponent = function (obj) {
      function F() {
        preact.Component.apply(this, arguments);
        if (obj.init) obj.init.call(this, this.props);
      }
      var p = F.prototype = Object.create(preact.Component.prototype);
      for (var i in obj) p[i] = obj[i];
      return p.constructor = F;
    };

    var Page = function () {
      return h('div', { class: 'bg-warning w-100 text-center jumbotron mx-5' },
        App.state.quote);
    };

    App = createComponent({
      init: function (props) {
        this.state = { quote: 'Press space to refresh the quote' };
        App = this;
      },
      render: function (props, state) {
        return h('div', {
          class: 'p-5 h-100 container-fluid',
          tabIndex: 0,
        },
          h('div', { class: 'h-100 bg-light d-flex align-items-center' }, h(Page)));
      },
    });

    preact.render(h(App), document.body);
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html class="h-100">

	<head>
	<title>Preact with JS3</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/preact"></script>
	</head>

	<body class="h-100 bg-dark">
	<script>
	'use strict';
	var h = preact.h;
	var App;

	var createComponent = function (obj) {
	function F() {
	preact.Component.apply(this, arguments);
	if (obj.init) obj.init.call(this, this.props);
	}
	var p = F.prototype = Object.create(preact.Component.prototype);
	for (var i in obj) p[i] = obj[i];
	return p.constructor = F;
	};

	var Page = function () {
	return h('div', { class: 'bg-warning w-100 text-center jumbotron mx-5' },
	App.state.quote);
	};

	App = createComponent({
	init: function (props) {
	this.state = { quote: 'Press space to refresh the quote' };
	App = this;
	},
	render: function (props, state) {
	return h('div', {
	class: 'p-5 h-100 container-fluid',
	tabIndex: 0,
	},
	h('div', { class: 'h-100 bg-light d-flex align-items-center' }, h(Page)));
	},
	});

	preact.render(h(App), document.body);
	</script>
	</body>

	</html>