React Base Fiddle (JSX)

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

by Michel Weststrate

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var appState = mobx.observable({
    timer: 0
});

appState.resetTimer = function() {
    appState.timer = 0;
};

setInterval(function() {
    appState.timer += 1;
}, 1000);
        
var TimerView = mobxReact.observer(React.createClass({
     render: function() {
        return (<button onClick={this.onReset}>
        	Seconds passed: {this.props.appState.timer}
            </button>);
     },
     
     onReset: function() {
     	this.props.appState.resetTimer();
     }
}));

ReactDOM.render(<TimerView appState={appState} />, document.getElementById("container"));