# 学习：React **Repository Path**: zerongcompany/learning---react ## Basic Information - **Project Name**: 学习：React - **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-24 - **Last Updated**: 2026-05-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # React 学习仓库 · BookShop > 这不是一个「为了上线而做」的商业项目，而是一份 **系统学习 React 的笔记 + 代码练习场**。 > 从组件、状态、副作用，到路由、全局状态、工程化与综合实战，按章节推进，边学边写。 --- ## 这个项目是干什么的？ 仓库里有两套学习笔记，对应 **基础 → 进阶** 两个阶段： | 目录 | 阶段 | 章节 | 说明 | |------|------|------|------| | [`study/`](./study/) | 基础 | 01～12 | JSX、组件、Props、State、事件、列表、样式、useEffect、自定义 Hook、应用入口 | | [`study2/`](./study2/) | 进阶 | 13～25 | Hooks 补全、组件进阶、Router、Zustand、工程化、Axios、**BookShop 综合实战** | **`src/` 目录** 是进阶阶段的结业项目 **BookShop 图书商城**——把前面学过的知识点串成一个能跑起来的完整应用。 一句话：**看 `study/` 打基础，看 `study2/` 进进阶，在 `src/` 里把知识落地。** --- ## 学习路线 ### 基础阶段（`study/` 01～12） 适合刚接触 React，或需要从 Vite + TypeScript 环境开始的同学： ``` 01 项目初识 → 02 JSX → 03 组件 → 04 Props → 05 State → 06 事件 → 07 条件渲染 → 08 列表与 Key → 09 样式 → 10 useEffect → 11 自定义 Hook → 12 应用入口与渲染流程 ``` 👉 从 [01 - React 项目初识与开发环境](./study/01-React项目初识与开发环境.md) 开始。 ### 进阶阶段（`study2/` 13～25） 基础完成后，按主线推进（详见 [00 - React 进阶学习路线规划](./study2/00-React进阶学习路线规划.md)）： ``` 13 Hooks 补全 → 14 渲染深入 → 15 组件进阶 → 17 React Router → 18 Zustand → 23 工程化 → 24 Axios → 25 综合实战 BookShop ``` **必学主线：** 13 → 14 → 15 → 17 → 18 → 23 → 24 → **25** **选学补充：** 16 性能优化、19 TanStack Query、20 表单校验、21 错误处理、22 测试（按需阅读） > 本路线 **全局状态只学 Zustand**，不学 Redux。 --- ## BookShop 实战项目（`src/`） [第 25 章](./study2/25-综合实战项目.md) 的完整实现：一个带登录、购物车、主题切换的简易图书商城。 ### 功能一览 | 功能 | 用到的知识点 | |------|-------------| | 商品列表 / 详情 / 搜索筛选 | useEffect、useReducer、Axios | | 登录 / 注册 | 受控表单、forwardRef、路由鉴权 | | 购物车 | Zustand + localStorage 持久化 | | 个人中心 | React Router 嵌套路由 | | 深色模式 | useContext + CSS 变量 | | 工程化目录 | `features/`、`api/`、`stores/`、`hooks/` | ### 技术栈 - **React 19** + **TypeScript** + **Vite** - **React Router** — 路由与鉴权 - **Zustand** — 登录态、购物车 - **Axios** — 商品请求封装（开发环境走 Vite 代理） - **Context** — 主题切换 ### 快速开始 ```bash pnpm install pnpm dev ``` 浏览器打开 http://localhost:5173/ **演示账号：** `test` / `123456` > 商品数据优先请求 Fake Store API；若网络超时，会自动回退到本地演示书单，不影响练习。 ### 项目结构 ``` src/ ├── api/ # Axios 实例、商品 / 登录接口 ├── components/ # 通用 UI（Button、Input、ThemeToggle） ├── contexts/ # ThemeContext（深色模式） ├── features/ # 按业务划分的功能模块 │ ├── auth/ # 登录、注册表单 │ └── products/ # 商品列表、卡片、筛选 ├── hooks/ # useAuth、useProducts 等 ├── layouts/ # MainLayout、AccountLayout ├── pages/ # 页面级组件 ├── routes/ # ProtectedRoute、GuestRoute ├── stores/ # Zustand：useAuthStore、useCartStore ├── data/ # 本地演示商品（API 不可用时的回退） └── types/ # 公共 TypeScript 类型 ``` --- ## 章节与代码对照 学某一章时，可以对照 `src/` 里的实现： | 章节 | 笔记 | 代码中的体现 | |------|------|-------------| | 13 | [Hooks 补全](./study2/13-Hooks补全.md) | `ThemeContext`、`productFilter`（useReducer）、搜索框 useRef | | 14 | [渲染机制与 Hooks 深入](./study2/14-渲染机制与Hooks深入.md) | `useProducts` / `useProduct` 请求取消 | | 15 | [组件进阶](./study2/15-组件进阶.md) | `Input`（forwardRef）、`LoginForm` | | 17 | [React Router](./study2/17-React-Router路由.md) | `App.tsx` 路由表、`ProtectedRoute` | | 18 | [Zustand](./study2/18-Zustand状态管理.md) | `useAuthStore`、`useCartStore` | | 23 | [工程化与项目结构](./study2/23-工程化与项目结构.md) | 目录划分、`.env.development` | | 24 | [Axios 请求](./study2/24-Axios请求.md) | `api/request.ts`、拦截器、Vite 代理 | | 25 | [综合实战](./study2/25-综合实战项目.md) | 整个 `src/` | --- ## 常用命令 | 命令 | 说明 | |------|------| | `pnpm dev` | 启动开发服务器 | | `pnpm build` | TypeScript 检查 + 生产构建 | | `pnpm preview` | 预览构建结果 | | `pnpm lint` | ESLint 检查 | --- ## 建议怎么用这份仓库？ 1. **按顺序读笔记** — 不要跳章，每章文末通常有练习或小任务 2. **对照源码理解** — 进阶阶段可直接打开 `src/` 对应文件，看「教科书里的概念怎么写成代码」 3. **自己改一改** — 例如给购物车加「全选」、给商品页加 loading 骨架屏，比只看不动手有效得多 4. **选学按需补** — 想深入数据请求看 19，想写测试看 22，不必一次学完 --- ## 许可证 学习用途，笔记与代码可自由阅读与修改。