前    言

自2013年由Facebook创建以来，ReactJS已成为网络上最受欢迎和广泛使用的前端用户界面库之一。随着2015年推出React Native，ReactJS也已成为移动应用开发中使用最广泛的库之一。

ReactJS一直在不断发展。多年来它经历了几次重大变化，但自始至终，React的核心原则都保持不变。

如果你想学习如何使用最新的语法和工具来开发下一代跨平台的Web和移动应用，那么本书非常适合。书中汇总了我从网络和书本上搜集整理出来的各种开发经验，目的是避免你因无休止的试错而耗费大量的时间和精力。

无论你是作为一名移动开发者、Web开发者还是其他任何类型的软件开发者来学习React，本书都适合你。如果你有早期使用ReactJS(约为版本16之前)的经验，本书也适合你！

在本书中，我不仅尝试提供了开发ReactJS应用程序所需的最新语法和模式，还介绍了足够多的背景知识和原理机制，以使其在未来几年仍然可用。

所以，欢迎使用ReactJS。

为什么选择本书

感谢你选择和我一起开始或继续你的React之旅。我写本书的初衷是为React及其生态系统提供最新和全面的解释，以及实际操作的代码，使你能够在现实世界中快速有效地使用React。

我很高兴能在这个时候撰写本书，原因有以下几点：

1. 我有足够的经验和知识来做好这件事。

2.  React是当今最流行的JavaScript库之一。

3. 我相信React在未来会更受欢迎。

4. 针对如何使用React进行编程，现有的在线资源和书籍提供的信息往往不完整并已过时。

下面快速了解一下这些要点，首先介绍我是谁，以及为何要写这本关于React的书。

关于我

我从1997年开始从事网页开发工作，从1998年开始使用JavaScript编程。多年来，我为一些全球最大的公司构建或管理Web应用程序。作为一名Web开发人员、作家和教师，我必须学习和使用多种语言和JavaScript框架。理论学习和实践应用是有区别的，到目前为止，我已使用React开发了多个项目并从事React咨询工作多年。

自2000年以来，我一直在线或面对面地教授Web开发和JavaScript，自2015年以来，我一直在教授React。在教授React的这几年里，我专门为面对面授课而设计制作了三门为期一周的课程，还有许多短视频课程和两门更长的视频课程。我在三大洲教授过React，我的学生中有Web开发人员、Java和C程序员、COBOL程序员、数据库管理员、网络管理员、项目经理、平面设计师和大学生。

就在我写本书时，全球COVID-19的大流行已严重影响了面授培训行业。这种情况下让我有更多的时间在家陪宠物，也让我有时间深入研究React并构思了这本React教材。在写本书之前，我查阅了所有关于React的畅销书籍，了解了React的使用现状以及React未来可能的发展趋势。

React很受欢迎

React是一个JavaScript库，源自Facebook需要创建可扩展和快速用户界面的需求。自从Facebook将其作为开源项目发布以来，它一直是构建动态网页和移动应用最广泛使用的方法之一。

JavaScript开发人员中流行的一个游戏是想出一个名词，为其添加“.js”后缀之后，再搜索GitHub，找到同名的JavaScript框架。如今新的JavaScript框架和库层出不穷，其中一些只是昙花一现，而React是自2010年发布以来被开发人员广泛使用的三个库之一，它将在未来很长一段时间内得到支持和推广。

React既进步又保守

React之所以能够坚持这么久并收获如此多的用户，是因为它始终是一个前瞻性的框架，能够灵活更新以适应JavaScript中的新特性、用户界面的新编写方法以及来自开发人员的反馈。多年来，在编写React应用程序的基本单元(组件)方面，React经历了几次重大改动。但是，在所有这些改动中，React始终坚持着一个核心范式，并且React的每次重大改动都与之前版本兼容。

不要盲信互联网

尽管所有这些改动的最终结果是，这些年来React变得更容易编写、更健壮，但互联网和书籍中往往提供的是一堆过时且通常有误的示例代码和教程。如果你在购买本书之前深入研究过React，你肯定注意到了这一点，并可能会为此感到困惑。也许在阅读本书前，你有过一段在网上学习React的沮丧经历，通过对比可以发现网上的在线教程只介绍了React的旧版本。

