React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Cody Lindley

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="app"></div>

Babel + JSX

var Timer = React.createClass({
    getInitialState: function() { 
		console.log('getInitialState lifecycle method ran!');
        return {secondsElapsed: Number(this.props.startTime) || 0};
    },
    tick: function() {
		console.log(ReactDOM.findDOMNode(this));
		if(this.state.secondsElapsed === 65){
			ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
			return;
		}
		this.setState({secondsElapsed: this.state.secondsElapsed + 1});
	},
    componentDidMount: function() {
		console.log('componentDidMount lifecycle method ran!');
		this.interval = setInterval(this.tick, 1000);
	},
    componentWillUnmount: function() {
		console.log('componentWillUnmount lifecycle method ran!');
		clearInterval(this.interval);
	},
    render: function() {
        return (<div>Seconds Elapsed: {this.state.secondsElapsed}</div>);
    }
});

ReactDOM.render(< Timer startTime = "60" / >, app);