零、序言

自第一版 React Essentials 以来,React 生态系统发生了很大变化。越来越多的人在构建 React 应用,有成熟的库和框架支持 React 应用,React 16 已经发布。在如此短的时间内,React 的爆炸性增长可归因于许多因素:优秀的社区和相关资源、React 生态系统的广阔性和某些主要项目的成熟度,当然,React 团队和他们的意愿使开发人员反馈成为项目持续发展的优先事项。

我很荣幸能参与到这样一个重要的项目中来。顾名思义,本书旨在教授 React 的要点。这个最新版本反映了 React 最新版本的变化,使用 Redux 管理状态,以及 JavaScript 语言本身。

加入我。当 React 成为构建用户界面的标准时,让我们成为专家。

这本书涵盖的内容

第一章React 16的新增内容,介绍 React 16 的主要变化。这包括对如何在引擎盖下进行渲染和协调的基本更改,以及通过 API 公开的其他新功能。

第 2 章为您的项目安装强大的工具,概述了本书的目标,并解释了为了高效构建 React 应用,您需要安装哪些现代工具。它介绍了每种工具,并提供了如何安装每种工具的分步说明。然后,它为我们将在本书中构建的项目创建一个结构。

第三章创建第一个 React 元素,介绍如何安装 React,并介绍虚拟 DOM。然后,它解释了 React 元素是什么,以及如何使用本机 JavaScript 语法创建和呈现 React 元素。最后,介绍了 JSX 语法,并展示了如何使用 JSX 创建 React 元素。

第四章创建第一个 React 组件,介绍 React 组件。它解释了无状态和有状态 React 组件之间的区别,以及如何决定使用哪个组件。然后,它引导您完成创建这两种类型的过程。

第 5 章使您的 React 组件具有反应性,介绍如何解决 React 问题,并指导您完成 React 应用的规划过程。它创建了一个 React 组件,封装了我们在本书中构建的整个 React 应用。它解释了父组件和子组件之间的关系。

第 6 章将您的 React 组件与另一个库一起使用,探讨如何将第三方 JavaScript 库与您的 React 组件一起使用。它介绍了 React 组件的生命周期,演示了如何使用装载方法,并展示了如何为本书的项目创建新的 React 组件。

第 7 章更新您的 React 组件,介绍您的 React 组件生命周期的更新方法。本文介绍了如何在 JavaScript 中使用 CSS 样式。它解释了如何验证和设置组件的默认属性。

第 8 章构建复杂的 React 组件,重点是构建更复杂的 React 组件。它探讨了如何实现不同的 React 组件以及如何将它们组合到一个连贯的、功能齐全的 React 应用中的细节。

第 9 章使用 Jest测试 React 应用,解释了单元测试的思想以及如何使用 Jest 编写和运行单元测试。它还演示了如何测试 React 组件。它讨论了测试套件、规格、期望和匹配器。

第 10 章使用流量为 React 架构增压,讨论如何改进 React 应用的架构。它介绍了 Flux 体系结构,并解释了 dispatchers、Store 和 action Creator 的角色。

第 11 章准备您的 React 应用,以便使用 Flux进行无痛维护,解释了如何将 React 应用中的问题与 Flux 解耦。它重构了我们的 React 应用,以便在将来实现无痛的可维护性。

第 12 章使用 Redux优化 Flux 应用,引导您了解 Flux 库的主要功能,然后对应用进行完整重构,以使用 Redux 作为控制状态的主要机制。

这本书你需要什么

首先,您需要最新版本的现代网络浏览器,如 Google Chrome 或 Mozilla Firefox:

其次,您需要安装 Git、Node.js 和 npm。您将在第 2 章为您的项目安装强大工具中找到关于如何安装和使用它们的详细说明。

最后,您需要一个代码编辑器。我推荐崇高的文本http://www.sublimetext.com )。或者,您可以使用原子https://atom.io括号http://brackets.ioVisual Studio 代码https://code.visualstudio.com ),或您选择的任何其他编辑。

这本书是给谁的

本书面向希望为 web 构建可伸缩和可维护的用户界面的前端开发人员。要从 React.js 为 web 开发带来的革命性思想中获益,您只需要了解一些 JavaScript、HTML 和 CSS 的核心知识。如果您以前有使用 jQuery 或 Angular.js 的经验,那么您将从了解 React.js 的不同之处以及如何利用与它集成的不同库中获益。

公约

在这本书中,你会发现许多不同类型的文本可以区分不同类型的信息。下面是这些风格的一些例子,并解释了它们的含义。

