App.jsx

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import DevTools from 'mobx-react-devtools';

@observer
export default class App extends Component {
  state = {
    value: '',
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.props);
    const { appState: { posts: { addPost } } } = this.props;
    addPost({ title: this.state.value });
    this.input.value = '';
  };

  onChange = ({ target: { value } }) => this.setState({ value });

  input = null;

  renderPosts() {
    const { appState: { posts: { posts } } } = this.props;
    return posts.map(({ body, title }) => (
      <div>
        <h1>{title}</h1>
        <p>{body}</p>
      </div>
    ))
  }

  render() {
    const { appState: { posts: { posts } } } = this.props;
    return (
      <div>
        <h1>Hello</h1>
        <div>You have {posts.length} posts</div>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            onChange={this.onChange}
            ref={e => { this.input = e; }}
          />
        </form>
        {this.renderPosts()}
        <DevTools />
      </div>
    );
  }
}

AppState.js

// app/AppState.js
import { observable } from 'mobx';
import PostsStore from 'app/stores/PostsStore';

export default class AppState {
  posts = new PostsStore();
}

index.jsx

// app/index.jsx
import React from 'react';
import AppState from 'app/AppState';

const appState = new AppState();

async function bootstrap(Component: React.Component<any>) {
  const { render } = await import('react-dom');
  const { AppContainer } = await import('react-hot-loader');
  const target = document.getElementById('root');

  render(
    <AppContainer>
      <Component appState={appState} />
    </AppContainer>,
    target
  );
}

import('app/components/Root')
  .then(({ default: Root }) => bootstrap(Root));

  if (module.hot) {
    module.hot.accept('app/components/Root', async () => {
      const { default: NextRoot } = await import('app/components/Root');
      bootstrap(NextRoot);
    });
  }

PostsStore.js

// app/stores/PostsStore.js
import { observable } from 'mobx';

export default class PostsStore {
  @observable posts = [];

  addPost = ({ title = '[Untitled]', body = '' }) => {
    this.posts.push({
      title,
      body,
      createdAt: Date.now(),
    });
  }
}

Root.jsx

import React from 'react';
import App from 'app/components/App';

export default function Root({ appState }) {
  return (<App appState={appState} />);
}