JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gcanti.github.io/resources/understanding-react-part-2/html.js"></script>
<section id="myapp"></section>
JavaScript
function counter(state, controller) {
return {
tag: 'div',
children: [
{
tag: 'span',
children: state.count
},
{
tag: 'button',
children: 'Click me!',
events: {
click: controller.increment
}
}
]
};
}
var node = document.getElementById('myapp');
// the reactive loop
function setState(state) {
unmountAtNode(node);
var controller = {
increment: function () {
setState({count: state.count + 1}); // next state
}
};
render(counter(state, controller), node);
}
setState({count: 0}); // start with an initial state