React系统学习指南

# React.js 前端开发系统学习指南 ## 核心规则 1. 输出格式：严格采用三列表格结构，包含「学习主题」「详细学习内容」「实践作业」三列 2. 内容规范：从React基础概念开始，按学习路径顺序排列，确保逻辑连贯性 3. 难度控制：所有内容必须适合零基础学习者，避免使用未解释的专业术语 4. 实践导向：每个主题必须配备可操作的实践作业，禁止纯理论说明 ## 学习路径表格 | 学习主题 | 详细学习内容 | 实践作业 | |---------|------------|---------| | **1. 开发环境搭建** | - 安装Node.js和npm<br>- 使用create-react-app创建项目<br>- 理解项目目录结构<br>- 运行开发服务器 | 1. 搭建第一个React项目<br>2. 修改App.js中的文本并观察实时更新 | | **2. JSX语法基础** | - JSX与HTML的区别<br>- 表达式嵌入{ }的使用<br>- 属性命名差异(如className)<br>- 自闭合标签要求 | 1. 创建包含变量渲染的组件<br>2. 实现条件渲染不同文本内容 | | **3. 组件基础** | - 函数组件与类组件区别<br>- Props的概念和使用<br>- 组件组合与嵌套<br>- 组件样式添加方法 | 1. 构建可复用的Button组件<br>2. 创建包含多个子组件的Card组件 | | **4. 状态管理** | - useState Hook基础用法<br>- 状态不可变性原则<br>- 状态提升概念<br>- 受控组件实现 | 1. 制作计数器组件<br>2. 开发简易TODO列表(添加功能) | | **5. 生命周期与副作用** | - useEffect Hook使用场景<br>- 依赖数组的作用<br>- 清理函数的使用<br>- 组件挂载/更新/卸载过程 | 1. 实现API数据获取和展示<br>2. 创建窗口大小跟踪器 | | **6. 事件处理** | - 合成事件系统<br>- 事件绑定语法<br>- 阻止默认行为<br>- 事件参数传递 | 1. 制作表单提交处理器<br>2. 开发图片悬停放大效果 | | **7. 表单处理** | - 受控组件实现表单<br>- 多输入处理方案<br>- 表单验证基础<br>- 提交处理流程 | 1. 构建用户注册表单<br>2. 实现即时输入的搜索框 | | **8. 路由基础** | - React Router安装配置<br>- BrowserRouter使用<br>- Route组件匹配规则<br>- Link导航组件 | 1. 创建三页面的导航系统<br>2. 实现带参数的产品详情页 | | **9. 状态管理进阶** | - Context API使用场景<br>- useReducer工作流程<br>- 全局状态管理方案比较 | 1. 实现主题切换功能<br>2. 用Reducer重构TODO应用 | | **10. 项目实战** | - 组件拆分最佳实践<br>- 项目结构组织<br>- 基础性能优化<br>- 部署流程 | 1. 开发电影信息展示应用<br>2. 构建个人博客系统 | ## 执行约束 - 禁止合并任何相邻主题，确保每个主题独立成行 - 实践作业必须包含具体实现要求，禁止模糊描述 - 所有技术术语首次出现时必须附带简单解释