React: Timer Example

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<div class="js-app"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
    color: #191919;
}

Babel + JSX

console.clear();

var Timer = React.createClass({
	getInitialState: function() {
    	return {
        	start: 0
        }
    },
    tick: function() {        
        this.setState({
        	start: this.state.start + 1
        });
    },
    componentDidMount: function() {
    	this.interval = setInterval(this.tick, 1000);
    },
    componentWillUnmount: function() {
    	clearInterval(this.interval);
    },
    render: function() {
    console.log(1)
        return (
        	<div>
              <h1>Hello, {this.state.start}</h1>
          </div>
    	)
    }
});
ReactDOM.render(<Timer />, document.body.querySelector('.js-app'));