首先我們來安裝mobx的兩個(gè)依賴
cnpm install mobx -S
cnpm install mobx-react -S
然后讓我們來寫一個(gè)簡(jiǎn)單的入門項(xiàng)目(記得安裝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;
運(yùn)行 npm start
圖1
emmmm,這就比較尷尬！Ｊ脸濉！
解決方法
npm run eject
在控制臺(tái)輸入蕊肥，如果成功在項(xiàng)目目錄會(huì)多出來個(gè)config的文件夾滑潘，否則會(huì)有錯(cuò)誤提示诗舰，如下一步圖
npm run eject
如果出現(xiàn)如下錯(cuò)誤
圖2
依次輸入如下命令蔓罚，再輸入npm run eject 即可解決 npm run eject 出現(xiàn)的問題，如果沒有出現(xiàn)問題則跳過此步
git add .
git commit -m "init"
打開package.json加入如下內(nèi)容
圖3
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
npm start運(yùn)行項(xiàng)目
一切順利＼ⅰ９澈А！Ｂ亮俊Ｌ纫佟！
圖4.png
