0.md

零、前言

Angular 和 React 等项目正在迅速改变开发团队构建 web 应用程序并将其部署到生产环境的方式。在这本书中，您将学习使用 React 和应对现实世界项目和挑战所需的基础知识。这本书包含了如何在开发过程中考虑关键用户需求的有益指导，还展示了如何使用诸如状态管理、数据绑定、路由和流行的组件标记（JSX）等高级概念。当您完成所包含的示例时，您会发现自己已经准备好进入真实世界的个人或专业前端项目。

完成本书后，您将能够：

• 了解 React 如何在更广泛的应用程序堆栈中工作
• 分析如何将标准接口分解为特定组件
• 使用 HTML 或 JSX 成功创建您自己日益复杂的 React 组件
• 正确处理多个用户事件及其对整个应用程序状态的影响
• 了解组件生命周期以优化应用程序的用户体验
• 配置路由，以便轻松直观地导航组件

这本书是给谁的

如果您是一名前端开发人员，希望用 JavaScript 创建真正的反应式用户界面，那么这本书适合您。为了做出反应，您需要在 JavaScript 语言的基础上建立坚实的基础，包括在 ES2015 中引入的新 OOP 特征。假设理解 HTML 和 CSS，并且 Node.js 的基本知识在管理开发工作流的上下文中是有用的，但不是必需的。

这本书涵盖的内容

第一章介绍 React 和 UI 设计，介绍 React 并帮助我们开始构建基于 React 的应用程序的基础架构。然后，我们将分析如何设计一个用户界面，以便它可以很容易地映射到组件。

第 2 章创建组件教我们如何实现 React 组件，如何将多个组件组装成一个组件，以及如何管理其内部状态。我们将通过构建一个简单的应用程序来探索 React 组件的实现。

第 3 章管理用户交互教我们如何管理用户与基于 React 的用户界面组件交互产生的事件。我们将探索 React 组件生命周期中触发的事件，并将学习如何利用这些事件来创建高效组件。

充分利用这本书

本手册要求系统具备以下最低硬件要求：

• 处理器：奔腾 4（或同等产品）
• 4 GB 内存
• 硬盘空间：10 GB
• 因特网连接

还应安装以下软件：

• 任何现代操作系统（最好是 Windows 10 版本 1507）
• Node.js 的最新版本（https://nodejs.org/en/ ）
• 任何现代浏览器的最新版本（最好是 Chrome）

下载示例代码文件

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

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

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

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

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

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

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

下载彩色图像

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

使用的惯例

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

CodeInText：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。这里有一个例子：“通过包装App组件，BrowserRouter组件丰富了它的路由功能。”

代码块设置如下：

class Catalog extends React.Component {
  constructor() {
    super();

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

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
 <BrowserRouter>
    <App />
 </BrowserRouter>
  , document.getElementById('root'));

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

create-react-app --version

粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“现在我们需要创建一个视图来显示目录组件或关于页面。”

活动：这些是基于情景的活动，可以让你在整个课程中实际应用所学知识。它们通常是在现实世界问题或情况的背景下出现的。

Warnings or important notes appear like this.

联系

我们欢迎读者的反馈。

一般反馈：发送电子邮件[email protected]并在邮件主题中提及书名。如果您对本书的任何方面有疑问，请发送电子邮件至[email protected]。

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

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

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

评论

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

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