vhtml Demo

by Warwick Grigg

HTML

<script src="https://npmcdn.com/vhtml"></script>

Babel + JSX

/** @jsx vhtml */

let items = ['one', 'two', 'three'];

/*
document.body.innerHTML = (
	<div class="foo">
		<h1>Hi!</h1>
		<p>Here is a list of {items.length} items:</p>
		<ul>
			{ items.map( item => (
				<li>{ item }</li>
			)) }
		</ul>
	</div>
);
*/

document.body.innerHTML = `
	<div class="foo">
		<h1>Hi!</h1>
    <p> text
    	<a onclick="console.log('Click!')">these three words</a>.
    </p>
		<p>Here is a list of ${items.length} items:</p>
		<ul>
			${items.map(item =>`<li>${item}</li>`).join(" ")}
		</ul>
	</div>`
;