本书全面而又深入地介绍了React中使用的所有最重要(以及一些不太重要的)特性、概念和语法。

本书内容

本书涵盖了编写高质量React代码要掌握的一切内容。你将学习使用函数方法和类方法编写React组件；学习如何使用几种不同的方法来管理应用程序的状态，包括使用React Hooks和setState方法；学习如何将组件合在一起来创建完整的动态用户界面；还将学习如何从外部数据源获取数据并在应用程序中使用。此外，本书介绍了如何在用户的Web浏览器中存储数据，以提高应用程序的性能和可用性。谈到可用性，你将会了解在移动设备和桌面上运行应用程序的最佳实践，还将了解如何确保应用程序可访问。

因为React利用了许多对底层JavaScript语言的最新且最好的改进和增强，所以本书将为你提供JavaScript教程。一些新的JavaScript语法可能会让初学者感到困惑，但我将提供大量简单和真实的示例来解释每种新的语法或快捷方式。

本书读者对象

尽管React是一个JavaScript库，但本书并不适合JavaScript或Web编程新手。我希望你至少有一些使用JavaScript的经验。如果你不熟悉JavaScript的最新添加和修订，那没有问题。但如果你是JavaScript或编程新手，我建议你在使用React之前先学习JavaScript编程的基础知识。

同样，这不是一本网页设计的书。本书假定你熟悉HTML和CSS，并且能轻松地使用这两种语言。我还假设你对Web浏览器的工作方式以及网页在浏览器中的渲染方式有基本的了解。

最后，本书旨在向任何希望掌握React应用程序编写技能的人传授React的基础知识。尽管它确实涵盖React开发中许多最常用的模式和约定，也涵盖React中许多更高级的主题，但仍有许多主题仅会简单提及，或者由于篇幅的原因不得不省略。如果要介绍所有与更高级React开发相关的内容，我们需要几本书的篇幅，并且每隔几个月就需要更新一次。

一旦你理解了本书中讲授的React基本原理，就有能力去探索广阔的React在线生态系统，并找到适合的教程、文档和示例代码来继续学习React。

超出本书范围的一些更高级的主题包括单元测试，以及使用React Native、Redux和同构/通用React来构建移动应用。如果这些内容听起来毫无概念，那么你来对地方了！到本书末尾，你可能还不知道如何实现所有这些更高级的功能，但你肯定会知道它们的概念，以及如何开始使用它们。

编程的先决条件

React编程就像在瑞典家具店组装一件复杂的家具。有很多部分单独来说没有太大意义，但当你按照说明并以正确的方式将它们组合在一起时，整体的简约和完美可能会令你惊讶。

互联网连接与计算机

我假定你有一台配置足够高的台式机或笔记本电脑并能连接到互联网。在平板电脑或智能手机上编写代码是可能的，但可行性不强。本书的示例和截图在台式机或笔记本电脑上均可用，但不保证示例代码能在更小的设备上运行。此外，一些用于构建React应用程序的工具根本无法在智能手机或平板电脑上运行。

Web开发基础知识

如前所述，在开始学习React之前，了解HTML、CSS和JavaScript是必不可少的。如果你的经验主要是复制和粘贴别人编写的代码，但乐意对代码进行更改以及通过查阅资料来解决疑问，那么你会喜欢本书。

代码编辑器

你需要一个代码编辑器。我目前使用并推荐的是Microsoft Visual Studio Code。它可以在macOS、Linux和Windows上免费使用。如果你愿意使用其他代码编辑器，当然也可以。这些年来，我使用过许多不同的代码编辑器，我相信无论开发人员选择使用哪种代码编辑器，只要它最有效，就都是正确的选择。

浏览器

你还需要一个主流的Web浏览器。尽管Mozilla Firefox、Google Chrome和Windows Edge都可以满足我们的需求，但本书中的截图都是基于macOS上的Google Chrome。请按个人喜好随意使用三种主流浏览器中的任一种，但是请理解你的体验可能与书中的截图略有不同，并且某些React开发者工具目前仅适用于Chrome和Firefox。

