pc-h5-react-demo

KO | EN

gitlite — search

#javascript #llm #golang #deep-learning #java #windows #awesome #kubernetes #vue #security #mcp #ios #openai #open-source

pc-h5-react-demo

(★ 16)

第五期前端训练营学习资料分享

pc-h5-react-demo Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React 全栈学习项目集 🎓

> 第五期前端训练营 - React 学习资料汇总

本仓库包含三个循序渐进的 React 学习项目，从基础到进阶，帮助你全面掌握 React 生态系统。

---

## 📚 项目导航

| 项目 | 描述 | 难度 | 详细文档 |
|------|------|------|----------|
| [react_study_demo](./react_study_demo/) | React 核心知识学习 | ⭐ 入门 | [📖 查看文档](./react_study_demo/README.md) |
| [react_ssr](./react_ssr/) | 手搓 SSR 同构渲染 | ⭐⭐ 进阶 | [📖 查看文档](./react_ssr/README.md) |
| [react_ssr_next](./react_ssr_next/) | Next.js 框架实战 | ⭐⭐⭐ 高级 | [📖 查看文档](./react_ssr_next/README.md) |

---

## 🗂️ 项目详细介绍

### 1. React 学习 Demo (`react_study_demo`)

> **[📖 完整文档](./react_study_demo/README.md)**

一个用于学习 React 核心知识的演示项目，涵盖 Hooks、Ref、组件通信、路由、状态管理等内容。

#### 技术栈
- React 18 + React Router v6
- Redux Toolkit（状态管理）
- Axios（HTTP 请求封装）
- Vite & Webpack（双构建工具）

#### 涵盖内容
| 模块 | 内容 |
|------|------|
| **React Hooks** | useState, useEffect, useCallback, useMemo, useRef, 自定义 Hook |
| **Ref 用法** | useRef, createRef, forwardRef, useImperativeHandle |
| **组件通信** | 父子通信、兄弟通信、Context、Hooks与Class互操作 |
| **路由** | 路由配置、嵌套路由、路由参数、编程式导航 |
| **状态管理** | createSlice、createAsyncThunk、Selectors |
| **API 封装** | 配置化 API、缓存、取消请求、useRequest Hook |

#### 快速启动
```bash
cd react_study_demo
npm install
npm run dev      # Vite 启动（推荐）
# 或
npm run dev:webpack  # Webpack 启动
```

---

### 2. React SSR 同构渲染 (`react_ssr`)

> **[📖 完整文档](./react_ssr/README.md)**

一个手动实现的 React 服务端渲染（SSR）教学演示项目，深入讲解同构原理。

#### 核心原理

```
┌──────────────────────────────────────────────────────────┐
│                    SSR 核心三步流程                        │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  步骤 1：服务端渲染                                        │
│  ReactDOMServer.renderToString(<App />)                  │
│                         ↓                                │
│  步骤 2：嵌入模板返回                                      │
│  <div id="root">${html}</div>                            │
│  <script src="/bundle.js"></script>                      │
│                         ↓                                │
│  步骤 3：客户端水合                                        │
│  hydrateRoot(document.getElementById('root'), <App />)   │
│                                                          │
└──────────────────────────────────────────────────────────┘
```

#### 技术栈
- React 18 + React Router v6
- Express（Node.js 服务器）
- Webpack（客户端 + 服务端双配置）
- Babel（JSX 转换）

#### 项目亮点
- ✅ 手动实现 SSR 核心流程
- ✅ 深入理解水合（Hydration）机制
- ✅ 同构路由处理（StaticRouter / BrowserRouter）
- ✅ H5 响应式布局（vw 单位）
- ✅ 详尽的注释和文档

#### 快速启动
```bash
cd react_ssr
npm install
npm run build    # 构建客户端和服务端
npm start        # 启动服务
# 访问 http://localhost:3000
```

---

### 3. Next.js SSR 框架实战 (`react_ssr_next`)

> **[📖 完整文档](./react_ssr_next/README.md)**

一个 Next.js 14 教学演示项目，使用 App Router，展示 Next.js 如何简化 SSR 开发。

#### 核心概念

| 概念 | 说明 |
|------|------|
| **Server Components** | 默认组件类型，服务端渲染，无 JS 发送到客户端 |
| **Client Components** | 使用 `'use client'` 指令，支持交互和浏览器 API |
| **App Router** | 基于文件系统的路由，支持 layout、loading、error 等 |
| **Route Handlers** | 创建 API 端点，支持各种 HTTP 方法 |

#### 学习模块

