React 是由 Facebook 创建的一个开源项目。它提供了一种在 JavaScript 中构建用户
界面的全新方式。自从它公开发布后，这个库迅速风靡全球，并且围绕着它培育了一个
生机勃勃的社区。
通过阅读本书，你将掌握在项目中使用 React 所需的方方面面。因为 React 只关注
UI 界面的渲染，而不会对应用程序的其他模块所使用的技术做任何假设，所以本书同时
也将介绍能匹配 React 模式的路由(Routing)和应用程序架构。
在本章中，我们将从一个较高的层面讲述一些主题，以便你能尽快开始创建应用程
序。这些主题包括：
● React 的完整定义，以及优点概览
● 如何使用 JSX，这是一个在 React 中用来渲染 UI 的 JavaScript 语法扩展
● 如何创建包含属性和状态的 React 组件
 

1.1 开始学习之前
React 针对的是现代风格的 JavaScript 开发生态系统。为能亲自尝试本书中的代码示
例，你需要安装 Node.js 和 npm。此外，还需要熟悉函数式 JavaScript 语法风格和这门语
言最新的特性，如箭头函数(arrow functions)和类。
 

1.1.1 Node.js 和 npm
JavaScript 自诞生之日起就运行在浏览器上，但是通过 Node.js 的开源命令行工具，
可以使 JavaScript 运行在你的本地计算机和服务器上。与 npm(Node Package Manager)一
道，Node.js 已经成为一项在本地计算机上进行 JavaScript 应用程序开发的极有用工具，
它使得开发人员可以创建脚本来运行任务(例如，复制和移动文件，或是启动一个本地开
发服务器)，以及自动下载应用程序所依赖的组件。
如果你尚未安装 Node.js，现在就下载它的 Windows、Mac 或者 Linux 版本，将其安
装到你的计算机上。下载地址为 https://nodejs.org/。
 

2 React 开发实战
 

1.1.2 JavaScript ES6
JavaScript 是一门自诞生起多年一直在不断进化的语言。最近，JavaScript 技术社区
已经认同了一组新的语言特性。有一些最新的浏览器已经能够支持这些特性，React 社区
也广泛地使用了这些新的特性(例如，箭头函数、类、展开操作符)。React 同时鼓励在
JavaScript 代码中使用函数式编程模式，所以你也需要熟悉在 JavaScript 中函数和上下文
是如何工作的，这样你才能了解 map、reduce 和 assign 等方法。如果你对这些细节感觉
有些模糊，可参阅 Apress 网站(www.apress.com/)和本书的 GitHub 页面(http://pro-react. 
github.io/)上有关这些主题的在线附录说明。
 

1.2 定义 React 
为清楚地说明 React 究竟为何物，我将对它做如下定义：
React 是一个使用 JavaScript 和 XML 技术(可选)构建可组合用户界面的引擎。
下面对 React 定义的每个部分再详加说明：
React 是一个引擎：React 的网站将它定义为一个库，但是我觉得使用“引擎”这个
词更能体现出 React 的核心优势：用来实现响应式 UI 渲染的方式。React 的方式是将状
态(在一个给定的时间点，所有用来定义应用程序的内部数据)从展现给用户的 UI 中分离
出来。在 React 中，你可以声明如何将应用程序的状态表现为 DOM 的虚拟元素，然后
自动更新 DOM 以反映出状态的变化。
“引擎”这个术语首先被 Justin Deal 用来描述 React，因为他觉得 React 渲染 UI 界
面的方式和游戏引擎渲染的工作方式十分相似(https://zapier.com/engineering/react-jstutorial-guide-gotchas/)。
创建可组合用户界面：减少创建和维护用户界面的复杂性一直是 React 的核心目标。
React 拥抱了这样一种理念：将 UI“打散”成易于重用、扩展和维护的组件与自包含的、
关注特定用途的构件(building blocks)。
使用 JavaScript 和 XML 技术(可选)：React 是一个可用于浏览器、服务器和移动设
备之上的纯 JavaScript 库。如你将在本章中所见，React 有一种可选的语法来让你可以使
用 XML 来描述 UI。一开始你可能会对这种语法感到有些陌生，但使用 XML 对于描述
用户界面其实有诸多优点，包括：XML 是声明性的，很容易通过 XML 观察元素之间的
关系，也很容易使 UI 的整体结构可视化。
 

1.3 React 的优点
市面上有许多的 JavaScript MVC 框架。Facebook 有什么理由还要创建 React？你
有什么理由要使用 React？下面的三节内容将探索 React 的一些优点，从而回答这两个
问题。