安装所需的依赖项

虽然只需要一个文本编辑器和一个Web浏览器就可以在连接到互联网的计算机上编写并运行React应用程序，但是如果想要构建任何部署到公共Web上的应用程序，则需要在计算机上安装一些额外的软件包。当这些软件包组合在一起时，就是Web开发人员所说的工具链。

React工具链中的所有工具都是免费的、开源的，易于下载和安装。接下来，我将逐步引导你安装并配置工具链，并展示使用新工具的一些操作，以现代、标准和专业的方式帮助你高效地构建、编译和部署React应用程序。

Visual Studio Code简介

在我超过25年的Web开发职业生涯中，我用过许多不同的代码编辑器，但仍会根据项目或编写的代码类型不时地更换代码编辑器。

然而，似乎总有一种“流行”的代码编辑器是大多数Web开发人员都使用的。在过去的几年中，最受欢迎的编辑器已变换了几次，但在撰写本书时，最广泛用于编写前端Web代码的代码编辑器似乎是微软的Visual Studio Code(简称VS Code)，如图0-1所示。

图0-1  VS Code

Visual Studio Code是免费和开源的，可用于Windows、Linux和macOS。它提供了对React开发的内置支持，并且已开发了许多插件，这些插件有助于编写和调试React项目。

出于这些原因，我将在本书中使用最新版本的 Visual Studio Code，并且某些地方的屏幕截图和分步说明可能仅适用于Visual Studio Code。如果你选择使用不同的代码编辑器，请注意需要将一些特定的指令转换到所处的开发环境中。

如果尚未安装Visual Studio Code，请按照以下步骤安装：

(1) 在浏览器中打开code.visualstudio.com，然后单击操作系统适用的下载链接(见图0-2)。

图0-2  下载VS Code

(2) 双击下载的文件以启动安装过程。

(3) 如果在安装过程中出现任何选项，请接受默认选项。

等待Visual Studio Code安装完成后，启动它。如果这是你第一次使用它，将会看到欢迎屏幕，如图0-3所示。

图0-3  VS Code欢迎屏幕

如果你想随时打开欢迎屏幕，可以从Help菜单中选择Get Started。

学习VS Code的最先也最重要的事是使用命令面板。命令面板提供了快速访问VS Code所有命令的途径。可按照以下步骤熟悉命令面板：

(1) 从View菜单中选择命令面板，或按Command+Shift+P快捷键(在 macOS 上)或按Ctrl+Shift+P快捷键(在Windows上)打开命令面板。在VS Code界面的顶部会出现一个输入框，如图0-4所示。

注意：

因为你可能会经常使用命令面板，请花点时间记住这里提到的键盘快捷键。

图0-4  VS Code命令面板

(2) 在命令面板输入字段中输入new file。输入时，你将在输入下面看到可用命令的列表。

(3) 当你在命令面板顶部看到File: New Untitled File(如图0-5所示)时，按Enter键。一个新的无标题文件将被创建。

图0-5  使用命令面板创建新文件

(4) 再次打开命令面板并输入save。当File: Save高亮显示时，按Enter键保存文件。将文件命名为以.html为扩展名的名称(如index.html)。

(5) 在新文件的第一行中输入！符号，然后按Tab键。一个新HTML文件的基本框架会呈现出来，如图0-6所示。这个神奇的代码生成特性叫作Emmet。Emmet可用于自动化许多日常任务并加快代码的编写速度，因此最好现在就开始熟悉它并练习使用它。

(6) 使用Ctrl+S快捷键或命令面板来保存新文件。

图0-6  使用Emmet节省键入时间

Node.js

Node.js最初是为了在Web服务器上运行JavaScript。这样做的好处是，程序员可以在客户端(Web浏览器中)和Web服务器(也称为“服务器端”)上使用相同的语言。这不仅减少了程序员或程序员团队需要掌握的编程语言的数量，还简化了服务器和Web浏览器之间的通信，因为两者使用的是同一种语言。

