ReactDOM + MobX

_README.md

create-react-app react-mobx-todo 
cd react-mobx-todo
yarn run eject
yarn add babel-preset-es2015 babel-preset-stage-1 babel-plugin-transform-decorators-legacy -D
yarn add mobx mobx-react mobx-remotedev -D

config／webpack.config.dev.js

・・・
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
          plugins: ["transform-decorators-legacy"],
          presets: ["es2015", "stage-1"]
        },
      },
・・・

src／App.js

import React, { Component } from 'react';
import { observer } from "mobx-react";
import './App.css';

@observer
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { task: "" };
  }

  handleChange = (event) => {
    this.setState({ task: event.target.value });
  }

  addTodo = () => {
    this.props.todoStore.addTodo(this.state.task);
    this.setState({ task: "" });
  }

  render() {
    const items = this.props.todoStore.todos.map((todo, i) => {
      return (
        <li key={ i }>
          <input
            type='checkbox'
            checked={ todo.completed }
            disabled='disabled' />
          { todo.task }
        </li>
      );
    });
    return (
      <div className="App">
        <div>
          <h1>Todo Report</h1>
          <p>{ this.props.todoStore.report }</p>
        </div>
        <div>
          <h1>Todo Form</h1>
          <input
            type="text"
            value={ this.state.task }
            onChange={ this.handleChange } />
          <input
            type="button"
            value="add"
            onClick={ this.addTodo } />
        </div>
        <div>
          <h1>Todo List</h1>
          <ul style={{ listStyleType: "none" }} >{ items }</ul>
        </div>
      </div>
    );
  }
}

export default App;

src／index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import TodoStore from './TodoStore';

const todoStore = new TodoStore();

ReactDOM.render(<App todoStore={todoStore} />, document.getElementById('root'));
registerServiceWorker();

src／TodoStore.js

import { observable, action, computed } from 'mobx';
import remotedev from 'mobx-remotedev/lib/dev'

@remotedev
export default class TodoStore {
  @observable todos = [];
  @observable pendingRequests = 0;

  @computed get completedTodosCount() {
    return this.todos.filter(todo => todo.completed === true).length;
  }

  @computed get report() {
    if (this.todos.length === 0) {
      return "<none>";
    } else {
      return `Next todo: "${this.todos[0].task}". ` +
        `Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }
  }

  @action addTodo(task) {
    this.todos.push({task, completed: false, assignee: null});
  }
}