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

最新推荐文章于 2023-05-06 14:52:06 发布

DxCaesar

最新推荐文章于 2023-05-06 14:52:06 发布

阅读量217

点赞数

分类专栏： React 文章标签： reactjs 前端

本文链接：https://blog.csdn.net/DxCaesar/article/details/104276373

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了搭建React应用程序所需的各类包安装步骤，包括React核心库、高阶组件支持、axios、redux及其中间件、react-router、antd UI库、按需加载组件loadable、跨域代理设置及主题定制等，为开发者提供全面的React应用构建参考。

摘要由CSDN通过智能技术生成

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