图0-7显示了一个基本的Web应用程序，其中Node.js在服务器上运行，而JavaScript在Web浏览器中运行。

随着Node.js的流行，除了在Web浏览器上运行JavaScript程序，人们也开始在自己的计算机上运行它。具体来说，Web开发人员使用Node.js来运行工具，以自动化现代Web开发中涉及的许多复杂任务，如图0-8所示。

图0-7  客户端React和服务器端Node

图0-8  开发、客户端和服务器端

Node.js可以协助完成开发中的常见任务，包括：

● 精简：删除程序运行不需要但对程序员有帮助的空格、换行符、注释和其他代码的过程。精简提高了脚本、网页和样式表的效率和运行速度。图0-9显示了由程序员编写的JavaScript代码与精简代码之间的区别。

● 转译：将编程代码从一种编程语言版本转换为另一种版本的过程。这在Web开发中是必要的，因为不是所有的Web浏览器都支持相同的JavaScript新特性，但它们都支持一些JavaScript特性的核心子集。使用JavaScript转译器，程序员可以使用最新版本的JavaScript编写代码，然后可以在任何Web浏览器中运行已转译的代码。图0-10展示了ES2015中引入的JavaScript模板字符串的示例用法，以及JavaScript早期版本中的类似功能。

图0-9  精简代码

图0-10  转译示例

● 模块打包：一个典型的网站可以使用数百个独立的JavaScript程序。如果一个Web浏览器必须单独下载每个不同的程序，那么从Web服务器请求文件涉及的开销会显著地减慢网页的速度。模块打包器的主要任务是组合(或“打包”)Web应用程序中包含的JavaScript和其他代码，以更快地服务应用程序。因为打包器必须处理程序中的所有文件，所以也可以在打包器中使用插件来完成精简和转译等任务。模块打包的过程如图0-11所示。

图0-11  模块打包

● 软件包管理：由于JavaScript开发中涉及多种不同类型的程序，仅安装、升级和跟踪这些程序就已经相当复杂。软件包管理器(在Node.js术语中也称为“包”)是一个程序，主要用来管理所有这些程序。

● CSS预处理器：CSS预处理器(如SASS或者LESS)允许使用CSS的超集(如SCSS)为Web应用程序编写样式表，它支持CSS所缺少的编程特性，如变量、数学运算、函数、作用域和嵌套。CSS预处理器通过使用替代语法编写的代码来生成标准CSS。

● 测试框架：测试是任何Web项目的重要组成部分。正确编写的测试可以告诉你应用程序的每个部分是否正常运行。编写逻辑以测试应用程序是否正常运行的过程，也有助于编写质量更高的代码。

● 构建自动化：如果每次想要测试和部署现代Web应用程序都必须运行编译该程序所涉及的各种工具，这就需要遵循一系列非常复杂的步骤，并需要为其他可能接触这些代码的程序员提供培训。构建自动化是指编写一个程序或脚本，并以正确的顺序运行所有不同的工具，从而快速可靠地优化、编译、测试和部署应用程序的过程。

这些只是用JavaScript编写并在Node.js中运行的几种不同类型的工具，前端开发人员经常使用这些工具。如果想深入研究Node.js包，可访问本书相关链接[1]上的npm包库，或者继续阅读下一节学习如何管理和安装Node.js包。

Node.js入门

与Node.js交互的最常见方式是在UNIX风格的终端中输入命令。在Visual Studio Code中可使用三种不同的方法访问终端：

1. 从Terminal菜单中选择New Terminal。

2. 在VS Code的文件资源管理器中右击一个文件夹，选择Open in Integrated Terminal。

3. 使用键盘快捷键Ctrl+~。

无论选择哪种方式(我建议使用键盘快捷键，以避免切换到使用鼠标)，VS Code底部都会打开一个窗口，如图0-12所示。

图0-12  VS Code终端

