Inferno Simple Clock demo (JSX)
Starting point for creating JSFiddles with Inferno. This uses Inferno.
HTML
<script src="https://rawgit.com/trueadm/inferno/master/browser/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inferno/1.2.2/inferno.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inferno/1.2.2/inferno-component.min.js"></script>
<script src="https://cdn.rawgit.com/trueadm/inferno/master/browser/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
JavaScript 1.7
// normally these would be come in the form of ES2015 import statements
const { render, Component } = Inferno;
class Clock extends Component {
constructor() {
super();
// set initial time:
this.state = {
time: Date.now()
};
}
componentDidMount() {
// update time every second
this.timer = setInterval(() => {
this.setState({ time: Date.now() });
}, 1000);
}
componentWillUnmount() {
// stop when not renderable
clearInterval(this.timer);
}
render() {
let time = new Date(this.state.time).toLocaleTimeString();
return <span>{ time }</span>;
}
}
// render an instance of Clock into <body>:
render(<Clock />, document.getElementById('container'));