React.js 小红书

这是胡子大哈写的一本开源、免费、面向零基础的 React.js 入门小书。工作中一直在用 React，就把组件复用、数据与视图同步这些坑整理成三阶段课程，给刚入门的同学一条轻装上路的路径。

本书假设你有一点 HTML、CSS、JavaScript 基础，但还没摸过 React。已经熟悉组件化和其他框架的同学，直接看官网即可。全书用 ECMAScript 2015 书写，阅读前请先掌握 ES2015 基本语法，否则会非常吃力。

下面保留作者联系方式、三阶段目录和全部课时链接。小红书部分链接已失效并做过删减，完整原文仍可从文末地址进入。

一、关于作者

• 邮箱：huzidaha@126.com
• 知乎：@胡子大哈
• 专栏：@前端大哈
• 加入《React.js 小书》读者交流群，一起讨论、交流、学习前端技术。

由于水平有限，编写过程难免有错。发现问题可以在 Github 上给该项目发 Pull Request，也欢迎更多人参与编写。

二、本书介绍

本书不会文档式覆盖所有知识点，只提炼实战里基础、重要、高频的内容，让你用最少精力吃透最需要的 React 套路。要更全面的内容，再去看官方文档和其他资料。

第一个阶段：先讲清问题根源——前端组件复用、数据和视图同步；再学 JSX、事件监听、state、props、列表渲染，看 React 怎么解决这些问题。结束后就能用 React 构建简单页面功能。

第二个阶段：生命周期及其含义、state/props 进阶、props 验证、组件组合、如何和 DOM 打交道，并引入前端应用状态管理的问题。

第三个阶段：高阶组件、context；引入 React-redux 构建较完整的前端应用，深入讨论状态管理；React-router 也会提及。每个阶段最后都有评论功能实战，把该阶段知识点用起来。

三、目录

第一个阶段

• Lesson 1 – React.js 简介
• Lesson 2 – 前端组件化（一）：从一个简单的例子讲起
• Lesson 3 – 前端组件化（二）：优化 DOM 操作
• Lesson 4 – 前端组件化（三）：抽象出公共组件类
• Lesson 5 – React.js 基本环境安装
• Lesson 6 – 使用 JSX 描述 UI 信息
• Lesson 7 – 组件的 render 方法
• Lesson 8 – 组件的组合、嵌套和组件树
• Lesson 9 – 事件监听
• Lesson 10 – 组件的 state 和 setState
• Lesson 11 – 配置组件的 props
• Lesson 12 – state vs props
• Lesson 13 – 渲染列表数据
• Lesson 14 – 实战分析：评论功能（一）
• Lesson 15 – 实战分析：评论功能（二）
• Lesson 16 – 实战分析：评论功能（三）

第二个阶段

• Lesson 17 – 前端应用状态管理 —— 状态提升
• Lesson 18 – 挂载阶段的组件生命周期（一）
• Lesson 19 – 挂载阶段的组件生命周期（二）
• Lesson 20 – 更新阶段的组件生命周期
• Lesson 21 – ref 和 React.js 中的 DOM 操作
• Lesson 22 – props.children 和容器类组件
• Lesson 23 – dangerouslySetHTML 和 style 属性
• Lesson 24 – PropTypes 和组件参数验证
• Lesson 25 – 实战分析：评论功能（四）
• Lesson 26 – 实战分析：评论功能（五）
• Lesson 27 – 实战分析：评论功能（六）

第三个阶段

• Lesson 28 – 高阶组件（Higher-Order Components）
• Lesson 29 – React.js 的 context
• Lesson 30 – 动手实现 Redux（一）：优雅地修改共享状态
• Lesson 31 – 动手实现 Redux（二）：抽离 store 和监控数据变化
• Lesson 32 – 动手实现 Redux（三）：纯函数（Pure Function）简介
• Lesson 33 – 动手实现 Redux（四）：共享结构的对象提高性能
• Lesson 34 – 动手实现 Redux（五）：不要问为什么的 reducer
• Lesson 35 – 动手实现 Redux（六）：Redux 总结
• Lesson 36 – 动手实现 React-redux（一）：初始化工程
• Lesson 37 – 动手实现 React-redux（二）：结合 context 和 store
• Lesson 38 – 动手实现 React-redux（三）：connect 和 mapStateToProps
• Lesson 39 – 动手实现 React-redux（四）：mapDispatchToProps
• Lesson 40 – 动手实现 React-redux（五）：Provider
• Lesson 41 – 动手实现 React-redux（六）：React-redux 总结
• Lesson 42 – 使用真正的 Redux 和 React-redux
• Lesson 43 – Smart 组件 vs Dumb 组件
• Lesson 44 – 实战分析：评论功能（七）
• Lesson 45 – 实战分析：评论功能（八）
• Lesson 46 – 实战分析：评论功能（九）

四、特别鸣谢与原文

特别感谢以下朋友对本书所做的审校，提出了很多改进意见：

• 邝伟科 – 腾讯 Web 前端工程师
• 杨海波 – 百度 Web 高级前端工程师
• 谢军令 – 天猫 Web 前端工程师
• 戴嘉华 – 前微信 Web 前端工程师

小红书部份链接失效，做了部份删减，若需查看原文,请移步:http://huziketang.mangojuice.top/books/react/

一句话总结：React.js 小书按「问题 → 基础 API → 生命周期 → 手写 Redux」三阶段推进，目录里的课时链接请按阶段跟着练。