学习使用Node.js的第一步是确保它已安装在你的计算机上。如果你有一台运行macOS或Linux的计算机，那么它很可能已安装好了，但需要升到新版本。在Windows上，可能尚未安装，但这很容易解决。按照以下步骤检查你是否安装了Node.js，查看安装的版本，并升级到最新版本：

(1) 在Visual Studio Code中打开终端。

(2) 在终端中，输入node -v。如果安装了Node.js，它将返回一个版本号。如果版本号低于14.0，则需要升级。继续执行步骤(4)。如果Node.js版本号大于14.0，也可以执行步骤(4)并升级到最新版本的Node.js，但这不是必需的。

(3) 如果Node.js尚未安装，你将收到一条消息，说明node是一个未知命令。请执行步骤(4)。

(4) 通过浏览器访问链接[2]，单击页面中的相应链接下载Node.js当前的LTS版本。

(5) 当Node.js安装程序下载完成后，双击它并按照说明进行安装。

(6) 如果在Visual Studio Code中打开了一个终端窗口，请关闭它，然后再重新打开。

(7) 在终端中输入node -v。现在你应该看到已安装最新版本的Node.js。

使用Node.js软件包管理器yarn与npm

现在已安装了Node.js，下一步是学习使用包管理器来安装和升级Node.js包。安装Node.js后，同时也安装了一个名为npm的包管理器。这就是我们将在本书中使用的包管理器，因为它最常用，而且我们已安装了它。但还有其他的包管理器，其中名为yarn的包管理器已被广泛使用，但由于种种原因，本书中我们没有足够的篇幅来讨论它。用于npm和yarn的命令实际上非常相似。如果想了解更多关于yarn的知识，以及为什么要使用它，可以访问链接[3]。

如果你已安装了Node.js，那么npm也已安装好了。可通过以下步骤来验证：

(1) 在Visual Studio Code中打开终端。

(2) 在命令行中输入npm –v，会得到如图0-13所示的响应。

图0-13  检查npm是否已安装

如果你安装的是较旧版本的npm，可能会导致此处和本书其他章节中运行的一些命令失效。如果你使用macOS，可通过在终端中输入以下命令来升级npm：

sudo npm install -g npm

在终端中输入此命令并按Enter键，系统会要求你输入密码。这是你登录计算机时使用的密码。

如果使用Windows，可通过输入以下命令升级npm：

npm install -g npm

注意，你必须以计算机管理员身份才能运行该命令。

使用npm install命令，你可以在计算机上下载并安装Node.js包，这样就可以运行它们或让其他程序使用它们。当一个计算机程序需要另一个计算机程序才能运行时，我们称这个程序为需要依赖项的程序。由于Node.js程序由小软件包组成，这些小包通常具有单独的可重用性和有限的功能，因此Node.js包具有数百个依赖项并不罕见。

当运行npm install后跟Node.js包的名称时，npm会在npm存储库中查找该包，下载它(连同它的所有依赖项)并对其进行安装。通过在npm install命令后指定-g标志，可以将软件包安装到全局位置，从而使它们可用于计算机上的任何程序。因此，当输入npm install-g npm命令时，将安装最新版本的npm包。换句话说，它进行了升级。

除了能够在全局范围内安装软件包，npm还可以在本地安装软件包，这使得它们只对当前项目可用。

注意：

只要有可能，最好只在本地安装软件包，以减少版本冲突的可能，并使程序更易于重用和共享。

可按照以下步骤查看npm install命令的运行情况：

(1) 打开Visual Studio Code并单击左侧工具栏上的File Explorer图标。

(2) 单击Open Folder，使用打开的文件浏览器在计算机的Documents文件夹中创建一个名为chapter-0的新文件夹并打开该文件夹。

(3) 在Visual Studio Code中打开集成的终端应用程序。它将打开一个命令行界面，并将当前目录设置为已打开的文件夹。

(4) 输入npm init -y。运行npm init会创建一个名为package.json的新文件，其目的是跟踪关于节点包的依赖项和其他元信息。

