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