Easy timer on ReactJS

by Anton Kolesnikov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div class="container" id="container">
</div>

CSS

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'

JavaScript 1.7

var Timer = React.createClass({
	getInitialState: function() {
  	return {timer: 0};
  },
  componentDidMount: function() {
  	setInterval(this.tick, 1000);
  },
  tick: function() {
  		var timer = new Date() - this.props.start;
    	this.setState({timer: Math.round(timer/1000)})
  },
  render: function() {
  	return <div>
    		Прошло секунд: {this.state.timer}
    	</div>
  }
});

ReactDOM.render( <Timer start={new Date()} /> ,
  document.getElementById('container')
);