赞
踩
1.首先构建脚手架项目,(其他文件可删除只留如下目录文件)
create-react-app MobxApp
2.然后安装mobx, mobx-react
yarn add mobx mobx-react
3.## 重点来了(关于装饰器的配置)
经常遇到的装饰器@符号不被识别,怎么解决呢?
3.1 首先安装
customize-cra
react-app-rewired
@babel/plugin-proposal-decorators
yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev
3.2然后在package.json中添加配置
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"transform-decorators-legacy"
]
]
}
再更改package.json中的"scripts"部分
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
3.3然后在项目根目录新建config-overrides.js文件,再添加以下配置
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy()
)
4.这个时候我们便可以开始使用我们的mobx和装饰器了
4.1在index.js里可以是初始化状态
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
4.2在App.js里我们使用mobx和装饰器
import React, { Component } from 'react'; import { observer } from 'mobx-react' import { observable } from 'mobx' @observer class App extends Component { @observable count = 1 render() { return ( <div className="App" > {this.count} </div> ); } } export default App;
5.最后,我们的项目便可以跑起来了,yarn start正常运行项目
yarn start
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。