# react-practice

**Repository Path**: lztlzw/react-practice

## Basic Information

- **Project Name**: react-practice
- **Description**: React 个人练习后台管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 4
- **Created**: 2023-05-14
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

# react-practice

## 简介

这是一个 React 练习项目，基于 Vite + TypeScript 构建，用于学习和实践 React 开发的各种功能模块。项目集成了 Ant Design 组件库，并包含完整的路由配置、登录验证、样式隔离等常见企业级应用功能。

## 技术栈

- **前端框架**: React 18
- **构建工具**: Vite
- **语言**: TypeScript
- **UI 组件库**: Ant Design
- **路由**: React Router
- **样式**: SCSS / CSS Modules / Styled Components
- **代码规范**: ESLint + Husky

## 项目目录结构

```
src/
├── assets/               # 静态资源
│   ├── images/          # 图片资源
│   └── styles/          # 全局样式
├── components/           # 公共组件
│   ├── Form/           # 表单组件
│   └── Table/          # 表格组件
├── router/              # 路由配置
├── types/               # TypeScript 类型定义
├── utils/               # 工具函数
│   └── pages/          # 页面级工具
└── views/               # 页面组件
    ├── About/          # 关于页面（表格示例）
    ├── Error/          # 错误页面（404/505）
    ├── Files/          # 文件页面
    ├── Home/           # 首页（轮播、图表等）
    ├── Layout/         # 布局组件（侧边栏、头部等）
    ├── Login/          # 登录页面（含 Canvas 背景）
    ├── Page/           # 通用页面
    ├── SkeletonLoading/# 骨架屏示例
    ├── StyleIsolation/ # 样式隔离示例
    ├── Team/           # 团队页面
    ├── TestAntd/       # Ant Design 组件测试
    └── User/           # 用户相关页面
```

## 1. 环境要求

- Node.js: `16.18.0`（见 `/.nvmrc`）
- npm: `9.6.6`

## 2. 开发工具

- VSCode / Cursor

## 3. 启动与构建

```bash
# 安装依赖
npm install

# 本地开发
npm run dev

# 生产构建
npm run build
```

## 4. 功能模块

### 页面路由
- **首页 (Home)**: 轮播图、柱状图、饼图、用户信息、版本信息展示
- **关于 (About)**: GitHub Issues 表格示例
- **用户 (User)**: 用户列表、菜单表单
- **团队 (Team)**: 团队相关页面
- **文件 (Files)**: 文件管理页面
- **登录 (Login)**: Canvas 动态背景 + 表单验证
- **错误页面**: 404 / 505 错误提示

### 特性示例
- **样式隔离**: 演示 Module SCSS 和 Styled Components 的样式隔离
- **骨架屏**: 加载状态展示
- **布局系统**: 侧边栏菜单、面包屑、顶部导航

## 5. 代码质量与提交流程

项目已接入 Husky + ESLint：

- `pre-commit`: 仅校验暂存区 `ts/tsx` 文件
- `pre-push`: 执行 `npm run build`，确保可构建后再推送

如本地未生效，可执行：

```bash
npm run prepare
```

## 6. 常用命令

| 命令 | 说明 |
|------|------|
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 生产环境构建 |
| `npm run preview` | 预览构建结果 |
| `npm run lint` | 代码检查 |
| `npm run prepare` | 初始化 Husky |