block by ramnathv 728b8979a876a2660cd2d8c1cb3fca49

Mithril + Mobx Hello World

Full Screen

index.html

<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

Mithril + Mobx Hello World.markdown

Mithril + Mobx Hello World
--------------------------


A [Pen](http://codepen.io/ramnathv/pen/WwaEyx) by [Ramnath Vaidyanathan](http://codepen.io/ramnathv) on [CodePen](http://codepen.io/).

[License](http://codepen.io/ramnathv/pen/WwaEyx/license).

script.babel

/** @jsx m */

const store = mobx.observable({
  userName: "Ramnath"
})

const Hello = {
  view(ctrl, props){
    return (
      <h2>Hello {props.store.userName}</h2>
    )
  }
}

mobx.autorun(() => 
  m.mount(
    document.getElementById("app"),
    <Hello store={store} />
  )
)

scripts

<script src="//npmcdn.com/mobx@2.1.0/lib/mobx.umd.js"></script>
<script src="//npmcdn.com/mithril@0.2.4/mithril.min.js"></script>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />