自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：
![《ReactJS实践入门》[36M]百度网盘|亲测有效|pdf下载](/uploads/2024-01-20/93ffebc91b2447ce.jpg)
