React 渐进式学习路线
📌 学习原则
- 每个阶段 1-2 个核心项目（保持兴趣和成就感）
- 遇到问题再补充理论知识（避免过早陷入细节）
- 先模仿再创造（通过修改现有项目学习）
🚀 阶段路线图
阶段 1：HTML/CSS 生存技能（1-2周）
目标：能修改现有项目的样式和结构
项目：重构 TodoList 的 UI
学习重点：
- 通过 Chrome 开发者工具调试样式
- 修改现有 CSS 类名和样式
- 使用 Flex/Grid 调整布局
- 添加简单的动画效果
资源：
- Flexbox 小游戏
- CSS Diner（CSS 选择器练习）
- MDN 基础教程
阶段 2：JavaScript 核心操作（2-3周）
目标：能读懂并修改项目中的 JS 逻辑
项目：给 TodoList 添加新功能
学习重点：
- 添加「编辑任务」功能
- 实现「本地存储」持久化
- 添加「任务分类」过滤功能
资源：
- JavaScript 30（每天 1 个小项目）
- 现代 JavaScript 教程（按需查阅）
- Codewars（编程挑战）
阶段 3：React 核心模式（3-4周）
目标：理解组件化开发思维
项目：开发天气查询应用
学习重点：
- 组件拆分技巧（容器组件/展示组件）
- 掌握 useEffect 处理 API 请求
- 使用 Context 共享全局状态
资源：
- React 官方文档（交互式教程）
- React 模式图解
- EpicReact.dev（实战技巧）
阶段 4：现代工具链（2周）
目标：能配置和调试工程化项目
项目：从零搭建项目脚手架
学习重点：
- 使用 Vite 初始化项目
- 配置 ESLint + Prettier
- 添加路由（React Router）
- 集成状态管理（Zustand/Jotai）
资源：
阶段 5：实战进阶（4-6周）
目标：体验真实项目开发流程
项目：开发「个人博客系统」
功能需求：
- 文章列表/详情页
- 标签分类系统
- 评论功能
- 管理员后台
技术栈：
- Next.js（SSR）
- Markdown 解析
- 身份验证（NextAuth）
- 数据库（Supabase）
资源：
阶段 6：大型项目实战（持续）
目标：培养代码阅读和协作能力
学习方法：
- 参与开源项目（从修改文档开始）
- 阅读 Ant Design 等优秀组件库源码
- 学习 Monorepo 项目管理（TurboRepo）
推荐项目：
💡 学习技巧
- Debug 优先：遇到报错时先尝试自己解决（学会看错误信息）
- 暴力修改法：在副本项目里随意修改代码观察效果
- 3:1 原则：每写 3 小时代码，用 1 小时整理笔记
- 逆向工程：找到喜欢的网站/应用，尝试用 React 复现
🛠️ 工具推荐
- 代码沙盒：CodeSandbox（快速实验想法）
- AI 辅助：Cursor（代码智能补全）
- 知识管理：Obsidian（构建个人知识库）
📅 每日学习节奏（参考）
| 时间段 | 内容 |
|---|---|
| 09:00-10:30 | 项目编码（核心功能开发） |
| 10:30-11:00 | 休息 + 整理问题清单 |
| 11:00-12:00 | 针对性学习（解决上午问题） |
| 14:00-15:30 | 代码重构/功能优化 |
| 15:30-16:00 | 社区交流（Stack Overflow） |
| 16:00-17:00 | 阅读源码/技术文章 |
通过「需求驱动学习」的方式，在解决实际问题的过程中自然掌握必要知识。记住：大型项目只是多个小功能的组合，保持迭代改进的心态更重要。