Mobx Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="//npmcdn.com/[email protected]/index.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<div class="container">
  <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
const {autorun} = mobx

var map = mobx.map({})
map.set("x", 2)
map.set("y", () => {return map.get("x")})
map.merge({z: 5})

console.log(map.get("y")())

debugger;
var a = mobx.array();

class Store {
  @observable price = 1
  @observable amount = 1
  @observable x = [1, 2, 3]
  @computed get total(){
    return this.price * this.amount
  }
}

const store = new Store()
console.log(store.x.toJSON())


var Store2 = function(price, amount){
  extendObservable(this, {
    price: 1,
    amount: 1,
    total: () => this.price*this.amount
  })
}

var store2 = observable({
  price: 1,
  amount: 1,
  total: function(){
    return this.price*this.amount
  }
})

var store3 = observable({})
var x = {
  price: 2,
  amount: 1,
  total: function(){
    return this.price*this.amount
  }
}
extendObservable(store3, x)

console.log("Price is: ")
console.log(store3.price)
console.log(mobx.isObservable(store3, 'price'))

//const store2 = new Store2()