fe-boilerplate/src/index.tsx

41 lines
914 B
TypeScript
Raw Normal View History

2016-02-26 16:39:48 +01:00
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {observable} from 'mobx';
import {observer} from 'mobx-react';
import DevTools from 'mobx-react-devtools';
2016-02-26 16:39:48 +01:00
class AppState {
@observable timer = 0;
2016-02-26 16:39:48 +01:00
constructor() {
setInterval(() => {
this.timer += 1;
2016-02-26 16:39:48 +01:00
}, 1000);
}
2016-02-26 16:39:48 +01:00
resetTimer() {
this.timer = 0;
}
2015-09-15 08:10:14 +02:00
}
@observer
2016-02-26 16:39:48 +01:00
class TimerView extends React.Component<{appState: AppState}, {}> {
render() {
2016-02-26 16:39:48 +01:00
return (
<div>
<button onClick={this.onReset}>
Seconds passed: {this.props.appState.timer}
</button>
<DevTools />
</div>
);
}
onReset = () => {
this.props.appState.resetTimer();
2016-02-26 16:39:48 +01:00
}
};
const appState = new AppState();
ReactDOM.render(<TimerView appState={appState} />, document.getElementById('root'));