美文网首页
create-react-app + mobx + yarn 架

create-react-app + mobx + yarn 架

作者: 赖次Go | 来源:发表于2018-05-30 15:16 被阅读0次

    Javascript :

    react , mobx , mobx-react , yarn , react-app-rewired , react-app-rewire-mobx

    一丶Mobx 介绍

    Mobx是一个功能强大,上手非常容易的状态管理工具。就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux。
    本教程旨在介绍其,并重点介绍其与React的搭配使用,可以让你使用react像vue那样简单
    搭上即用,简单易上手!


    二 、起步

    首先必备 :node npm
    terminal(命令行) 输入 yarn -v
    如果没有输出 请直接 npm install yarn -g

    1. yarn install create-react-app --save -g
    2. create-react-app react-mobx-demo
    3. yarn add react-app-rewire-mobx react-app-rewired mobx mobx-react --save
    4. 修改文件 package.json
    - //修改前
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
    + //修改后
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom",
        "eject": "react-app-rewired eject"
      }
    
    5. 新建js文件 config-overrides.js
    const { injectBabelPlugin } = require("react-app-rewired");
    const rewireMobX = require("react-app-rewire-mobx");
    
    module.exports = function override(config, env) {
      config = rewireMobX(config, env);
    
      return config;
    };
    

    我的Github———demo地址:
    https://github.com/wulibaibao/react-mobx-demo

    相关文章

      网友评论

          本文标题:create-react-app + mobx + yarn 架

          本文链接:https://www.haomeiwen.com/subject/eeatsftx.html