---
description: React Web开发最佳实践与规范
---

# React Web开发规范

## 技术栈

- Typescript
- React
- Unocss
- Vite
- Zustant
- Mantine
- Tanstack Query

## 依赖管理

- 使用`pnpm`管理依赖

## 项目结构

- 项目整体结构如下:

    ```markdown
        $PROJECT_ROOT
        ├── src
        │   ├── $MODULE1 # 模块1
        │   ├── $MODULE2 # 模块2
        ├───├── App.tsx # 路由配置
        ├───├── main.tsx # 入口文件
        ├───├── uno.d.ts # unocss类型声明
        ├───├── vite-env.d.ts # vite类型声明
        ├── .env # 环境变量
        ├── .env.development # 开发环境变量
        ├── .env.production # 生产环境变量
        ├── .gitignore # git忽略文件
        ├── .cursorrules # cursor规则
        ├── .clinerules # 项目规范/ClineRules
        ├── .windsurfrules # 项目规范/WindsurfRules
    ```
- 采用模块化设计,每个模块位于`$PROJECT_ROOT/src`目录下,其结构如下:

    ```markdown
        $MODULE1
        ├── components  # 组件
        │   ├── Cmp1.tsx
        │   ├── index.ts
        ├── contexts  # 上下文
        │   ├── Ctx1.tsx
        │   ├── index.ts
        ├── layouts  # 布局
        │   ├── Layout1.tsx
        │   ├── index.ts
        ├── pages  # 页面
        │   ├── Page1.tsx
        │   ├── Page2.tsx
        ├── stores  # 状态管理
        │   ├── index.ts
        │   └── Store1.ts
        ├── schemas.ts  # 类型定义
        ├── consts.tsx  # 常量
        ├── api.ts  # 接口
        ├── index.ts  # 入口
        └── utils.ts  # 工具函数
    ```


## 样式

- 使用`unocss`作为样式框架
- 使用`mantine`作为组件库

## 图标

- 使用`react-icons`作为图标库

## 代码风格

- 所有`tsx`组件使用大驼峰命名法
- 所有`tsx`组件使用箭头函数定义


## 路由

- 使用`react-router`作为路由库
- 新增模块后，需要在`src/App.tsx`中注册模块


## 枚举

- 在`$MODULE/consts.tsx`中为枚举定义颜色映射以及转换为`mantine`的`Select Option`和`Tag`
