Preact ES3/5

by Jason Miller

HTML

<script src="https://npmcdn.com/preact@latest/dist/preact.js"></script>

JavaScript

var h = preact.h;

// To use Classful Components in ES3/5,
// grab your favorite inheritance technique.
// Here's an example:
function createClass(obj) {
	function F(){ preact.Component.call(this); }
	var p = F.prototype = Object.create(preact.Component.prototype);
	for (var i in obj) p[i] = obj[i];
	return p.constructor = F;
}


// Example classful component:
var App = createClass({
	componentDidMount: function() {
		this.setState({ message:'Hello!' });
	},
	render: function(props, state) {
		return (
			h('div', {id:'app'},
				h(Header, { message: state.message }),
				h(Main)
			)
		);
	}
});

// components can just be functions too:
var Header = function(props) {
	return h('header', null,
		h('h1', null, 'App'),
		props.message ? h('h2',null,props.message) : null
	);
}

var Main = createClass({
	render: function() {
		var items = [1,2,3,4,5].map( function(item) {
			return h('li', {id:item}, 'Item '+item);
		});
		return (
			h('main', null,
				h('ul', null, items)
			)
		);
	}
});

preact.render(h(App), document.body);