资料内容:
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 的一些优点,从而回答这两个
问题。