(5) 输入npm install learnyounode -g，或sudonpm install learnyounode -g(在macOS或Linux上)。这将安装一个由NodeSchool (nodeschool.io)创建的npm包，它会教你如何使用Node.js。下载和安装learnyounode包时，屏幕上会出现一些消息(可能是一些警告或错误——这些都是正常的，不必担心)。

(6) 当软件包安装完毕后，在终端中输入learnyounode来运行它。命令提示符将替换为课程菜单。建议你在方便时至少学习一两节这样的课程，这样就可以更好地理解Node.js，尽管学习React并不需要深入理解它。

注意：

当你尝试在Windows上运行npm install命令时，可能会收到一条错误消息，提示运行脚本被禁用。如果是这样，在终端中输入以下命令应该可以解决问题：

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

Chrome开发者工具

谷歌的Chrome浏览器包含一套功能强大的工具，用于检查和调试网站以及Web应用程序。可按以下步骤开始使用Chrome DevTools：

(1) 打开Chrome浏览器，访问链接[4]。你将看到一个简单的示例网页。可以从该页面开始你的Chrome DevTools学习之旅。

(2) 单击Chrome右上角的三个点打开Chrome DevTools面板(即ChromeMenu)，然后选择More Tools | Developer Tools，或者使用键盘快捷键：Command+Option+I(在macOS上)或Ctrl+Shift+I(在Windows上)。键盘快捷键不仅更简单，而且相对固定，而开发者工具菜单项的位置在过去几年里已多次改变。无论你用哪种方式打开它，都会在浏览器中打开一个包含DevTools的面板，如图0-14所示。

图0-14  Chrome DevTools

注意：

Chrome DevTools 的默认停靠位置在浏览器窗口的右侧。可通过单击DevTools面板右上角的三个点(称为“kebab”菜单图标)来更改工具的停靠位置。

(3) 在DevTools面板的左上角找到元素选择器工具，然后单击它。可以使用元素选择器工具检查网页中的不同HTML元素。

(4) 使用元素选择器工具高亮显示www.example.com网页的不同部分。当页面的标题高亮显示时，单击它。创建标题的HTML将在DevTools的源代码视图中高亮显示，应用于标题的CSS样式将显示在源代码的右侧。

(5) 双击源代码视图中<h1>元素内的单词Example Domain。单词将高亮显示并可编辑。

(6) 在源代码视图中高亮显示Example Domain字样的情况下，在其上输入新词以替换它们，然后按Enter键退出源代码编辑模式。新文本将作为<h1>元素出现在浏览器窗口中。

(7) 在源代码窗口右侧的样式窗格中找到<h1>元素样式，然后双击它。

(8) 尝试更改应用于<h1>元素的样式，注意它们会修改浏览器窗口中显示的内容。

(9) 单击DevTools面板顶部的Console选项卡。这将打开JavaScript控制台。

(10) 在JavaScript控制台中输入以下JavaScript代码：

document.getElementsByTagName('h1')[0].innerText

按Enter键时，打开和关闭<h1>标记之间的文本将被记录到控制台。

要理解我们使用Chrome DevTools所做的一切操作，以及React运行机制的关键，在于需要知道一件重要的事情，那就是你实际上并没有改变HTML网页本身。它安全地存储在Web服务器上。你所改变的是Web浏览器对网页的内存表示。如果刷新页面，它将被重新下载，并显示为首次加载时的样子。

DevTools通过文档对象模型(Document Object Model，DOM)操作网页。DOM是网页的JavaScript应用程序编程接口(API)。通过操作DOM，可以动态更改Web浏览器窗口中的任何内容。DOM操作是JavaScript框架和库(包括React)使网页更具交互性，更像本地桌面应用程序的一种方式。

React Developer Tools

为了帮助开发人员调试React应用程序，Facebook创建了一个名为React Developer Tools的浏览器扩展程序。React Developer Tools目前只适用于Chrome和Firefox。安装完成后，React Developer Tools将在浏览器开发者工具中提供两个新按钮：Components和Profiler。

下面先介绍如何安装React Developer Tools，然后了解它的功能。

按照以下步骤在Chrome中安装React Developer Tools：

(1) 使用Chrome浏览器登录Chrome Web Store位于链接[5]的站点。

