React快速上手开发

内容概要

作者简介：

Stoyan Stefanov

Facebook开发工程师，图像优化工具smush.it的作者，性能优化工具YSlow2.0的架构师。曾多次在Velocity等技术大会上发表过演讲。另著有《JavaScript模式》和《JavaScript面向对象编程指南》，还为《高性能网站建设进阶指南》和《高性能JavaScript》贡献过内容。个人站点是http://phpied.com。

译者简介：

张俊达

毕业于华南理工大学，前端开发工程师，现任职于迅雷，主要负责移动Web开发工作。关注前端领域的新技术，乐于分享。

书籍目录

译者序　　xiii

前言　　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　添加内容　　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　的值　　79<br />
4.13.4　<select>的值　　80<br />
4.14　使用JSX实现Excel组件　　82<br />
第5章　为应用开发做准备　　83<br />
5.1　一个模板应用　　83<br />
5.1.1　文件和目录　　84<br />
5.1.2　index.html　　85<br />
5.1.3　CSS　　86<br />
5.1.4　JavaScript　　86<br />
5.1.5　更现代化的JavaScript　　86<br />
5.2　安装必备工具　　89<br />
5.2.1　Node.js　　90<br />
5.2.2　Browserify　　90<br />
5.2.3　Babel　　90<br />
5.2.4　React相关　　91<br />
5.3　开始构建　　91<br />
5.3.1　转译JavaScript　　91<br />
5.3.2　打包JavaScript　　92<br />
5.3.3　打包CSS　　92<br />
5.3.4　大功告成　　92<br />
5.3.5　Windows版本　　93<br />
5.3.6　在开发过程中构建　　93<br />
5.4　发布　　94<br />
5.5　更进一步　　95<br />
第6章　构建应用　　96<br />
6.1　Whinepad v. 0.0.1　　96<br />
6.1.1 　基本设置　　97<br />
6.1.2 　开始编写代码　　97<br />
6.2　组件　　99<br />
6.2.1　设置　　99<br />
6.2.2　组件发现工具　　100<br />
6.2.3　<Button>组件　　101<br />
6.2.4　Button.css　　102<br />
6.2.5　Button.js　　103<br />
6.2.6　表单　　106<br />
6.2.7　<Suggest>　　106<br />
6.2.8　<Rating>组件　　109<br />
6.2.9　<FormInput>“工厂组件”　　112<br />
6.2.10　<Form>　　115<br />
6.2.11　<Actions>　　117<br />
6.2.12　对话框　　119<br />
6.3　应用配置　　121<br />
6.4　<Excel>：改进的新版本　　123<br />
6.5　<Whinepad>　　131<br />
6.6　总结　　134<br />
第7章　lint、Flow、测试与复验　　136<br />
7.1　package.json　　136<br />
7.1.1　配置Babel　　137<br />
7.1.2　脚本　　137<br />
7.2　ESLint138<br />
7.2.1　安装　　138<br />
7.2.2　运行　　138<br />
7.2.3　规则列表　　140<br />
7.3　Flow　　140<br />
7.3.1　安装　　141<br />
7.3.2　运行　　141<br />
7.3.3　注册类型检查　　141<br />
7.3.4　修复<Button>　　142<br />
7.3.5　app.js　　144<br />
7.3.6　关于props和state类型检查的更多内容145<br />
7.3.7　导出/导入类型　　147<br />
7.3.8　类型转换　　148<br />
7.3.9　invariant　　148<br />
7.4　测试　　150<br />
7.4.1　安装　　150<br />
7.4.2　首个测试　　151<br />
7.4.3　首个React测试　　152<br />
7.4.4　测试<Button>组件　　153<br />
7.4.5　测试<Actions>组件　　157<br />
7.4.6　更多模拟交互　　159<br />
7.4.7　测试完整的交互　　160<br />
7.4.8　代码覆盖率　　163<br />
第8章　Flux　　165<br />
8.1　理念　　166<br />
8.2　回顾Whinepad　　166<br />
8.3　Store　　167<br />
8.3.1　Store事件　　169<br />
8.3.2　在<Whinepad>中使用Store　　170<br />
8.3.3　在<Excel>中使用Store　　173<br />
8.3.4　在<Form>中使用Store　　174<br />
8.3.5　界定　　174<br />
8.4　Action　　175<br />
8.4.1　CRUD Action　　175<br />
8.4.2　搜索与排序　　176<br />
8.4.3　在<Whinepad>中使用Action　　178<br />
8.4.4　在<Excel>中使用Action　　179<br />
8.5　Flux回顾181<br />
8.6　immutable　　182<br />
8.6.1　immutable存储数据　　183<br />
8.6.2　immutable数据操作　　184<br />
关于作者　　187<br />
关于封面　　187</pre></p>
<p class="calculate"><b>作者简介</b></p>
<p class="calculate"><pre class="exuberance">本书旨在帮你掌握Facebook的开源技术React，迅速建立富Web应用，构建组件并将其组织成可维护的大型应用程序。<br />
解开Web应用开发之谜，从了解React基本原理开始。<br />
* 设置React并编写第一个Hello World应用<br />
* 创建并使用自定义React组件以及通用DOM组件<br />
* 构建一个可以编辑、排序、搜索和导出内容的数据表格组件<br />
* 使用JSX语法扩展作为调用函数的替代选择<br />
* 设置一个帮你集中注意力于React上的简单构建过程<br />
* 构建一个可以将数据存储在客户端的完整自定义应用<br />
* 在应用规模增长时使用ESLint、Flow和Jest等工具检查并测试代码<br />
* 使用Flux管理组件间的通信</pre></p>

<hr />
<table border="0" width="650" style="border-collapse: collapse">
	<tr>
		<td></td>
	</tr>
</table>

<p align="right">
 <a target="_blank" href="/download/31564579625070138108.html" alt="React快速上手开发PDF格式下载" title="React快速上手开发PDF格式下载">React快速上手开发下载</a></p>
<hr />
<br />
<table border="0" width="650" style="border-collapse: collapse">
	<tr>
		<td></td>
		<td width="310"></script></td>
	</tr>
</table>

</div>
</div>

<div class="devotional" id="adoringly">			
<div class="antediluvian"><h3>发布书评</h3></div>
<div class="glimmering">

<table border="0" width="630" style="border-collapse: collapse">
	<tr>
		<td width="47">　</td>
		<td height="100"><textarea rows="5" name="user_comment_content" id="user_comment_content" cols="79">