# react_study

**Repository Path**: zhikee/react_study

## Basic Information

- **Project Name**: react_study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-06
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 学习 Demo

这是一个用于学习React基础语法和Hooks核心用法的项目。

## 项目简介

本项目包含系统的React学习demo，涵盖以下内容：

### 一、React 基础语法
- **组件定义方式**: 函数组件、类组件、TypeScript类型定义
- **Props传递**: 基础用法、可选Props、Children、回调函数
- **组件生命周期**: 生命周期方法、Hooks模拟生命周期

### 二、Hooks 核心用法
- **useState**: 状态管理、函数式更新、对象数组状态
- **useEffect**: 副作用处理、数据获取、事件监听
- **useContext**: 跨组件数据共享、主题切换、购物车示例

## 技术栈

- React 18
- TypeScript 5
- UmiJS 4
- Vite

## 快速开始

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

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

## 项目结构

```
src/
├── pages/
│   ├── index.tsx                 # 导航首页
│   └── demos/
│       ├── basic/                # React基础语法
│       │   ├── ComponentDefinition.tsx
│       │   ├── PropsDemo.tsx
│       │   └── LifecycleDemo.tsx
│       └── hooks/                # Hooks核心用法
│           ├── UseStateDemo.tsx
│           ├── UseEffectDemo.tsx
│           └── UseContextDemo.tsx
└── .umirc.ts                     # UmiJS配置
```

## 学习建议

1. 按顺序学习基础语法，理解React的核心概念
2. 每个demo都包含详细的注释和多个示例，建议结合浏览器控制台理解
3. 在Hooks学习中，重点关注useState和useEffect
4. 尝试修改demo代码，观察变化，加深理解

## License

MIT