(2) 在搜索框中输入React Developer Tools。显示的第一个结果将是Facebook的React Developer Tools扩展。

(3) 单击React Developer Tools扩展，然后单击Add to Chrome按钮。该扩展将随后安装在你的浏览器中。

下面介绍如何在Firefox中安装React Developer Tools插件：

(1) 打开Firefox浏览器并访问链接[6]。

(2) 单击Add to Firefox按钮。

(3) 当Firefox请求安装插件的权限时，单击Add。

安装好之后，按照以下步骤开始使用React Developer Tools：

(1) 打开Chrome DevTools或Firefox Developer Tools。

(2) 注意，如果当前浏览的网页没有使用React，你就不会发现Developer Tools中有任何不同。

(3) 在浏览器中访问链接[7]。在Developer Tools中，你将看到新的Components和Profiler选项卡。

(4) 单击Components选项卡。你将看到React用户界面的树形视图，如图0-15所示。

图0-15  React Developer Tools Components视图

React Components视图中的每个项目都是React应用程序中的不同组件。在大多数使用React的公共网站上，React Developer Tools中显示的组件名称几乎没有任何意义，而且React Developer Tools功能有限。这是因为React实际上有单独的版本用于开发(构建和调试应用程序)和生产(部署应用程序并可供终端用户使用)。

React的生产版本使用了简化的组件名称，并且删除了大部分调试功能，以提高性能并减少浏览器运行React所需的下载量。

花几分钟时间单击Components选项卡，浏览不同的组件。单击React Developer Tools中的检查器图标，它出现在窗口的左上角，类似于你前面看到的Chrome DevTools元素检查器的图标。

React Developer Tools的元素检查器的用法类似于Chrome DevTools的元素检查器(也类似于Firefox的元素检查器)。然而，理解这两个工具之间的区别非常重要。浏览器的元素检查器可用于高亮显示并查看浏览器DOM中的HTML和样式，而React元素检查器则允许高亮显示并查看页面上渲染的React组件。你可以将Components选项卡视为高级视图。

通过React Developer Tools检查的React组件最终会生成DOM节点(表示HTML和样式)，可使用浏览器的元素检查器来浏览这些节点。

Profiler提供了有关React应用程序性能的信息。在React的生产版本中，Profiler功能被禁用了，所以当你查看使用React创建的公共网页时，该选项卡的作用微乎其微。我们将在第5章探索和使用Profiler，并展示如何使用它来调试和优化React应用程序。

Create React App简介

开始使用React的最常见方法是使用名为Create React App的节点包。Create React App是一个官方支持的工具，它为React开发安装工具链，并配置一个样板React应用程序，可以用来开发你自己的应用程序。

要安装和运行Create React App，可以使用npm包管理器中的npx命令。npx是一个包运行程序。在本节的前面，我们使用npm install命令安装了节点包。安装包后，可以使用npm start命令运行它。npx类似于npm install和npm start的组合。如果在发出带有npx的运行命令时，该包已全局安装在计算机上，那么会运行已安装的包。如果该包没有安装，用npx运行它将导致它被下载、临时安装在本地并运行。

要使用 Create React App 创建新的 React 应用程序，可使用 npx 命令，后跟create-react-app，以及新React应用程序的名称。例如：

npx create-react-app my-new-app

为React应用程序命名

新应用程序的名称由你自己决定，只要它符合Node.js包的命名规则即可。这些规则包括：

● 长度必须小于214个字符。

● 名称不能以点或下画线开头。

● 名称中不能有大写字母。

● 不能包含URL中不支持的任何字符(如&符号和美元符号)以及URL中“不安全”的字符(如百分号和空格)。

除了这些规则，对于Node.js包以及使用Create React App创建的应用程序，还有几个常见的命名约定：

● 尽可能保持简单和简短。

● 只使用小写字母。

● 用破折号代替空格。

● 不要使用与普通Node.js包相同的名称。

创建首个React应用程序

按照以下步骤使用Create React App来创建你的第一个React应用程序：

