使用 CRA 初始化项目环境

  1. 创建项目
1
npx create-react-app react01
  1. 按照业务规范整理项目目录

image.png

文件夹 作用
apis 接口
assets 静态资源
components 通用组件
pages 页面级组件
router 路由
store Redux状态
utils 工具函数

SCSS 预处理器

实现步骤

  1. 安装解析 sass 的包：npm i sass -D
  2. 创建全局样式文件：index.scss
1
2
3
4
5
6
body {
  margin: 0;
  div {
    color: blue;
  }
}

组件库 AntD

Ant Design 是由蚂蚁金服出品的社区使用最广的React PC端组件库，内置了常用的现成组件，可以帮助我们快速开发 PC管理后台项目

Ant Design

实现步骤

  1. 安装 antd 组件库：npm i antd
  2. 导入 Button 组件
  3. 在 Login 页面渲染 Button 组件进行测试

配置别名路径

项目背景：在业务开发过程中文件夹的嵌套层级可能会比较深，通过传统的路径选择会比较麻烦也容易出错，设置路径别名可以简化这个过程

路径编译配置：

  1. 安装 craco 工具包
  2. 增加 craco.config.js 配置文件
  3. 修改 scripts 命令
  4. 测试是否生效
1
npm i @craco/craco -D

craco.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

package.json的script部分：

1
2
3
4
5
6
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

使用场景：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
  },
  {
    path: '/login',
    element: <Login />,
  },
])

export default router

VsCode提示配置

实现步骤

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置

代码实现

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

说明：VSCode会自动读取jsconfig.json 中的配置，让vscode知道@就是src目录

路由鉴权

业务背景：封装 AuthRoute 路由鉴权高阶组件，实现未登录拦截，并跳转到登录页面

实现思路：判断本地是否有token，如果有，就返回子组件，否则就重定向到登录Login

实现步骤

  1. 在 components 目录中，创建 AuthRoute/index.jsx 文件
  2. 登录时，直接渲染相应页面组件
  3. 未登录时，重定向到登录页面
  4. 将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

代码实现

components/AuthRoute/index.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
import { getToken } from '@/utils'
import { Navigate } from 'react-router-dom'

const AuthRoute = ({ children }) => {
  const isToken = getToken()
  if (isToken) {
    return <>{children}</>
  } else {
    return <Navigate to="/login" replace />
  }
}

export default AuthRoute

src/router/index.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import AuthRoute from '@/components/Auth'


const router = createBrowserRouter([
  {
    path: '/',
    element: <AuthRoute><Layout /></AuthRoute>,
  },
  {
    path: '/login',
    element: <Login />,
  },
])

export default router

富文本编辑器

实现步骤

  1. 安装富文本编辑器
  2. 导入富文本编辑器组件以及样式文件
  3. 渲染富文本编辑器组件
  4. 调整富文本编辑器的样式

代码落地

  1. 安装 react-quill
1
npm i react-quill@2.0.0-beta.2
  1. 导入资源渲染组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

const Publish = () => {
  return (
    // ...
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 16 }}
    >
      <Form.Item
        label="内容"
        name="content"
        rules={[{ required: true, message: '请输入文章内容' }]}
      >
        <ReactQuill
          className="publish-quill"
          theme="snow"
          placeholder="请输入文章内容"
        />
      </Form.Item>
    </Form>
  )
}
  1. 配置编辑器高度
1
2
3
4
5
.publish-quill {
  .ql-editor {
    min-height: 300px;
  }
}

项目打包

打包指的是将项目中的源代码和资源文件进行处理，生成可在生产环境中运行的静态文件的过程

打包命令：npm run build

25.png

本地预览：

本地预览是指在本地通过静态服务器模拟生产服务器运行项目的过程

  1. 安装本地服务包 npm i -g serve
  2. serve -s ./build
  3. 浏览器中访问 http://localhost:3000

26.png

打包-配置路由懒加载

路由懒加载是指路由的JS资源只有在被访问时才会动态获取，目的是为了优化项目首次打开的时间

image.png

使用步骤

  1. 使用 lazy 方法导入路由组件
  2. 使用内置的 Suspense 组件渲染路由组件

代码实现

router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'

import AuthRoute from '@/components/Auth'

const Publish = lazy(() => import('@/pages/Publish'))
const Article = lazy(() => import('@/pages/Article'))
const Home = lazy(() => import('@/pages/Article'))


const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <AuthRoute>
        <Layout />
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={'加载中'}>
            <Home />
          </Suspense>
        )
      },
      {
        path: 'article',
        element: (
          <Suspense fallback={'加载中'}>
            <Article />
          </Suspense>
        )
      },
      {
        path: 'publish',
        element: (
          <Suspense fallback={'加载中'}>
            <Publish />
          </Suspense>
        )
      },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
])

export default router

打包-打包体积分析

业务背景

通过分析打包体积，才能知道项目中的哪部分内容体积过大，方便知道哪些包如何来优化

使用步骤

  1. 安装分析打包体积的包：npm i source-map-explorer
  2. 在 package.json 中的 scripts 标签中，添加分析打包体积的命令
  3. 对项目打包：npm run build（如果已经打过包，可省略这一步）
  4. 运行分析命令：npm run analyze
  5. 通过浏览器打开的页面，分析图表中的包体积

核心代码：

1
2
3
"scripts": {
  "analyze": "source-map-explorer 'build/static/js/*.js'",
}