阶段重点

React和TypeScript集合使用的重点集中在 和存储数据/状态有关的Hook函数 以及 组件接口 的位置，这些地方最需要数据类型校验

CRA创建

使用CRA创建项目，并安装必要依赖，包括下列基础包

  1. Redux状态管理 -  @reduxjs/toolkit 、 react-redux
  2. 路由 - react-router-dom
  3. 时间处理 - dayjs
  4. class类名处理 - classnames
  5. 移动端组件库 - antd-mobile
  6. 请求插件 - axios

配置别名路径

1. 背景知识

  1. 路径解析配置（webpack），把 @/ 解析为 src/
  2. 路径联想配置（VsCode），VsCode 在输入 @/ 时，自动联想出来对应的 src/下的子级目录

image.png

2. 路径解析配置

配置步骤：

  1. 安装craco

    1
    npm i -D @craco/craco

  2. 项目根目录下创建配置文件

    1
    craco.config.js

  3. 配置文件中添加路径解析配置

  4. 包文件中配置启动和打包命令

image.png

3. 联想路径配置

配置步骤：

  1. 根目录下新增配置文件 - jsconfig.json
  2. 添加路径提示配置
1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions":{
    "baseUrl":"./",
    "paths":{
      "@/*":[
        "src/*"
      ]
    }
  }
}

数据Mock实现

在前后端分类的开发模式下，前端可以在没有实际后端接口的支持下先进行接口数据的模拟，进行正常的业务功能开发

1. 常见的Mock方式

image.png

2. json-server实现Mock

实现步骤：

  1. 项目中安装json-server

    1
    npm i -D json-server

  2. 准备一个json文件 （素材里获取）

  3. 添加启动命令

image.png

  1. 访问接口进行测试

Vite创建

Vite是一个框架无关的前端工具链工具，可以帮助我们快速创建一个 react+ts 的工程化环境出来，我们可以基于它做语法学习

Vite

1
npm create vite@latest react-typescript -- --template react-ts

安装依赖运行项目

1
2
3
4
5
# 安装依赖
npm i 

# 运行项目
npm run dev