# reactt_001

**Repository Path**: eric_ts/reactt_001

## Basic Information

- **Project Name**: reactt_001
- **Description**: react 项目模板 2025.9.13
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-18
- **Last Updated**: 2025-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## 项目概述

本项目是一个基于React 19 + TypeScript + Vite构建的现代化Web应用模板，采用了组件化、路由化和状态管理的最佳实践。

## 目录结构

```
e:/demos/react/reactt_001/
├── public/              # 静态资源目录
│   └── vite.svg        # Vite默认图标
├── src/                 # 源代码目录
│   ├── assets/         # 资源文件（图片、样式等）
│   │   └── react.svg
│   ├── components/     # 通用组件
│   │   ├── ProtectedRoute.tsx  # 受保护路由组件
│   │   ├── Settings.tsx        # 设置组件
│   │   └── useLayout.ts        # 布局相关Hook
│   ├── contexts/       # React Context
│   │   └── LayoutContext.ts    # 布局上下文
│   ├── layouts/        # 页面布局组件
│   │   ├── AltLayout.tsx       # 备用布局
│   │   ├── MainLayout.tsx      # 主布局
│   │   ├── const.tsx           # 布局常量
│   │   └── index.tsx           # 布局导出
│   ├── pages/          # 页面组件
│   │   ├── About.tsx           # 关于页
│   │   ├── Contact.tsx         # 联系页
│   │   ├── Home.tsx            # 首页
│   │   └── NotFound.tsx        # 404页
│   ├── index.css       # 全局样式
│   ├── main.tsx        # 应用入口
│   ├── router.tsx      # 路由配置
│   └── vite-env.d.ts   # Vite环境类型定义
├── .gitignore          # Git忽略文件
├── README.md           # 项目说明文档
├── eslint.config.js    # ESLint配置
├── index.html          # HTML模板
├── package.json        # 项目依赖和脚本
├── pnpm-lock.yaml      # pnpm依赖锁定文件
├── tsconfig.app.json   # 应用TypeScript配置
├── tsconfig.json       # 根TypeScript配置
├── tsconfig.node.json  # Node环境TypeScript配置
└── vite.config.ts      # Vite配置
```

## React架构说明

### 1. 组件化架构

本项目采用组件化设计，将UI拆分为可复用的组件：

- **通用组件** (`src/components/`): 可在多个页面使用的基础组件
- **布局组件** (`src/layouts/`): 定义页面整体结构（如导航、页脚等）
- **页面组件** (`src/pages/`): 应用的各个页面视图

### 2. 路由管理

使用React Router v7进行路由管理，配置文件位于`src/router.tsx`，实现了：
- 页面间的导航
- 路由嵌套（与布局结合）
- 路由保护（通过ProtectedRoute组件）

### 3. 状态管理

本项目集成了Zustand作为状态管理工具，特点是：
- 轻量级，API简洁
- 无需Provider包装
- 支持TypeScript类型推导

### 4. 上下文系统

使用React Context (`src/contexts/`) 实现跨组件状态共享：
- LayoutContext.ts: 管理布局相关状态

### 5. Hooks使用

项目广泛使用React Hooks：
- 内置Hooks (useState, useEffect, useContext等)
- 自定义Hooks (如useLayout.ts)

## 关键文件说明

### src/main.tsx
应用的入口文件，负责：
- 渲染根组件
- 配置全局样式
- 初始化路由

### src/router.tsx
路由配置文件，定义了应用的所有路由：
- 路由路径与组件的映射
- 路由布局的应用
- 路由保护的设置

### src/layouts/
包含应用的布局组件：
- MainLayout.tsx: 主要布局，包含导航和内容区域
- AltLayout.tsx: 备用布局，可用于特殊页面
- index.tsx: 布局组件的统一导出

### src/components/
包含可复用的通用组件：
- ProtectedRoute.tsx: 用于保护需要认证的路由
- Settings.tsx: 设置相关组件，包含LayoutProvider的实现
- useLayout.ts: 布局相关的自定义Hook

## 使用指南

### 安装依赖
```bash
pnpm install
```

### 开发模式
```bash
pnpm run dev
```

### 构建生产版本
```bash
pnpm run build
```

### 预览生产版本
```bash
pnpm run preview
```

### 代码检查
```bash
pnpm run lint
```

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```