推荐序

你是否厌倦了写jQuery 的“回调汤”？是否在需要写新模板或者配置Angular 应用时感到抓狂？是否很想知道为什么自己的应用结构如此复杂？如果是这样，那么React.js 正是能满足你需要的框架。React.js 的声明式语法将帮你为大型应用构建数据随时间变化的用户界面。

作为一个专业的iOS 和JavaScript 前端顾问，我总是建议客户使用当下最先进的技术。随着Facebook 的不断推陈出新，React.js 已被证明是一个可靠的选择，它能帮我们创建可维护和高性能的用户界面，进而帮助我们的客户更快地交付产品，实现更迅速的发展。我很高兴知道这本书即将出版，更让我兴奋的是自己居然提前看到了它。

ArtemijFedosejev是一位资深的Web 开发者，在伦敦一家创业公司做技术负责人，他在这本书里展示了为什么声明式的编程风格和单向反应式数据流动常常是解决现实编程问题的最佳途径。无论开发消费者应用还是学术性网站，无论规模大小，React.js 都可以帮你搭建其前端UI。而且你永远不会再迷失在代码中了。这本书是Artemij基于自己的实际经验编写的，读完本书你就可以创建自己的用户界面，而且不会增加应用的复杂性。

这本书涵盖了从零开始学习React.js 所需的一切。它会从最基础的安装环境逐步引导你，直到复杂的Jest 测试框架。最好的学习方法是做中学，所以本书将带你开发一个实际的React.js 项目，创建一个能够对Twitter 上的最新照片实现接收和分类的应用程序。

软件行业不断发展变化。作为开发者，我们总能通过实践把触角伸向新领域，拓宽视野，刷新我们对如何构建优秀软件的认知。从发展历史来看，软件开发和架构已经从结构化发展到命令式。面向对象编程由此成为软件开发的事实标准。Java、Ruby、Objective-C等语言都原生支持OOP。

然而，这时候出现了一个支持函数式编程的异类，走出了一条独特的进化之路，它就是JavaScript。React.js 就是“把UI 当作状态的函数”这种新思维的产物。Facebook 为了让开发者熟悉这种反应式的思维已经付出了很多努力。与使用模板系统的Ember.js、Angular.js 等流行框架不同，React.js 是一个使用声明式编程风格来描述UI 状态的UI 库。可以把React.js 看成是传统MVC 模式中的V，但它并不限于此。Facebook 又引入了一个互补性的Flux 应用架构，它使用React 的可组合视图组件。

解决编程问题的最新方法又回到了声明式编程的起点。新范式的兴起，比如ReactiveExtensions（Rx）、Futures 和Promise 让我们开始重新思考函数式编程，以及使用声明式方法代替OOP 的命令式风格。React.js 体现了这样一些范式，而这本书正是你掌握它的第一步，相信你会喜欢它。

Alex Bush

SmartCloud公司创始人兼软件产品工程师

目录

1 给项目预先安装一些有用的工具 ................................................................ 1

了解我们的项目 ....................................................................................................................... 2

安装Node.js 和npm ................................................................................................................ 3

安装Git ................................................................................................................................... 4

从Twitter Streaming API 中获取数据 ..................................................................................... 5

使用Snapkite 引擎来过滤数据 ............................................................................................... 6

创建项目结构 ........................................................................................................................... 9

创建package.json ................................................................................................................... 10

复用Node.js 模块 .................................................................................................................. 11

使用Gulp.js 来构建应用 ....................................................................................................... 12

创建一个网页 ......................................................................................................................... 15

小结 ........................................................................................................................................ 16

2 创建你的第一个React 元素 ..................................................................... 17

理解虚拟DOM ...................................................................................................................... 18

安装React .............................................................................................................................. 19

使用JavaScript 创建React 元素 ........................................................................................... 20

type 参数 ................................................................................................................. 22

props 参数 .......................................................................................................... 22

children 参数 ............................................................................................................ 23

渲染React 元素 ...................................................................................................................... 27

使用JSX 来创建React 元素 ................................................................................................. 28

小结 ........................................................................................................................................ 30

3 创建你的第一个React 组件 ..................................................................... 31

无状态与有状态 ..................................................................................................................... 31

