cpq/preact-es3.html

## preact-es3.html
<!DOCTYPE html>
<html>

<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/history/umd/history.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/preact"></script>
  <script src="https://unpkg.com/preact-router"></script>
</head>

<body>
  <script>
    'use strict';
    var h = preact.h;
    var authCookieName = 'meinZwieback';

    var createClass = 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 Navbar = function(props) {
      return h('nav', {class: 'navbar navbar-expand-lg navbar-light bg-light'},
        h('a', {class: 'navbar-brand', href: '#'},
          h('img', {src: 'https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg', width: 30, height: 30})),
          h('div', {class: 'collapse navbar-collapse'},
            h('ul', {class: 'navbar-nav'},
              h('li', {class: 'nav-item'}, h('a', {class: 'nav-link active', href: ''}, 'page1')),
              h('li', {class: 'nav-item'}, h('a', {class: 'nav-link', href: '#page2'}, 'page2')),
            )
          )
        );
    };

    var Page1 = function(props) {
      return h('div', {class: 'container'}, h(Navbar, props), h('div', {}, 'page1...'));
    };

    var Page2 = function(props) {
      return h('div', {class: 'container'}, h(Navbar, props), h('div', {}, 'page2...'));
    };

    var App = createClass({
      init: function(props) {
        var self = this;
        this.state = {token: ''};
      },
      componentDidMount: function() {
      },
      render: function(props, state) {
        return h(
            'div', {class: 'page h-100'},
            h(preactRouter.Router, {history: History.createHashHistory()},
              h(Page1, {state: state, default: true}),
              h(Page2, {path: 'page2'})));
      },
    });

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

</html>
	<!DOCTYPE html>
	<html>

	<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/history/umd/history.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/preact"></script>
	<script src="https://unpkg.com/preact-router"></script>
	</head>

	<body>
	<script>
	'use strict';
	var h = preact.h;
	var authCookieName = 'meinZwieback';

	var createClass = 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 Navbar = function(props) {
	return h('nav', {class: 'navbar navbar-expand-lg navbar-light bg-light'},
	h('a', {class: 'navbar-brand', href: '#'},
	h('img', {src: 'https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg', width: 30, height: 30})),
	h('div', {class: 'collapse navbar-collapse'},
	h('ul', {class: 'navbar-nav'},
	h('li', {class: 'nav-item'}, h('a', {class: 'nav-link active', href: ''}, 'page1')),
	h('li', {class: 'nav-item'}, h('a', {class: 'nav-link', href: '#page2'}, 'page2')),
	)
	)
	);
	};

	var Page1 = function(props) {
	return h('div', {class: 'container'}, h(Navbar, props), h('div', {}, 'page1...'));
	};

	var Page2 = function(props) {
	return h('div', {class: 'container'}, h(Navbar, props), h('div', {}, 'page2...'));
	};

	var App = createClass({
	init: function(props) {
	var self = this;
	this.state = {token: ''};
	},
	componentDidMount: function() {
	},
	render: function(props, state) {
	return h(
	'div', {class: 'page h-100'},
	h(preactRouter.Router, {history: History.createHashHistory()},
	h(Page1, {state: state, default: true}),
	h(Page2, {path: 'page2'})));
	},
	});

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

	</html>