首先我们来安装mobx的两个依赖

cnpm install mobx -S
cnpm install mobx-react -S

然后让我们来写一个简单的入门项目(记得安装react脚手架)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'mobx-react'

const todos = []
todos.push({id: 1, title: 'Task1'})
todos.push({id: 2, title: 'Task2'})

ReactDOM.render(
  <Provider>
      <App store={ todos } />
  </Provider>,
  document.getElementById('root')
);

App.js

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

@observer
@inject("store")
class App extends Component{
  render() {
    const { store } = this.props;
    return (
        <div>
          <ul>
            {store.map(todo => <TodoView todo={todo} key={todo.id} />)}
          </ul>
        </div>
    )
  }
}

const TodoView = observer(({todo}) => {
  return <li>{todo.title}</li>
})

export default App;

运行 npm start

图1

emmmm,这就比较尴尬！！！

解决方法

npm run eject

在控制台输入，如果成功在项目目录会多出来个config的文件夹，否则会有错误提示，如下一步图
npm run eject

如果出现如下错误

图2

依次输入如下命令，再输入npm run eject 即可解决 npm run eject 出现的问题，如果没有出现问题则跳过此步

git add .
git commit -m "init"

打开package.json加入如下内容

图3

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  }

npm start运行项目

一切顺利！！！！！！

图4.png