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({ //create Timer component pass it configuration object
    getInitialState: function() { //function returning object, that becomes this.state
        return {
            secondsElapsed: Number(this.props.startTime) || 0
        };
    },
    tick: function() { //custom method
        this.setState({
            secondsElapsed: this.state.secondsElapsed + 1
        });
    },
    componentDidMount: function() {//lifecycle callback function
        this.interval = setInterval(this.tick, 1000);
    },
    componentWillUnmount: function() {//lifecycle callback function
        clearInterval(this.interval);
    },
    render: function() { //function returning React nodes using JSX
        return (
            <div>
                Seconds Elapsed: {this.state.secondsElapsed}
            </div>
        );
    }
});

ReactDOM.render(< Timer startTime = "60" / >, app); //pass startTime prop, used for state