Mac上安装create-react-app

Mac上安装create-react-app,经常出现安装不上，这里说一下办法：

方法一：

1. sudo npm install -g create-react-app
2. create-react-app my-react
3. cd my_code
4. npm start

方法二：

1. yarn global add create-react-app
2. create-react-app my-app
3. cd my_code
4. yarn start

安装redux

yarn add i redux -S 数据状态管理
yarn add i react-redux -S react和redux做整合
yarn add i redux-thunk -S 发送异步请求
yarn add i react-router-dom -S 视图跳转，路由
yarn add i axios -S 发送请求
yarn add i antd -S antdDesign UI库

antd去除多余组件

1. yarn add i react-app-rewired -D
2. 修改package.json的启动项配置
   “scripts”: {
   “start”: " react-app-rewired start",
   “build”: " react-app-rewired build",
   “test”: " react-app-rewired test",
   “eject”: “react-scripts eject”
   }
3. yarn add i babel-plugin-import -D

4. antd插件按需加载

在用antd-mobile时，需要配置按需加载，那自然就用到了 babel-import-plugin
那么在用到这个插件的时候，自然就想到要用 react-app-rewired 来覆盖配置。

react-scripts 升级到 2.1.2 以前：
（1）yarn add i babel-plugin-import -D
（2）项目根目录创建config-overrides.js 内容如下

const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config); return config; };

react-scripts 升级到 2.1.2 和以后安装：
（1）yarn add i customize-cra -D
（2）项目根目录创建config-overrides.js 内容如下

const {
  override,
  fixBabelImports,
  // addLessLoader,
} = require("customize-cra");
 
 
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
  }),
  // addLessLoader({
  //   javascriptEnabled: true,
  //   modifyVars: { "@primary-color": "#1DA57A" }
  // })
);

5. 设置缓存文件