andrewmcnamara/gist:62f05a456a8d29c2b7965442d8ce687b

## gistfile1.txt
<!DOCTYPE HTML>
<body>
<div id="app" />
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://npmcdn.com/mobx@2.2.2/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/mobx-react@3.3.0/index.js"></script>
<script src="https://npmcdn.com/mobx-react-devtools@4.2/index.js"></script>
<script id="jsbin-javascript">
"use strict";
var appState = mobx.observable({
  todos: [{
    title: "Create MobX intro video",
    done: false
  }, {
    title: "Take a nap",
    done: true
  }],
  left: function left() {
    return this.todos.filter(function (todo) {
      return !todo.done;
    }).length;
  }
});
var Todos = mobxReact.observer(function (_ref) {
  var appState = _ref.appState;
  return React.createElement(
    "div",
    null,
    React.createElement(
      "ul",
      null,
      appState.todos.map(function (todo, idx) {
        return React.createElement(Todo, { todo: todo, key: idx });
      })
    ),
    "Remaining: ",
    appState.left,
    React.createElement(mobxDevtools["default"], null)
  );
});
var Todo = mobxReact.observer(function (_ref2) {
  var todo = _ref2.todo;
  return React.createElement(
    "li",
    null,
    React.createElement("input", {
      type: "checkbox",
      checked: todo.done,
      onChange: function () {
        return todo.done = !todo.done;
      }
    }),
    todo.title
  );
});
ReactDOM.render(React.createElement(Todos, { appState: appState }), document.getElementById('app'));
</script>


<script id="jsbin-source-javascript" type="text/javascript">var appState = mobx.observable({
  todos: [
    {
      title: "Create MobX intro video",
      done: false
    },
    {
      title: "Take a nap",
      done: true
    }
  ],

  left: function() {
    return this.todos.filter(todo => !todo.done).length
  }
})
const Todos = mobxReact.observer(({appState}) =>
  <div>
    <ul>
    { appState.todos.map((todo, idx) =>
        <Todo todo={todo} key={idx} />
    ) }
    </ul>
    Remaining: {appState.left}
    <mobxDevtools.default />
  </div>
)
const Todo = mobxReact.observer(({todo}) =>
  <li>
    <input
      type="checkbox"
      checked={todo.done}
      onChange={() => todo.done = !todo.done}
    />
    {todo.title}
  </li>
)
ReactDOM.render(
  <Todos appState={appState} />,
  document.getElementById('app')
)</script></body>
	<!DOCTYPE HTML>
	<body>
	<div id="app" />
	<script src="https://fb.me/react-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	<script src="https://npmcdn.com/mobx@2.2.2/lib/mobx.umd.js"></script>
	<script src="https://npmcdn.com/mobx-react@3.3.0/index.js"></script>
	<script src="https://npmcdn.com/mobx-react-devtools@4.2/index.js"></script>
	<script id="jsbin-javascript">
	"use strict";
	var appState = mobx.observable({
	todos: [{
	title: "Create MobX intro video",
	done: false
	}, {
	title: "Take a nap",
	done: true
	}],
	left: function left() {
	return this.todos.filter(function (todo) {
	return !todo.done;
	}).length;
	}
	});
	var Todos = mobxReact.observer(function (_ref) {
	var appState = _ref.appState;
	return React.createElement(
	"div",
	null,
	React.createElement(
	"ul",
	null,
	appState.todos.map(function (todo, idx) {
	return React.createElement(Todo, { todo: todo, key: idx });
	})
	),
	"Remaining: ",
	appState.left,
	React.createElement(mobxDevtools["default"], null)
	);
	});
	var Todo = mobxReact.observer(function (_ref2) {
	var todo = _ref2.todo;
	return React.createElement(
	"li",
	null,
	React.createElement("input", {
	type: "checkbox",
	checked: todo.done,
	onChange: function () {
	return todo.done = !todo.done;
	}
	}),
	todo.title
	);
	});
	ReactDOM.render(React.createElement(Todos, { appState: appState }), document.getElementById('app'));
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var appState = mobx.observable({
	todos: [
	{
	title: "Create MobX intro video",
	done: false
	},
	{
	title: "Take a nap",
	done: true
	}
	],

	left: function() {
	return this.todos.filter(todo => !todo.done).length
	}
	})
	const Todos = mobxReact.observer(({appState}) =>
	<div>
	<ul>
	{ appState.todos.map((todo, idx) =>
	<Todo todo={todo} key={idx} />
	) }
	</ul>
	Remaining: {appState.left}
	<mobxDevtools.default />
	</div>
	)
	const Todo = mobxReact.observer(({todo}) =>
	<li>
	<input
	type="checkbox"
	checked={todo.done}
	onChange={() => todo.done = !todo.done}
	/>
	{todo.title}
	</li>
	)
	ReactDOM.render(
	<Todos appState={appState} />,
	document.getElementById('app')
	)</script></body>