使用脚手架搭建一个React-App

1.一个React App需要安装的包

(1) React

npx create-react-app app-name

---

(2) 支持高阶组件等@装饰器

react-app-rewired

npm install react-app-rewired --save-dev

customize-cra

npm install customize-cra --save-dev

@babel/plugin-proposal-decorators

npm install --save-dev @babel/plugin-proposal-decorators

---

(3) 支持axios

npm install axios --save

---

(4) 支持redux

redux

npm install redux --save

react-redux

npm install react-redux --save

middleware ——thunk

用于支持异步action

npm install redux-thunk --save

(5) react-router

npm install react-router-dom --save

(6) antd

npm install antd --save
npm install babel-plugin-import -D

支持less

npm isntall less less-loader --save-dev

创建theme.js文件

module.exports = {
    '@primary-color': '#F00'
}

修改config-overrides.js文件

const { override, fixBabelImports, addLessLoader } = require('customize-cra')
const theme = require('./theme')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        // style:'css',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,

        modifyVars: theme
    })
)

(7) loadable

用于按需加载路由

npm install react-loadable --save

（8）支持跨域

npm install http-proxy-middleware --save

在src下新建setupProxy.js文件，内容如下：

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(proxy('/_api', {
    target: 'http://localhost:8081/',
    changeOrigin: true,
    pathRewrite: {
      "^/_api": "/"
     }
  }))

}

---

总结

1.需要--save安装的包

npm i axios redux react-redux redux-thunk react-router-dom antd react-loadable -S

2.需要--save-dev安装的包

npm i react-app-rewired customize-cra @babel/plugin-proposal-decorators babel-plugin-import less less-loader -D

3.需要创建的文件

config-overrides.js

const { override, addLessLoader, fixBabelImports, addDecoratorsLegacy } = require('customize-cra')
const modifyVars = require('./lessVars')

module.exports = override(    
    // 使用antd
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    // Less支持
    addLessLoader({
        javascriptEnable: true,
        modifyVars: modifyVars
    }),
    // 装饰器支持
    addDecoratorsLegacy()
)

theme.js

用于存放antd 的主题配置

module.exports = {
    '@primary-color': '#F00'
}