创建第一个无状态React 组件 .............................................................................................. 32

创建第一个有状态React 组件 .............................................................................................. 37

小结 ........................................................................................................................................ 44

4 让React 组件变得可响应 ......................................................................... 45

使用React 解决问题 .............................................................................................................. 45

规划React 应用程序 .............................................................................................................. 47

创建一个React 组件容器 ...................................................................................................... 49

小结 ........................................................................................................................................ 57

5 结合其他库来使用React 组件 .................................................................. 59

在React 组件中使用其他库 ............................

你是否厌倦了写jQuery 的“回调汤”？是否在需要写新模板或者配置Angular 应用时感到抓狂？是否很想知道为什么自己的应用结构如此复杂？如果是这样，那么React.js 正是能满足你需要的框架。React.js 的声明式语法将帮你为大型应用构建数据随时间变化的用户界面。

作为一个专业的iOS 和JavaScript 前端顾问，我总是建议客户使用当下*先进的技术。随着Facebook 的不断推陈出新，React.js 已被证明是一个可靠的选择，它能帮我们创建可维护和高性能的用户界面，进而帮助我们的客户更快地交付产品，实现更迅速的发展。我很高兴知道这本书即将出版，更让我兴奋的是自己居然提前看到了它。

Artemij Fedosejev 是一位资深的Web 开发者，在伦敦一家创业公司做技术负责人，他在这本书里展示了为什么声明式的编程风格和单向反应式数据流动常常是解决现实编程问题的*佳途径。无论开发消费者应用还是学术性网站，无论规模大小，React.js 都可以帮你搭建其前端UI。而且你永远不会再迷失在代码中了。这本书是Artemij 基于自己的实际经验编写的，读完本书你就可以创建自己的用户界面，而且不会增加应用的复杂性。

这本书涵盖了从零开始学习React.js 所需的一切。它会从*基础的安装环境逐步引导你，直到复杂的Jest 测试框架。*好的学习方法是做中学，所以本书将带你开发一个实际的React.js 项目，创建一个能够对Twitter 上的*新照片实现接收和分类的应用程序。

软件行业不断发展变化。作为开发者，我们总能通过实践把触角伸向新领域，拓宽视野，刷新我们对如何构建优秀软件的认知。从发展历史来看，软件开发和架构已经从结构化发展到命令式。面向对象编程由此成为软件开发的事实标准。Java、Ruby、Objective-C等语言都原生支持OOP。

然而，这时候出现了一个支持函数式编程的异类，走出了一条独特的进化之路，它就是JavaScript。React.js 就是“把UI 当作状态的函数”这种新思维的产物。Facebook 为了让开发者熟悉这种反应式的思维已经付出了很多努力。与使用模板系统的Ember.js、Angular.js 等流行框架不同，React.js 是一个使用声明式编程风格来描述UI 状态的UI 库。可以把React.js 看成是传统MVC 模式中的V，但它并不限于此。Facebook 又引入了一个互补性的Flux 应用架构，它使用React 的可组合视图组件。

解决编程问题的*新方法又回到了声明式编程的起点。新范式的兴起，比如ReactiveExtensions（Rx）、Futures 和Promise 让我们开始重新思考函数式编程，以及使用声明式方法代替OOP 的命令式风格。React.js 体现了这样一些范式，而这本书正是你掌握它的第一步，相信你会喜欢它。

——Alex Bush，SmartCloud 公司创始人兼软件产品工程师

《React 精髓》面向初中级前端开发者，从头到尾、由浅入深地介绍了使用React 实现组件化Web 应用的完整流程。作者从React 元素、React 组件等基本的概念讲起，循序渐进地讨论了组件状态和生命周期，为开发完整的React 应用打下了基础。与第三方JavaScript 框架集成，以及对React 组件进行单元测试，都是开发React 应用的重要内容，《React 精髓》也有详细讲解。最后，为进一步提升React 应用的灵活性，作者还以实例展示了如何引入Flux 架构，让读者的开发技能更上一层楼。

真正面向实战的React图书

揭秘Flux架构|彻底释放React潜能

本书由国内前端劲旅奇舞团领衔翻译

全面剖析组件化Web应用开发完整流程

