# wagent

**Repository Path**: chuanghou/wagent

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-20
- **Last Updated**: 2026-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 企业级前端学习仓库

面向已经熟悉 Java / C++ 的后端同学，用一套能在 2026 年企业中后台里站得住的技术栈，从零练到「能独立做业务页面」。

本仓库**只放教程和你的练习代码**，不放现成完整项目。你要自己顺着 Markdown 敲。

## 选型结论

你选的 **TypeScript + Vite + React + pnpm + Ant Design** 符合当前主流，尤其适合国内企业级中后台（管理后台、内部系统、B 端工作台）。

| 你的选型 | 判断 | 说明 |
|----------|------|------|
| TypeScript | 必选 | 企业项目标配，和 Java 静态类型能对上感觉 |
| Vite | 必选 | 已全面替代 Create React App，当前脚手架是 Vite 8 |
| React | 必选 | 中后台岗位需求量最大的 UI 库 |
| pnpm | 推荐 | 安装快、磁盘省、锁文件严格，国内团队很常见 |
| Ant Design | 推荐（国内中后台） | 表格、表单、布局、权限场景的组件最全 |

当前这台机器实测可用（教程按这些版本写过关键步骤）：

- Node `v24.14.0`，pnpm `10.30.3`
- 脚手架：`pnpm create vite@latest <name> --template react-ts`
- 模板默认：React 19.2 + TypeScript 6 + Vite 8，linter 为 oxlint
- 后续课安装：antd 6.6、react-router 8、TanStack Query 5、Zustand 5、axios 1

教程里会**额外但克制地**引入这些配套，它们才是「合格企业前端」日常会碰到的：

| 配套 | 何时引入 | 干什么 |
|------|----------|--------|
| React Router | 第 06 课 | 页面路由 |
| Ant Design 6 | 第 07 课 | 企业组件库（v6 已原生支持 React 19） |
| axios + Vite 代理 | 第 08 课 | 调后端 API |
| TanStack Query | 第 08 课 | 服务端状态（缓存、重试、loading） |
| Zustand | 第 10 课 | 客户端全局状态（登录用户、权限码） |

刻意没作为主线的东西（先知道名字即可）：

- **Next.js / SSR**：偏站点与全栈，不是中后台 SPA 的第一技能
- **Redux Toolkit**：大厂存量很多，新项目更常见 Zustand；第 10 课会对比
- **Tailwind**：和 antd 可以共存，但中后台不是必须
- **TanStack Router**：类型更强的新路由，国内 antd 后台仍以 React Router 为主

## 怎么用这个仓库

1. 按 [`tutorials/README.md`](./tutorials/README.md) 的顺序学，不要跳课。
2. 练习项目建在 [`labs/`](./labs/README.md)，主线项目名：`admin-lab`。
3. 文档里只有**必要的命令和小片段**。大面积完整页面请你自己写。
4. 每课结束先做「自检」，再做「练习」。练习比抄文档重要。
5. 每学完一课，用 git 提交一次 `labs/admin-lab` 的进度，方便回退。

## 学习节奏建议

你有后端经验，进度可以比零基础快，但不要用「先把框架 API 背完」的方式学前端。前端的核心差别是：

- UI 是**状态的函数**，不是一次请求渲染一张 JSP/Thymeleaf 页面
- 浏览器里有运行时状态、路由、缓存，这些以前多半在服务端
- 工程问题（打包、代理、CORS、环境变量）会比语法更快把人卡住

比较稳的节奏：每周 2～3 课，第 12 课的综合练习单独留几天。目标不是「看完」，而是 `admin-lab` 里真的能跑起来一套带登录和表格的中后台。

## 仓库结构

```text
wagent/
├── README.md                 本文件
├── .gitignore
├── tutorials/                教程正文（请按顺序读）
└── labs/                     你自己创建的练习项目
    └── admin-lab/            第 01 课创建，后续持续迭代
```

根目录 `.gitignore` 已经忽略 `node_modules/`、`dist/`、`.env` 等。你可以长期在这个仓库里学习、提交自己的练习代码。

## 进度

- [ ] 01 工具链与 Vite
- [ ] 02 TypeScript
- [ ] 03 CSS 布局
- [ ] 04 React 基础
- [ ] 05 Hooks 与组件设计
- [ ] 06 路由
- [ ] 07 Ant Design
- [ ] 08 接口与 Query
- [ ] 09 表单
- [ ] 10 状态 / 鉴权 / 权限
- [ ] 11 工程化
- [ ] 12 综合练习