一、项目启动

了解需求背景
了解业务流程

二、项目搭建初始化

使用脚手架 create-react-app 初始化了项目

create-react-app project-demo --typescript

yarn

ESlint 语法检测

vscode 扩展中搜索 ESLint 并安装，项目根目录新建 .eslintrc.js。设置eslint的一些规则。

.eslintrc.js 最实用的配置及详解

module.exports={
    root: true,
    env: {
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
    ],
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    parserOptions: {
        ecmaVersion: 2020,
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        indent: 'off',
        quotes: [2, 'single'],
        semi: [2, 'never'],
        // quotes: [0, 'single'],
        // semi: [0, 'never'],
        "react/prop-types": "off",
        "no-unused-vars":"off"
    },
}

添加 .gitignore

/node_modules
/build

添加.prettierrc

{
    "tabWidth": 4,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "all"
}

三、项目配置一（功能配置）

1. 安装项目常用依赖库

$ yarn add antd axios -S # UI 库 及工具库

$ yarn add react-router-dom redux react-redux redux-saga 
react-router react-router-dom connected-react-router 
react-router-config
history -S # 路由及状态管理

2.webpack 配置拓展很有必要

根目录新建 config-overrides.js，详细使用可访问：简书：React 之 config-overrides文件配置
安装

$ yarn add react-app-rewired customize-cra -D

修改 package.json 中启动项

// package.json
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
}

3.添加jsconfig.json

jsconfig.json的配置是tsconfig.json的子集。

有tsconfig.json既可

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

4.配置scss

在开发中，我们会有公共的scss文件，为了不用每个单独scss都引入公共scss，可以通过adjustStyleLoaders配置，添加公共的loader。

npm i sass@1.34.0 sass-loader@10.2.0 sass-resources-loader@2.2.1 -D

const webpack = require('webpack')
const {override,adjustStyleLoaders} = require('customize-cra');

module.exports = {
    webpack:override(
        adjustStyleLoaders(rule => {
            if (rule.test.toString().includes('scss')) {
                rule.use.push({
                    loader: require.resolve('sass-resources-loader'),
                    options: {
                        resources:'./src/style/public.scss'
                    }
                })
            }
        })
    )
}

6 配置开发代理

在 src 目录新建 setupProxy.js

% yarn add http-proxy-middleware@1.1.0

//http-proxy-middleware@2.0.1: The engine "node" is incompatible with this module. Expected version ">=12.0.0". Got "10.16.0"

// src/setupProxy.js
const proxy = require('http-proxy-middleware').createProxyMiddleware

module.exports = function(app) {
    // app 为 Express 实例，此处可以写 Mock 数据
    app.use(
        proxy('/api',
        {
            "target": "https://qpj-test.fapiaoer.cn",
            "changeOrigin": true,
            "secure": false,
            // "pathRewrite": {
            //   "^/api": ""
            // }
        })
    )
}

7 加入 polyfill 和 antd 组件国际化处理

//antd
import { ConfigProvider, Empty } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
import 'moment/locale/zh-cn'

// polyfill 不需要安装，直接引入
import 'core-js/stable'
import 'regenerator-runtime/runtime'

ReactDOM.render(
   <ConfigProvider locale={zhCN}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ConfigProvider>,
    document.getElementById('root')
)

别用babel-polyfill了，教你用core-js@3兼容IE浏览器

core-js 是babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。

core-js是什么

它是JavaScript标准库的polyfill
它尽可能的进行模块化，让你能选择你需要的功能
它可以不污染全局空间
它和babel高度集成，可以对core-js的引入进行最大程度的优化

8.实现组件懒加载 react-loadable

% yarn add react-loadable

9.处理 axios 拦截响应

 axios(config).then((res) => {
  console.log(res, 'then-res')
  if (res?.data?.meta?.code === 411) {
      console.log('logout')
      return Logout()
  } else {
        resolve(res?.data || {})
  }
}).catch(() => ({}))

10.处理 React router 的嵌套配置

11. 处理 React store

redux-saga

从 0 搭建一个React前端项目，我们要做什么？