如今，Web 已经变得不同。我们构建网页的方式也已经不同。面对不可维护的jQuery代码，我们不得不寻找新的方法来管理复杂的现代用户界面。我们需要一个新的用户界面库，它可以帮助我们使用JavaScript 来创建声明式、模块化、更快速、可伸缩的前端应用程序。

React.js 是Facebook 开发的一个用户界面库，在如何与DOM 交互、如何组织数据流和将用户界面元素看作组件方面，为我们带来了全新的思潮。而且，它只是一个用户界面库，对技术栈的其余部分并没有要求。

React.js 与Flux 结合起来，就为我们提供了一个强大的前端架构。这无论是对经验丰富的开发人员，还是对那些刚刚接触前端的人来说都很有意义。无论开发经验多寡，面临问题难易，团队规模大小……前端的同学们，欢迎迈进一个新时代！

准备好体验React.js 将要带给你的简单、周到、可预测的惊喜吧。

本书内容

第1 章会介绍本书目标，并讲解为了有效构建 React 应用需要哪些现代化工具。本章将带你逐步安装这些工具，还会创建本书示例项目的结构。

第2 章会讲解如何安装React 并介绍虚拟DOM。然后讲解使用原生JavaScript 语法如何创建和渲染React 元素。最后介绍JSX 语法和如何使用JSX 来创建React 元素。

第3 章会介绍React 组件，讲解有状态和无状态两种不同的React 组件，以及如何决定使用哪一种。然后会引导读者掌握如何创建它们。

第4 章会讲解如何使用React 解决问题，并带你实际规划一个React 应用程序。我们将创建一个React 组件，用于封装本书将构建的React 应用程序。还会讲解父组件与子组件的关系。

第5 章探讨在React 组件中如何使用第三方JavaScript 库。介绍React 组件的生命周期，演示如何使用装载方法，并为本书的项目创建新React 组件。

第6 章介绍React 组件的更新方法，其中涵盖了如何在JavaScript 中使用CSS 样式。还讲解了如何验证和设置组件属性的默认值。

第7 章将焦点放在构建更复杂的React 组件上，探讨如何实现不同的React 组件，以及如何将它们放在一起，并完成最终的React 应用程序。

第8 章讲解单元测试的思想和如何使用Jest 来编写并执行单元测试，也会演示如何测试React 组件，并讨论测试套件、规格、期望和匹配器。

第9 章讨论如何改进React 应用程序的架构，介绍Flux 并讲解分派器、存储与动作发生器等角色。

第10 章讲解如何使用Flux 在 React 应用程序中处理解耦问题，并重构我们的React应用程序以减少维护成本。

阅读本书的准备工作

首先，需要最新版的浏览器，比如Google Chrome 和 Mozilla Firefox 最新版的下载地址如下。

Google Chrome：https://www.google.com/chrome/browser。

Mozilla Firefox：https://www.mozilla.org/en-US/firefox/new/。

其次，需要安装Git、Node.js 和npm。第1 章会讲解它们的详细安装过程。

最后，需要一个代码编辑器。我推荐Sublime Text（http://www.sublimetext.com）。另外，也可以使用Atom（https://atom.io）、Brackets （http://brackets.io）、Visual Studio Code （https://code.visualstudio.com）或者其他你喜欢的编辑器。

读者对象

本书适合那些想要构建可扩展、可维护Web 用户界面的前端工程师。你只需要具备一些JavaScript、HTML 和CSS 的核心知识，就可以感受到React.js 为Web 开发带来的革命性的好处。如果你具备jQuery 或者Angular.js 的开发经验，那么你就更容易理解React.js相较于其他库的优势，以及如何利用这些优势。

版式约定

为区别不同的信息，本书排版时会采用不同的版式和文本样式。下面是一些例子。

正文中的代码、数据库名、文件夹名、文件名、文件扩展名、路径、伪URL、用户输入及Twitter 相关的指令这样标出：“React 库的入口点是React 对象”。

代码段如下所示：

var React = require('react');

varReactDOM = require('react-dom');

varreactElement = React.createElement(

'h1'

{ className: 'header' }

);

ReactDOM.render(

reactElement

document.getElementById('react-application')

);

在需要提醒你注意代码中的特定部分时，我们会将特定部分加粗，如下所示：