(1) 在Visual Studio Code中创建或打开一个新文件夹。

(2) 打开终端并将新文件夹设置为工作目录。可通过右击文件夹名称并选择Open in Integrated Terminal，或者通过打开终端并使用Unix cd(用于更改目录)命令将工作目录更改为创建新应用程序的目录。注意，如果你使用的是Windows，那么集成终端可能是Windows命令提示符，在这种情况下，更改工作目录的命令是dir。

(3) 使用npx运行create-react-app，并为新应用程序命名。例如：

npx create-react-app my-test-app

(4) 按Enter键开始安装create-react-app并配置新应用程序。你会在终端中看到一系列消息和进度条。你可能还会看到一些错误和警告，但通常不需要担心这些。

(5) 当新React应用程序安装和配置完成后，通过输入cd，后跟应用程序的名称，切换到包含新应用程序的目录：

cd my-test-app

(6) 使用npm start命令启动应用程序。注意：npm start实际上是npm run start的缩写。当运行npm start时，其实是让一个名为start的脚本运行其命令。

(7) 等待并观察你生成的React应用程序启动，然后在浏览器中打开以显示React徽标和消息，如图0-16所示。

图0-16  默认的Create React App样板程序

(8) 打开Chrome DevTools窗口，使用与React Developer Tools一起安装的Components窗格来检查React应用程序。注意，这个示例应用程序比前面看到的组成reactjs.org网站的应用程序要小得多，也没有那么复杂。

现在你已创建了一个React应用程序，可以尝试按照以下步骤对它进行更改：

(1) 打开Visual Studio Code中的集成终端，并打开位于应用程序文件夹中的src/App.js。

注意：

React应用程序由分层组件构成，该组件是顶层组件，也是Create React App生成的默认应用程序中的唯一组件。

(2) 找到App.js中包含代码清单0-1所示代码的部分。

代码清单0-1：默认Create React App样板程序中的return语句

<div className="App">

<header className="App-header">

<imgsrc={logo} className="App-logo" alt="logo" />

<p>

   Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

</div>

注意：

你在这里看到的类似HTML的语法是JSX，它是React项目的一个特殊特性，我们将在第3章中详细介绍。

(3) 更改<p>和</p>标签之间的文本，然后保存App.js。

(4) 切换回浏览器，注意浏览器窗口已更新，以反映对App.js所做的更改！

恭喜你，继续努力！

如果已经做到了这一步，那么你已踏上了React的学习之旅。你已建立了工具链，学习了使用两个浏览器内置测试工具(Chrome DevTools和React Developer Tools)的基础知识，安装了Create React App，并使用它生成了一个样板React应用程序。

请随意使用你在本前言中所学的工具和命令，并尝试对Create React App样板代码进行其他更改，看看会发生什么。

准备好后，继续阅读第1章，你将获得构建和修改第一个React组件的实际经验!

本书代码资源

本书提供了数百个代码清单。我将这些代码设计得足够简单，容易理解，又足够实用，可以帮助你从学习React过渡到编写React代码。为了充分发挥本书的作用，建议你运行并实践每个代码清单。

为了更容易地运行这些示例，我将它们全部放在了网上，包括尽可能多的工作示例。

关于代码和链接下载

在阅读本书中的示例时，你可以选择手动输入所有代码，或者使用本书附带的源代码文件。每个代码清单的工作示例、补充信息以及本书Github存储库的下载链接详见链接[8]，也可扫描本书封底的二维码下载这些资源。

如果你希望在自己的计算机上下载和运行示例代码，可以使用Git复制存储库，然后按照README文件中的说明查看每个代码清单的工作版本。

如果没有安装Git，则可以在浏览器中访问链接[8]并单击Download按钮将所有代码下载到你的计算机。

如果因为React的某些意外更新导致需要更改书中的任何代码，你也可以在链接[8]上找到更正。

在此要说明的是，读者在阅读本书时会看到一些有关链接的编号，形式是编号加方括号，例如，[1]表示读者可扫描封底二维码的下载Links文件，在其中可找到相应章节的[1]所指向的链接。