# react-vite-learn

**Repository Path**: liu-yihao1/react-vite-learn

## Basic Information

- **Project Name**: react-vite-learn
- **Description**: 技术栈：
- React 19+ (使用函数组件和Hooks)
- TypeScript (强类型支持)
- React Router (路由管理)
- SCSS/Tailwind CSS (样式管理)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-30
- **Last Updated**: 2026-01-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Hooks 学习项目 (TypeScript)

这是一个使用React 19+和TypeScript构建的React学习项目，专注于演示和实践React核心概念及各种Hooks特性。项目包含多个示例页面，每个页面展示不同的React Hooks用法，适合React初学者学习参考。

## ✨ 功能特点

- **Hooks实践**：全面展示useState、useEffect、useCallback等常用Hooks的使用场景
- **TypeScript支持**：强类型代码，提升代码质量和开发体验
- **模块化设计**：清晰的项目结构，便于理解和扩展
- **响应式UI**：使用SCSS和Tailwind CSS实现现代化界面
- **路由管理**：通过React Router实现多页面导航

## 📚 包含的示例页面

- **Counter**：计数器示例，展示useState基础用法
- **Greeting**：问候语生成器，展示组件通信
- **Todo Card**：待办事项卡片，展示复杂状态管理
- **Effect Deep Dive**：useEffect深入实践
- **State Deep Dive**：useState高级用法
- **Learn Use State**：useState学习示例
- **Learn Use Effect**：useEffect学习示例
- **Learn Use Callback**：useCallback学习示例
- **Calculator**：简易计算器，综合Hooks应用

## 🚀 快速开始

### 前提条件

- Node.js 20.x 或更高版本
- npm 或 pnpm 包管理器

### 安装步骤

1. 克隆本仓库
```bash
git clone https://github.com/yourusername/react-hooks-learning-ts.git
cd react-hooks-learning-ts
```

2. 安装依赖
```bash
pnpm install
# 或
npm install
```

3. 启动开发服务器
```bash
pnpm dev
# 或
npm run dev
```

4. 在浏览器中访问 [http://localhost:5173](http://localhost:5173)

## 📁 项目结构

```
src/
├── App.tsx           # 应用入口组件
├── main.tsx          # 应用渲染入口
├── pages/            # 页面组件目录
│   ├── Counter/      # 计数器示例
│   ├── TodoCard/     # 待办事项示例
│   └── ...           # 其他示例页面
├── router/           # 路由配置
│   ├── index.tsx     # 路由入口
│   └── routes.tsx    # 路由定义
├── components/       # 共享组件
├── assets/           # 静态资源
└── utils/            # 工具函数
```

## 🛠️ 技术栈

- **核心框架**：React 19+
- **语言**：TypeScript
- **路由**：React Router v7
- **样式**：SCSS、Tailwind CSS
- **构建工具**：Vite

## 📝 使用说明

1. 启动开发服务器后，通过顶部导航栏可以访问不同的示例页面
2. 每个页面都有对应的Hooks使用说明
3. 代码中包含详细注释，解释关键概念和实现思路

## 🔗 相关资源

- [React官方文档](https://react.dev/)
- [React Hooks文档](https://react.dev/reference/react)
- [TypeScript官方文档](https://www.typescriptlang.org/docs/)
- [React Router文档](https://reactrouter.com/en/main)

## 🙏 致谢

感谢React团队和所有开源贡献者提供的优秀工具和文档！