文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示:文本中的码字如下所示:“我们可以通过使用include指令来包括其他上下文。”

代码块设置如下:

import React from 'react';
import { render } from 'react-dom';

const reactElement = React.createElement(
  'h1', 
  { className: 'header' }
);

render(
  reactElement,
  document.getElementById('react-application')
);

当我们希望提请您注意代码块的特定部分时,相关行或项目以粗体显示:

<!doctype html>
  <html lang="en">
    <head>
      <title>Snapterest</title>
    </head>
    <body>
 <div id="react-application">
 I am about to learn the essentials of React.js.
 </div>
      <script src="./snapterest.js"></script>
    </body>
  </html>

任何命令行输入或输出的编写方式如下:

cd ~
git clone https://github.com/snapkite/snapkite-engine.git

新术语重要词语以粗体显示。例如,您在屏幕上、菜单或对话框中看到的文字会出现在文本中,如下所示:“单击下一个按钮可将您移动到下一个屏幕。”

警告或重要注释显示在这样的框中。

提示

提示和技巧如下所示。

读者反馈

我们欢迎读者的反馈。让我们知道你对这本书的看法你喜欢或可能不喜欢什么。读者反馈对于我们开发您真正从中获益最多的标题非常重要。

要向我们发送一般反馈,只需向<[feedback@packtpub.com](mailto:feedback@packtpub.com)>发送电子邮件,并通过邮件主题提及书名即可。

如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请参阅我们的作者指南,网址为www.packtpub.com/authors

客户支持

既然您是一本 Packt 图书的骄傲拥有者,我们有很多东西可以帮助您从购买中获得最大收益。

下载示例代码

您可以下载您在账户购买的所有 Packt 书籍的示例代码文件 http://www.packtpub.com 。如果您在其他地方购买了本书,您可以访问http://www.packtpub.com/support 并注册,将文件直接通过电子邮件发送给您。

您可以通过以下步骤下载代码文件:

  1. 使用您的电子邮件地址和密码登录或注册我们的网站。
  2. 将鼠标指针悬停在顶部的支架选项卡上。
  3. 点击代码下载&勘误表
  4. 搜索框中输入图书名称。
  5. 选择要下载代码文件的书籍。
  6. 从您购买本书的下拉菜单中选择。
  7. 点击代码下载

您也可以通过点击 Packt 出版网站上该书网页上的代码文件按钮下载代码文件。在搜索框中输入图书名称即可访问此页面。请注意,您需要登录到您的 Packt 帐户。

下载文件后,请确保使用以下最新版本解压或解压缩文件夹:

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/React-16-Essentials-Second-Edition 。我们在上还提供了丰富的书籍和视频目录中的其他代码包 https://github.com/PacktPublishing/ 。看看他们!

下载本书彩色图片

我们还为您提供了一个 PDF 文件,其中包含本书中使用的屏幕截图/图表的彩色图像。彩色图像将帮助您更好地了解输出中的变化。您可以从下载此文件 https://www.packtpub.com/sites/default/files/downloads/React16EssentialsSecondEdition_ColorImages.pdf

勘误表

虽然我们已尽一切努力确保内容的准确性,但错误确实会发生。如果您在我们的一本书中发现错误,可能是文本或代码中的错误,如果您能向我们报告,我们将不胜感激。通过这样做,您可以使其他读者免于沮丧,并帮助我们改进本书的后续版本。如果您发现任何错误,请访问进行报告 http://www.packtpub.com/submit-errata ,选择您的书籍,点击勘误表提交表链接,输入您勘误表的详细信息。一旦您的勘误表得到验证,您的提交将被接受,勘误表将上传到我们的网站上,或添加到该标题勘误表部分的任何现有勘误表列表中。通过从中选择您的标题,可以查看任何现有勘误表 http://www.packtpub.com/support

盗版

在互联网上盗版版权材料是所有媒体的一个持续问题。在 Packt,我们非常重视版权和许可证的保护。如果您在互联网上发现我们作品的任何形式的非法复制品,请立即向我们提供地址或网站名称,以便我们采取补救措施。

请致电<[copyright@packtpub.com](mailto:copyright@packtpub.com)>与我们联系,并提供可疑盗版材料的链接。

我们感谢您在保护我们的作者方面的帮助,以及我们为您带来有价值内容的能力。

问题

如果您对本书的任何方面有疑问,请致电<[questions@packtpub.com](mailto:questions@packtpub.com)>与我们联系,我们将尽力解决。