import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { makeAutoObservable } from 'mobx' ; import { Observer , observer } from 'mobx-react' ; /**
 * Global Store
 */ class Store { count = 0 ; constructor ( ) { makeAutoObservable ( this ) ; } increment ( ) { this . count ++ ; } decrement ( ) { this . count -- ; } } const store = new Store ( ) ; /**
 * App Tree
 */ function App ( ) { return < Layout />; } function Layout ( ) { return ( < div className = "spacing-small" > < Counter /> < Report / > < /div>); } function Counter ( ) { return ( < div className = "horizontal-spacing" > < button onClick = { ( ) => store . decrement ( ) } className = "button" > Decrement < /button> < button onClick = { ( ) => store . increment ( ) } className = "button" > Increment < /button> < /div>); } function Report ( ) { return ( < Observer > { ( ) => ( < div > Count : { store . count } { } < /div>)} < /Observer>); } ReactDOM . render ( < App />, document.getElementById('root'));