具体描述
本书旨在帮你掌握Facebook的开源技术React,迅速建立富Web应用,构建组件并将其组织成可维护的大型应用程序。
解开Web应用开发之谜,从了解React基本原理开始。
* 设置React并编写第一个Hello World应用
* 创建并使用自定义React组件以及通用DOM组件
* 构建一个可以编辑、排序、搜索和导出内容的数据表格组件
* 使用JSX语法扩展作为调用函数的替代选择
* 设置一个帮你集中注意力于React上的简单构建过程
* 构建一个可以将数据存储在客户端的完整自定义应用
* 在应用规模增长时使用ESLint、Flow和Jest等工具检查并测试代码
* 使用Flux管理组件间的通信
作者简介
作者简介:
Stoyan Stefanov
Facebook开发工程师,图像优化工具smush.it的作者,性能优化工具YSlow2.0的架构师。曾多次在Velocity等技术大会上发表过演讲。另著有《JavaScript模式》和《JavaScript面向对象编程指南》,还为《高性能网站建设进阶指南》和《高性能JavaScript》贡献过内容。个人站点是http://phpied.com。
译者简介:
张俊达
毕业于华南理工大学,前端开发工程师,现任职于迅雷,主要负责移动Web开发工作。关注前端领域的新技术,乐于分享。
目录信息
前言 xv
第1章 Hello World 1
1.1 设置 1
1.2 Hello React World 2
1.3 刚才发生了什么 4
1.4 React.DOM.* 4
1.5 特殊DOM属性 7
1.6 React DevTools浏览器扩展 8
1.7 下一步:自定义组件 9
第2章 组件的生命周期 10
2.1 基础 10
2.2 属性 12
2.3 propTypes 13
2.4 state 16
2.5 带状态的文本框组件 16
2.6 关于DOM事件的说明 19
2.6.1 传统的事件处理 20
2.6.2 React的事件处理 21
2.7 props与state 21
2.8 在初始化state时使用props:一种反模式 22
2.9 从外部访问组件 22
2.10 中途改变属性 24
2.11 生命周期方法 25
2.12 生命周期示例:输出日志记录 26
2.13 生命周期示例:使用mixin 28
2.14 生命周期示例:使用子组件 30
2.15 性能优化:避免组件更新 32
2.16 PureRenderMixin 34
第3章 Excel:一个出色的表格组件 37
3.1 构造数据 37
3.2 表头循环 38
3.3 消除控制台的警告信息 40
3.4 添加<td>内容 41
3.5 排序 44
3.6 排序的视觉提示 46
3.7 编辑数据 47
3.7.1 可编辑单元格 48
3.7.2 输入字段的单元格 50
3.7.3 保存 50
3.7.4 结论与虚拟DOM Diff算法 51
3.8 搜索 52
3.8.1 状态与界面 54
3.8.2 筛选内容 55
3.8.3 如何改进搜索功能 57
3.9 即时回放 58
3.9.1 如何改进回放功能 59
3.9.2 有另一种实现方法吗 59
3.10 下载表格数据 59
第4章 JSX 62
4.1 Hello JSX 62
4.2 转译JSX 63
4.3 Babel 64
4.4 客户端 64
4.5 关于JSX转换 66
4.6 在JSX中使用JavaScript 68
4.7 在JSX中使用空格 69
4.8 在JSX中使用注释 70
4.9 HTML实体 71
4.10 展开属性 73
4.11 在JSX中返回多个节点 75
4.12 JSX和HTML的区别 77
4.12.1 class和for属性不能用了吗 77
4.12.2 style属性值是一个对象 77
4.12.3 闭合标签 78
4.12.4 用驼峰法命名属性 78
4.13 JSX 和表单 78
4.13.1 onChange处理器 78
4.13.2 value和defaultValue的区别 79
4.13.3 <textarea>的值 79
4.13.4 <select>的值 80
4.14 使用JSX实现Excel组件 82
第5章 为应用开发做准备 83
5.1 一个模板应用 83
5.1.1 文件和目录 84
5.1.2 index.html 85
5.1.3 CSS 86
5.1.4 JavaScript 86
5.1.5 更现代化的JavaScript 86
5.2 安装必备工具 89
5.2.1 Node.js 90
5.2.2 Browserify 90
5.2.3 Babel 90
5.2.4 React相关 91
5.3 开始构建 91
5.3.1 转译JavaScript 91
5.3.2 打包JavaScript 92
5.3.3 打包CSS 92
5.3.4 大功告成 92
5.3.5 Windows版本 93
5.3.6 在开发过程中构建 93
5.4 发布 94
5.5 更进一步 95
第6章 构建应用 96
6.1 Whinepad v. 0.0.1 96
6.1.1 基本设置 97
6.1.2 开始编写代码 97
6.2 组件 99
6.2.1 设置 99
6.2.2 组件发现工具 100
6.2.3 <Button>组件 101
6.2.4 Button.css 102
6.2.5 Button.js 103
6.2.6 表单 106
6.2.7 <Suggest> 106
6.2.8 <Rating>组件 109
6.2.9 <FormInput>“工厂组件” 112
6.2.10 <Form> 115
6.2.11 <Actions> 117
6.2.12 对话框 119
6.3 应用配置 121
6.4 <Excel>:改进的新版本 123
6.5 <Whinepad> 131
6.6 总结 134
第7章 lint、Flow、测试与复验 136
7.1 package.json 136
7.1.1 配置Babel 137
7.1.2 脚本 137
7.2 ESLint138
7.2.1 安装 138
7.2.2 运行 138
7.2.3 规则列表 140
7.3 Flow 140
7.3.1 安装 141
7.3.2 运行 141
7.3.3 注册类型检查 141
7.3.4 修复<Button> 142
7.3.5 app.js 144
7.3.6 关于props和state类型检查的更多内容145
7.3.7 导出/导入类型 147
7.3.8 类型转换 148
7.3.9 invariant 148
7.4 测试 150
7.4.1 安装 150
7.4.2 首个测试 151
7.4.3 首个React测试 152
7.4.4 测试<Button>组件 153
7.4.5 测试<Actions>组件 157
7.4.6 更多模拟交互 159
7.4.7 测试完整的交互 160
7.4.8 代码覆盖率 163
第8章 Flux 165
8.1 理念 166
8.2 回顾Whinepad 166
8.3 Store 167
8.3.1 Store事件 169
8.3.2 在<Whinepad>中使用Store 170
8.3.3 在<Excel>中使用Store 173
8.3.4 在<Form>中使用Store 174
8.3.5 界定 174
8.4 Action 175
8.4.1 CRUD Action 175
8.4.2 搜索与排序 176
8.4.3 在<Whinepad>中使用Action 178
8.4.4 在<Excel>中使用Action 179
8.5 Flux回顾181
8.6 immutable 182
8.6.1 immutable存储数据 183
8.6.2 immutable数据操作 184
关于作者 187
关于封面 187
· · · · · · (收起)
读后感
用户评价
这本书的叙事方式非常独特,它没有采用那种教科书式的、冷冰冰的理论堆砌,而是像一位经验丰富的老友在手把手地教你编程的秘诀。作者的语气总是那么亲切而富有鼓励性,每当引入一个复杂的概念时,总会先用一个日常生活中能理解的例子来打个比方,这种“润物细无声”的教学方法,极大地降低了我对技术恐惧感。我记得有一次我在处理一个异步操作的问题时感到非常困惑,但翻到书中的相关章节,作者用讲故事的方式描述了数据请求的“来回奔波”过程,瞬间茅塞顿开。而且,书中对于错误处理和调试的篇幅占比非常高,这部分内容往往是其他书籍会一笔带过的地方。作者详细分析了各种常见错误出现的场景,并给出了**实战中**最有效的解决方案,而不是空泛的理论指导。这种以解决实际问题为导向的写作风格,让我感觉自己不是在读书,而是在跟着一位大师做项目实战演练,学到的都是真金白银的经验。
这本书的排版和设计简直是一场视觉盛宴,光是翻阅的过程就充满了愉悦感。封面那种简洁又不失活力的设计,立刻就吸引了我的目光。内页的字体选择非常考究,字号大小适中,行距和段落间距也处理得恰到好处,即便是长时间阅读也不会感到眼睛疲劳。而且,他们巧妙地运用了不同颜色和粗细的边框来区分代码块和文字说明,这对于初学者来说简直是福音,能让我清晰地分辨出哪些是需要重点关注的知识点。特别是那些关键概念的解释,常常会配上一些小图标或者加粗的提示,这些细节处理得非常到位,让原本可能枯燥的技术学习变得生动起来。我觉得作者在版式设计上投入了极大的心血,这不仅提升了阅读体验,更重要的是,它有效地帮助我构建了知识的层次感。每次翻开它,都像是在进行一次精心策划的、有条理的学习之旅,而不是面对一堆杂乱无章的代码和文字。这种对细节的极致追求,体现了出版方对读者的尊重,也让我对接下来要学习的内容充满了期待。
这本书在技术深度和广度之间的平衡拿捏得极其到位,这在技术类书籍中是相当罕见的。它既没有为了追求“快速上手”而牺牲掉对底层机制的剖析,也没有因为追求理论的完美而让初学者望而却步。作者对于一些框架内部的运行原理,比如数据流动的方向,状态管理的生命周期,总能用非常清晰的图表或者伪代码来展示其工作流程。当我深入学习到那些更偏向底层的概念时,发现作者并没有回避,而是用一种极为克制和精确的语言进行了解释,确保了读者在掌握“如何做”的同时,也能理解“为什么是这样做的”。这种层次分明的知识结构,使得这本书具有非常高的“保质期”,我深信即使未来技术有所演进,这本书中关于编程思想和基础范式的讲解依然会是宝贵的参考资料。它培养的不仅是操作技能,更是解决未知问题的思维框架。
这本书的配图和辅助材料简直是教科书级别的典范,它们在很大程度上弥补了纯文本描述的局限性。我尤其喜欢那些用来解释组件通信的流程图,那些箭头和方框的布局简洁明了,没有一丝多余的信息干扰,一眼就能看出数据在系统中是如何流动的。此外,作者在每章末尾推荐的延伸阅读和社区资源列表,也展现了作者的责任心和对技术的敬畏。这些推荐不是随便列举的链接,而是经过筛选的、真正有价值的官方文档和高质量博客,对于想要进一步钻研的读者提供了清晰的进阶路径。更值得一提的是,书中对一些常见的设计模式在实际应用中的权衡利弊进行了探讨,这种开放式的讨论让我意识到技术选型从来都不是非黑即白,而是需要在效率、可维护性和性能之间做出取舍。这本书教会了我如何“思考”一个技术决策,而不仅仅是“执行”一个指令。
我必须得提一下这本书在“动手实践”环节的设计,这绝对是这本书的灵魂所在。它不像很多教程那样,在每章末尾草草了事地丢几个练习题,而是将实践融入到讲解的每一个环节。作者设计的那些小挑战和随堂项目,其复杂度设置得极为巧妙,既不会让你觉得过于简单而懈怠,也不会难到让你立刻想放弃。最让我赞赏的是,每一个代码示例都力求**最小化和高可复用性**。当你复制粘贴一段代码到你的编辑器中运行时,它能立刻跑起来,并且你能清晰地看到它实现了什么功能,而不是一大段互相依赖、需要复杂环境配置的庞然大物。这种“即时反馈”机制极大地增强了学习的成就感,让我有动力去探索为什么这段代码会产生这样的效果。我发现,通过这种高频率的、小步快跑的实践,我对于核心概念的理解和记忆都比以往任何时候都要深刻和牢固。
老语法,各种细节太简洁,比较难上手。
讲得比较浅,用的还是es5的语法
讲得比较浅,用的还是es5的语法
示例代码很完善
react入门很合适。