```
📂 路由系统
├── 基础路由（文件系统路由）
├── 动态路由（[param]）
└── 嵌套路由（layout.jsx）

📂 数据获取
├── 服务端获取（async Server Component）
└── 客户端获取（useEffect + useState）

📂 组件类型
├── Server Components（默认）
└── Client Components（'use client'）

📂 API Routes
└── Route Handlers（GET/POST/PUT/DELETE）
```

#### 快速启动
```bash
cd react_ssr_next
npm install
npm run dev
# 访问 http://localhost:3000
```

---

## 🎯 推荐学习路径

```
          Step 1                    Step 2                    Step 3
    ┌───────────────┐         ┌───────────────┐         ┌───────────────┐
    │               │         │               │         │               │
    │ react_study   │   →     │  react_ssr    │   →     │ react_ssr     │
    │    _demo      │         │  (手搓 SSR)    │         │    _next      │
    │               │         │               │         │               │
    └───────────────┘         └───────────────┘         └───────────────┘
         入门                      进阶                      高级
    
    - React 基础          - SSR 核心原理           - Next.js 框架
    - Hooks 使用          - renderToString         - App Router
    - 状态管理            - hydrateRoot            - Server Components
    - 路由基础            - 同构注意事项            - 数据获取策略
```

### 为什么这样安排？

1. **先学基础** (`react_study_demo`)
   - 熟悉 React 核心概念
   - 掌握 Hooks、状态管理、路由等基础知识
   - 为后续学习打下扎实基础

2. **再理解原理** (`react_ssr`)
   - 手动实现 SSR，深入理解底层机制
   - 明白服务端渲染和客户端水合的过程
   - 理解同构开发的挑战和解决方案

3. **最后学框架** (`react_ssr_next`)
   - 了解 Next.js 如何封装 SSR 复杂性
   - 学习 Server Components 等新特性
   - 对比框架实现与手动实现的差异

---

## 🔧 技术栈总览

| 技术 | react_study_demo | react_ssr | react_ssr_next |
|------|:----------------:|:---------:|:--------------:|
| React 18 | ✅ | ✅ | ✅ |
| TypeScript | ❌ | ❌ | ❌ |
| React Router | ✅ | ✅ | ❌ (App Router) |
| Redux Toolkit | ✅ | ❌ | ❌ |
| Express | ❌ | ✅ | ❌ |
| Next.js | ❌ | ❌ | ✅ |
| Webpack | ✅ | ✅ | ❌ |
| Vite | ✅ | ❌ | ❌ |
| SSR | ❌ | ✅ (手动) | ✅ (框架) |

---

## 🚀 快速开始

### 环境要求

- Node.js >= 18.17.0
- npm >= 8.0.0

### 克隆项目

```bash
git clone <repo-url>
cd pc-h5-react-demo
```

### 启动各项目

```bash
# 1. React 基础学习
cd react_study_demo && npm install && npm run dev

# 2. 手搓 SSR
cd react_ssr && npm install && npm run build && npm start

# 3. Next.js
cd react_ssr_next && npm install && npm run dev
```

---

## 📝 对比总结

### SSR vs CSR

| 特性 | SSR（服务端渲染） | CSR（客户端渲染） |
|------|------------------|------------------|
| 首屏渲染 | 快 ⚡ | 慢 |
| SEO | 友好 ✅ | 不友好 |
| 服务器压力 | 较大 | 较小 |
| 交互时间 | 需等待水合 | JS 加载后即可 |
| 开发复杂度 | 较高 | 较低 |

### 手搓 SSR vs Next.js

| 方面 | 手搓 SSR | Next.js |
|------|----------|---------|
| 服务端渲染 | 手动 `renderToString` | 自动处理 |
| 客户端水合 | 手动 `hydrateRoot` | 自动处理 |
| 路由配置 | React Router 手动配置 | 基于文件自动生成 |
| 构建配置 | 两套 Webpack 配置 | 零配置 |
| 代码分割 | 手动配置 | 自动优化 |
| 学习价值 | 理解原理 💡 | 生产实践 🏭 |

---

## 📚 参考资源

### 官方文档
- [React 官方文档](https://react.dev)
- [React Router 文档](https://reactrouter.com)
- [Redux Toolkit 文档](https://redux-toolkit.js.org)
- [Next.js 官方文档](https://nextjs.org/docs)

### SSR 相关
- [React Server APIs](https://react.dev/reference/react-dom/server)
- [hydrateRoot API](https://react.dev/reference/react-dom/client/hydrateRoot)
- [React Server Components](https://react.dev/reference/rsc/server-components)

---

## 📄 License

MIT

---

**Happy Coding! 🎉**

如有问题，欢迎提出 Issue 讨论。

pc-h5-react-demo

pc-h5-react-demo Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

pc-h5-react-demo

pc-h5-react-demo Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README