Mobx + React Template

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mobx/2.4.3/mobx.umd.min.js"></script>
<script src="//npmcdn.com/[email protected]/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

Babel + JSX

const { observable, computed, extendObservable } = mobx;
const { observer } = mobxReact;
const { Component} = React;
const { render } = ReactDOM;

class Store {
  @observable text="Ramnath"
}

@observer
class App extends Component {
  render(){
    return (
      <h2>Hello {this.props.store.text}</h2>
    )
  }
}

const store = new Store()
render(
  <App store={ store } />,
  document.querySelector("#app")
)

const changeText = () => {
  store.text = "Jane Doe"
}

setTimeout(changeText, 1000)