零、前言

React 是由 Facebook 构建的，目的是为他们的代码库提供更多的结构，并使其能够更好地扩展。React 在 Facebook 上运行得非常好，最终他们将其开源。今天，React 是用于构建前端的最流行的 JavaScript 库之一。它允许我们构建小型、独立且高度可重用的组件，这些组件可以组合在一起以创建复杂的前端。

TypeScript 由 Microsoft 构建，旨在帮助开发人员更轻松地构建大型前端应用程序。它是 JavaScript 的超集，为它带来了丰富的类型系统。这种类型的系统有助于开发人员及早发现 bug，并允许创建工具来稳健地导航和重构代码。

本书将教您如何使用这两种技术高效地创建易于维护的大型复杂前端。

这本书是给谁的

本书主要针对希望使用 React 和 TypeScript 创建大型 web 应用程序的 web 开发人员。假设对 JavaScript 和 HTML 有基本的了解。

这本书涵盖的内容

第一章、TypeScript 基础介绍了 TypeScript 类型系统，涵盖了基本类型。接下来，我们将介绍如何配置极其灵活的 TypeScript 编译器。还介绍了 Linting 和代码格式化以及它们的配置。

第 2 章TypeScript 3中的新功能，逐步介绍 TypeScript 第 3 版中引入的重要新功能。元组在本章中有着重要的功能，还有密切相关的 rest 和 spread 语法，以及我们如何将这些结构与强类型一起使用。在讨论在 React 组件中设置默认属性值时所做的改进之前，还将介绍如何有效地设置多个相关的 TypeScript 项目。

第 3 章开始学习 React 和 TypeScript，首先介绍如何创建使用这两种技术的项目。然后，本章介绍如何以基于类和函数的方式构建强类型 React 组件。管理状态和连接到生命周期事件也是本章的关键主题。

第 4 章路由与 React 路由介绍了一个库，可以帮助我们高效地创建一个具有多个页面的应用程序。它介绍了如何创建页面链接，以及如何声明应该呈现的组件。本章将逐步介绍如何实现路由参数、查询参数和嵌套路由。本章还介绍了如何按需从路由加载组件，以优化包含大量大型页面的应用程序的性能。

第 5 章高级类型只关注 TypeScript 类型。在这种情况下，将介绍更高级但仍然非常有用的类型，例如泛型类型、联合类型、重载签名以及 keyof 和 lookup 类型

第 6 章、组件模式介绍了在构建 React 组件的同时仍然保持强类型的一些常见模式。容器组件首先经过，然后是复合组件。本章还介绍了流行的渲染道具模式和高阶组件。

第 7 章使用表单介绍了如何使用 React 和 TypeScript 高效地实现表单。通用表单组件是逐步构建的，包括验证和提交。

第 8 章React Redux介绍了这个流行的库如何帮助管理应用程序中的状态。强类型 Redux 存储是使用操作和减缩器构建的。本章最后介绍了一个新的 React 函数如何在没有 Redux 的情况下允许组件内具有 Redux 风格的结构。

第 9 章与 RESTful API交互，首先详细介绍异步代码。本章接着介绍如何使用本机 JavaScript 函数以及流行的开源库与 RESTful API 交互。

第 10 章与 GraphQL API交互，首先介绍读写数据的语法。本章介绍了在使用流行的专用库之前，如何使用 HTTP 库与 GraphQL 服务器交互

第 11 章用 Jest进行单元测试，介绍了如何测试纯功能和反应组件。一个流行的开源库被用来在重构组件内部时降低测试的脆弱性。Jest 的一些重要特性是逐步实现的，例如快照测试、模拟和代码覆盖率

答案包含本书各章中所有练习的答案。

充分利用这本书

您需要了解 JavaScript 的基础知识，包括以下内容：

  • 了解一些基本 JavaScript 类型，如字符串、数字、布尔值、null 和未定义
  • 了解如何创建变量并引用它们，包括数组和对象
  • 了解如何创建函数并调用它们
  • 了解如何使用 if 和 else 关键字创建条件语句

您需要了解 HTML 的基本知识，包括以下内容：

  • 了解基本 HTML 标记，如 div、ul、p、a、h1 和 h2，以及如何将它们组合在一起创建网页
  • 了解如何引用 CSS 类来设置 HTML 元素的样式

了解基本 CSS 也很有帮助，但不是必要的：

  • 如何调整元素大小并包括边距和填充
  • 如何定位元素
  • 如何为元素着色

您需要在计算机上安装以下技术：

npm install -g typescript

下载示例代码文件

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

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

  1. 登录或注册www.packt.com。
  2. 选择“支持”选项卡。
  3. 点击代码下载和勘误表。
  4. 在搜索框中输入图书名称，然后按照屏幕上的说明进行操作。

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

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

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Learn-React-with-TypeScript-3 。如果代码有更新，它将在现有 GitHub 存储库中更新。

我们的丰富书籍和视频目录中还有其他代码包，请访问https://github.com/PacktPublishing/ 。看看他们！

下载彩色图像

我们还提供了一个 PDF 文件，其中包含本书中使用的屏幕截图/图表的彩色图像。您可以在这里下载：https://www.packtpub.com/sites/default/files/downloads/9781789610253_ColorImages.pdf 。

使用的惯例

本书中使用了许多文本约定。

CodeInText：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例：“让我们在项目的根目录中创建一个名为tsconfig.json的新文件。”

代码块设置如下：

import * as React from "react";

const App: React.SFC = () => {
  return <h1>My React App!</h1>;
};

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

interface IProps {
 title: string;
  content: string;
  cancelCaption?: string;
 okCaption?: string;
}

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

cd my-components
npm install tslint tslint-react tslint-config-prettier --save-dev

粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“我们需要单击安装选项来安装扩展。”

Warnings or important notes appear like this. Tips and tricks appear like this.

联系

我们欢迎读者的反馈。

一般反馈：如果您对本书的任何方面有疑问，请在邮件主题中注明书名，并发送电子邮件至customercare@packtpub.com。

勘误表：尽管我们已尽一切努力确保内容的准确性，但还是会出现错误。如果您在本书中发现错误，如果您能向我们报告，我们将不胜感激。请访问www.packt.com/submit-errata，选择您的书籍，点击 errata 提交表单链接，并输入详细信息。

盗版：如果您在互联网上发现我们作品的任何形式的非法复制品，请您提供我们的位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com与我们联系，并提供该材料的链接。

如果您有兴趣成为一名作家：如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请访问authors.packtpub.com。

评论

请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在读者可以看到并使用您的无偏见意见做出购买决定，我们 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们书籍的反馈。非常感谢。

有关 Packt 的更多信息，请访问Packt.com。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/9287.html