在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 }]

这样就搞定了

为了防止大家找不见，我特意截了图，加的时候一定要认真哦

屏幕截图(1).png

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 }]
  ]
}

这样就完成啦！！！赶紧重启一下项目试一试吧