Introduced MobX counter

package.json

@@ -6,6 +6,9 @@
     "react-scripts": "0.2.3"
   },
   "dependencies": {
+    "mobx": "^2.5.0",
+    "mobx-react": "^3.5.5",
+    "mobx-react-devtools": "^4.2.5",
     "react": "^15.3.1",
     "react-dom": "^15.3.1"
   },

src/App.js

@@ -1,21 +1,33 @@
 import React, { Component } from 'react';
+import { observer } from 'mobx-react'
+import DevTools from 'mobx-react-devtools';
 import logo from './logo.svg';
 import './App.css';
 
 class App extends Component {
   render() {
+    const {counter} = this.props;
     return (
       <div className="App">
         <div className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+          <h2>Welcome to React + MobX</h2>
         </div>
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <p>
+          Counter:
+          <span className={counter.isOdd ? 'Counter-odd' : 'Counter-even'}> {counter.count} </span>
+        </p>
+        <p>
+          <button onClick={() => counter.increment()}> + </button>
+          <button onClick={() => counter.decrement()}> - </button>
+        </p>
+        <DevTools />
       </div>
     );
   }
 }
 
-export default App;
+export default observer(App);

src/Counter.js

@@ -0,0 +1,20 @@
+import { extendObservable, computed } from 'mobx';
+
+class Counter {
+  constructor() {
+    extendObservable(this, {
+      count: 0,
+      isOdd: computed(() => this.count % 2 === 1)
+    });
+  }
+
+  increment() {
+    this.count++;
+  }
+
+  decrement() {
+    this.count--;
+  }
+}
+
+export default Counter;

src/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Counter from './Counter';
 import App from './App';
 import './index.css';
 
 ReactDOM.render(
-  <App />,
+  <App counter={new Counter()} />,
   document.getElementById('root')
 );