Mobx Examples

.babelrc

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

demo.js

var mobx = require('mobx');

var person = mobx.observable({
  firstName: 'John',
  lastName: 'Gotti',

  fullName: function () {
    console.log('-> Computed fullName!');
    return [this.firstName, this.lastName].join(' ');
  }
})

mobx.autorun(function () {
  console.log('First name:', person.firstName);
  console.log('Last name:', person.lastName);

  for (var i = 0; i < 10; i++) {
    console.log(person.fullName);
  }

  person.firstName = 'Teflon';
  person.lastName = 'Don';

  for (var i = 0; i < 10; i++) {
    console.log(person.fullName);
  }
});

next.js

import { observable, computed, autorun } from 'mobx';

class Person {
  @observable firstName;
  @observable lastName;

  constructor (firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  @computed get fullName () {
    console.log('-> Computed fullName!');
    return `${this.firstName} ${this.lastName}`;
  }
}

const person = new Person('John', 'Gotti');

autorun(() => {
  console.log('First name:', person.firstName);
  console.log('Last name:', person.lastName);

  for (var i = 0; i < 10; i++) {
    console.log(person.fullName);
  }

  person.firstName = 'Teflon';
  person.lastName = 'Don';

  for (var i = 0; i < 10; i++) {
    console.log(person.fullName);
  }
});

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "demo": "node demo.js",
    "next": "babel-node next.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.18.0",
    "mobx": "^2.6.3"
  }
}