Mobservable observables, compuated values, reactions demo

by Kamal Rawat

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>

CSS

button {
    cursor: pointer;
}

Babel + JSX

const observable = mobx.observable;
const computed = mobx.computed;
const observer = mobxReact.observer;

class Person {
  // observable state:
  @observable firstName = "Kamal";
  @observable lastName = "Rawat";
  @observable nickName;
  
  // computed values:
  @computed get fullName() {
    return this.firstName + " " + this.lastName;
  }
}

// reaction: React component that observers state
const profileView = observer(props => {
  if (props.person.nickName)
    return <div><strong>{props.person.nickName}</strong></div>
  else
    return <div>{props.person.fullName}</div>
});

// actions:
const michel = new Person();
React.render(React.createElement(profileView, { person: michel }), document.body);

setTimeout(() => michel.nickName = "kamalrawat", 5000)