MOBservable + React timer demo

The hello world of mobservable and react

by knrm720

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://npmcdn.com/mobx@%5E2.0.0/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

button {
    cursor: pointer;
}

JavaScript 1.7

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

mobx.action(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();
     }
}));

React.render(<TimerView appState={appState} />, document.body);