ariesmcrae/mobx 1

## mobx 1
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React Counter</title>
</head>
<body>
  <br/><br/>

  <div id="app"></div>

  <script src="https://cdn.jsdelivr.net/g/react@15.4.2(react.min.js+react-dom.min.js),lodash@4.17.4"></script>
  <script src="https://unpkg.com/mobx@3.0.1/lib/mobx.umd.min.js"></script>
  <script src="https://unpkg.com/mobx-react@4.1.0/index.js"></script>
  <script src="https://npmcdn.com/mobx-react-devtools"></script>
</body>
</html>


const {observable} = mobx;
const {observer} = mobxReact;
const {Component} = React;

const appState = observable({
  count: 0
});

appState.increment = function() {
  this.count++;
}

appState.decrement = function() {
  this.count--;
}

@observer class Counter extends Component {
  render() {
    return (
      <div>
        Counter: {appState.count} <br/>
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    );
  }

  handleInc = () => {
    appState.increment();
  }

  handleDec = () => {
    appState.decrement();
  }

}

ReactDOM.render(
  <Counter store={appState} />,
  document.getElementById('app')
);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React Counter</title>
	</head>
	<body>
	<br/><br/>

	<div id="app"></div>

	<script src="https://cdn.jsdelivr.net/g/react@15.4.2(react.min.js+react-dom.min.js),lodash@4.17.4"></script>
	<script src="https://unpkg.com/mobx@3.0.1/lib/mobx.umd.min.js"></script>
	<script src="https://unpkg.com/mobx-react@4.1.0/index.js"></script>
	<script src="https://npmcdn.com/mobx-react-devtools"></script>
	</body>
	</html>


	const {observable} = mobx;
	const {observer} = mobxReact;
	const {Component} = React;

	const appState = observable({
	count: 0
	});

	appState.increment = function() {
	this.count++;
	}

	appState.decrement = function() {
	this.count--;
	}

	@observer class Counter extends Component {
	render() {
	return (
	<div>
	Counter: {appState.count} <br/>
	<button onClick={this.handleInc}> + </button>
	<button onClick={this.handleDec}> - </button>
	</div>
	);
	}

	handleInc = () => {
	appState.increment();
	}

	handleDec = () => {
	appState.decrement();
	}

	}

	ReactDOM.render(
	<Counter store={appState} />,
	document.getElementById('app')
	);