在react和react-native配置mobx
什么是mobx
既然说到要配置mobx,那就要先说说什么是mobx,mobx是一个强大的全局资源管理器,与rudex一样。mobx有着强大的性能和良好的用户体验,如果你是一个刚刚学习react的小白,面对rudex毫无头绪的时候,不如来试试mobx吧
react
先说说在react里面怎么使用mobx,使用的mobx的使用虽然可以使用es6语法,但是使用还没被收入es7中的@装饰符,能够使代码更加简洁。但是现在js还不能识别@装饰符。下面我们就来看看咱们解决这个问题。
第一步
第一步当然是下载mobx啦
//下载mobx和mobx-react
yarn add mobx mobx-react
第二步
装好了mobx,我们就需要安装一下能够识别@装饰符的插件
//下载识别@装饰符的插件
yarn add @babel/plugin-proposal-decorators --dev
第三步
最后只需要配置一下就可以了,当然首先还是要释放出react的配置文件,具体的释放react配置文件的方法,可以看一下这篇文章:react小白的成长之路(一)react官方脚手架中不支持less的解决方案
只需要在webpack.config.js里面的348行后面的逗号加上这句话
//在webpack.config.js的348行左右加上这句
["@babel/plugin-proposal-decorators", {"legacy": true }]
这样就搞定了
为了防止大家找不见,我特意截了图,加的时候一定要认真哦
react-native
react-native是个好东西啊,虽然现在还没有很稳定,时不时会出现各种各样的问题,但是开发速度足够快,一次开发安卓和ios双平台支持的优势,还能让像我一样的没有学习过java的孩子体验一下开发app的快感,还是可以肯定的,最棒的是它的语法和react几乎一模一样。
既然react-native和react的语法差不多,那么配置的步骤也差不多,前两不更是一模一样。
第一步
//下载mobx和mobx-react
yarn add mobx mobx-react
//下载识别@装饰符的插件
yarn add @babel/plugin-proposal-decorators --dev
第二步
这一步就是配置一下啦,首先要在你要配置的项目的根目录下面创建一个 .babelrc 文件,然后在这个文件里面写入下面的东西就好啦
//要先创建.babelrc文件之后,在这个文件里面加入下面的代码
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
这样就完成啦!!!赶紧重启一下项目试一试吧