From e1f21f312cefde4e3a896ad82a129f9caea8a99f Mon Sep 17 00:00:00 2001
From: wizardforcel <wizard.z@qq.com>
Date: Thu, 16 May 2024 13:35:28 +0800
Subject: [PATCH] 2024-05-16 13:35:26

---
 docs/bg-react/SUMMARY.md      |    8 +-
 docs/bg-react/bg-react_0.md   |  116 ++-
 docs/bg-react/bg-react_0.yaml |  328 --------
 docs/bg-react/bg-react_1.md   |  450 +++++++++-
 docs/bg-react/bg-react_1.yaml | 1164 --------------------------
 docs/bg-react/bg-react_2.md   |  843 ++++++++++++++++++-
 docs/bg-react/bg-react_2.yaml | 1338 ------------------------------
 docs/bg-react/bg-react_3.md   |  812 +++++++++++++++++-
 docs/bg-react/bg-react_3.yaml | 1447 ---------------------------------
 9 files changed, 2221 insertions(+), 4285 deletions(-)
 delete mode 100644 docs/bg-react/bg-react_0.yaml
 delete mode 100644 docs/bg-react/bg-react_1.yaml
 delete mode 100644 docs/bg-react/bg-react_2.yaml
 delete mode 100644 docs/bg-react/bg-react_3.yaml

diff --git a/docs/bg-react/SUMMARY.md b/docs/bg-react/SUMMARY.md
index 55865ff..3edbd69 100644
--- a/docs/bg-react/SUMMARY.md
+++ b/docs/bg-react/SUMMARY.md
@@ -1,4 +1,4 @@
-+   [第一章](bg-react_0.md)
-+   [第二章](bg-react_1.md)
-+   [第三章](bg-react_2.md)
-+   [第四章](bg-react_3.md)
\ No newline at end of file
++   [前言](bg-react_0.md)
++   [第一章：介绍 React 和用户界面设计](bg-react_1.md)
++   [第二章：创建组件](bg-react_2.md)
++   [第三章：管理用户交互性](bg-react_3.md)
\ No newline at end of file
diff --git a/docs/bg-react/bg-react_0.md b/docs/bg-react/bg-react_0.md
index fb4fcfc..39b6db2 100644
--- a/docs/bg-react/bg-react_0.md
+++ b/docs/bg-react/bg-react_0.md
@@ -1,2 +1,116 @@
-# 第一章
+# 前言
 
+诸如 Angular 和 React 之类的项目正在迅速改变开发团队构建和部署 Web 应用程序到生产环境的方式。在本书中，你将学习到使用 React 入门所需的基础知识，并应对现实世界的项目和挑战。本书包含了在开发过程中考虑关键用户需求的实用指导，并展示了如何处理高级概念，如状态管理、数据绑定、路由以及流行的 JSX 组件标记。完成本书中的示例后，你将发现自己已经准备好转向实际的个人或专业前端项目。
+
+完成本书后，你将能够：
+
++   理解 React 如何在更广泛的应用程序堆栈中工作
+
++   分析如何将标准界面分解为特定组件
+
++   成功创建你自己的越来越复杂的 React 组件，无论是使用 HTML 还是 JSX
+
++   正确处理多个用户事件及其对整体应用程序状态的影响
+
++   理解组件生命周期以优化应用程序的用户体验
+
++   配置路由以允许通过你的组件进行轻松、直观的导航
+
+# 本书适合的读者
+
+如果你是一名前端开发者，希望在 JavaScript 中创建真正反应式的用户界面，那么这本书适合你。对于 React，你需要在 JavaScript 语言的基本要素方面有坚实的基础，包括 ES2015 中引入的新 OOP 特性。假设你了解 HTML 和 CSS，并且对 Node.js 有基本了解，这在管理开发工作流程的上下文中将是有用的，但不是必需的。
+
+# 本书涵盖的内容
+
+第一章，*介绍 React 和 UI 设计*，介绍 React 并帮助我们开始构建基于 React 的应用程序的基本基础设施。然后，我们将分析如何设计用户界面，以便它可以轻松映射到 React 组件。
+
+第二章，*创建组件*，教我们如何实现 React 组件，如何将多个组件组合成一个，以及如何管理它们的内部状态。我们将通过构建一个简单的应用程序来探索 React 组件的实现。
+
+第三章，*管理用户交互*，教我们如何管理用户与基于 React 的用户界面组件交互产生的事件。我们将探索在 React 组件生命周期中触发的事件，并学习如何利用它们来创建高效的组件。
+
+# 充分利用本书
+
+本书将需要具有以下最低硬件要求的系统：
+
++   处理器：Pentium 4（或同等产品）
+
++   4 GB RAM
+
++   硬盘空间：10 GB
+
++   互联网连接
+
+以下软件也应该安装：
+
++   任何现代操作系统（最好是 Windows 10 版本 1507）
+
++   最新版本的 Node.js（[`nodejs.org/en/`](https://nodejs.org/en/)）
+
++   任何现代浏览器的最新版本（最好是 Chrome）
+
+# 下载示例代码文件
+
+您可以从[www.packtpub.com](http://www.packtpub.com)上的帐户下载本书的示例代码文件。如果您在其他地方购买了本书，可以访问[www.packtpub.com/support](http://www.packtpub.com/support)并注册，以便将文件直接发送到您的邮箱。
+
+您可以按照以下步骤下载代码文件：
+
+1.  登录或注册于[www.packtpub.com](http://www.packtpub.com/support)。
+
+1.  选择支持选项卡。
+
+1.  点击代码下载与勘误。
+
+1.  在搜索框中输入书名，并按照屏幕上的指示操作。
+
+下载文件后，请确保使用最新版本的以下软件解压缩或提取文件夹：
+
++   适用于 Windows 的 WinRAR/7-Zip
+
++   适用于 Mac 的 Zipeg/iZip/UnRarX
+
++   适用于 Linux 的 7-Zip/PeaZip
+
+本书的代码包也托管在 GitHub 上，地址为[`github.com/TrainingByPackt/Beginning-React`](https://github.com/TrainingByPackt/Beginning-React)。如果有代码更新，将会在现有的 GitHub 仓库中更新。
+
+我们还有来自丰富图书和视频目录的其他代码包，可在**[`github.com/PacktPublishing/`](https://github.com/PacktPublishing/)**上查看。去看看吧！
+
+# 下载彩色图像
+
+我们还提供了一个包含本书中使用的截图/图表的彩色图像的 PDF 文件。您可以在此处下载：[`www.packtpub.com/sites/default/files/downloads/BeginningReact_ColorImages.pdf`](https://www.packtpub.com/sites/default/files/downloads/BeginningReact_ColorImages.pdf)。
+
+# 使用的约定
+
+本书中使用了多种文本约定。
+
+`CodeInText`：表示文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。例如：“通过包装`App`组件，`BrowserRouter`组件为其赋予了路由功能。”
+
+代码块设置如下：
+
+```jsx
+class Catalog extends React.Component {
+  constructor() {
+    super();
+```
+
+当我们希望引起您对代码块特定部分的注意时，相关行或项目以粗体显示：
+
+```jsx
+import { BrowserRouter } from 'react-router-dom'
+ReactDOM.render(
+ <BrowserRouter>
+    <App />
+ </BrowserRouter>
+  , document.getElementById('root'));
+```
+
+任何命令行输入或输出都以下列方式书写：
+
+```jsx
+create-react-app --version
+```
+
+**粗体**：表示新术语、重要单词或屏幕上看到的单词。例如，菜单或对话框中的单词以这种方式出现在文本中。例如：“现在我们需要创建一个视图来显示**目录**组件或**关于**页面。”
+
+**活动**：这些是基于场景的活动，将让您在完整的部分过程中实际应用所学知识。它们通常是在现实世界问题或情况的背景下。
+
+警告或重要提示以这种方式出现。
diff --git a/docs/bg-react/bg-react_0.yaml b/docs/bg-react/bg-react_0.yaml
deleted file mode 100644
index 1841b3c..0000000
--- a/docs/bg-react/bg-react_0.yaml
+++ /dev/null
@@ -1,328 +0,0 @@
-- en: Preface
-  id: totrans-0
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 前言
-- en: Projects like Angular and React are rapidly changing how development teams build
-    and deploy web applications to production. In this book, you'll learn the basics
-    you need to get up and running with React and tackle real-world projects and challenges.
-    The book includes helpful guidance on how to consider key user requirements within
-    the development process, and also shows you how to work with advanced concepts
-    such as state management, data-binding, routing, and the popular component markup
-    that is JSX. As you complete the included examples you'll find yourself well-equipped
-    to move onto a real-world personal or professional frontend project.
-  id: totrans-1
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 诸如Angular和React之类的项目正在迅速改变开发团队构建和部署Web应用程序到生产环境的方式。在本书中，你将学习到使用React入门所需的基础知识，并应对现实世界的项目和挑战。本书包含了在开发过程中考虑关键用户需求的实用指导，并展示了如何处理高级概念，如状态管理、数据绑定、路由以及流行的JSX组件标记。完成本书中的示例后，你将发现自己已经准备好转向实际的个人或专业前端项目。
-- en: 'After completing this book, you will be able to:'
-  id: totrans-2
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 完成本书后，你将能够：
-- en: Understand how React works within a wider application stack
-  id: totrans-3
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 理解React如何在更广泛的应用程序堆栈中工作
-- en: Analyze how you can break down a standard interface into specific components
-  id: totrans-4
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 分析如何将标准界面分解为特定组件
-- en: Successfully create your own increasingly complex React components with HTML
-    or JSX
-  id: totrans-5
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 成功创建你自己的越来越复杂的React组件，无论是使用HTML还是JSX
-- en: Correctly handle multiple user events and their impact on overall application
-    state
-  id: totrans-6
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 正确处理多个用户事件及其对整体应用程序状态的影响
-- en: Understand the component lifecycle to optimize the UX of your application
-  id: totrans-7
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 理解组件生命周期以优化应用程序的用户体验
-- en: Configure routing to allow effortless, intuitive navigation through your components
-  id: totrans-8
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 配置路由以允许通过你的组件进行轻松、直观的导航
-- en: Who This Book Is For
-  id: totrans-9
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 本书适合的读者
-- en: If you are a frontend developer who wants to create truly reactive user interfaces
-    in JavaScript, then this the book for you. For React, you'll need a solid foundation
-    in the essentials of the JavaScript language, including new OOP features that
-    were introduced in ES2015\. An understanding of HTML and CSS is assumed, and a
-    basic knowledge of Node.js will be useful in the context of managing a development
-    workflow, but is not essential.
-  id: totrans-10
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果你是一名前端开发者，希望在JavaScript中创建真正反应式的用户界面，那么这本书适合你。对于React，你需要在JavaScript语言的基本要素方面有坚实的基础，包括ES2015中引入的新OOP特性。假设你了解HTML和CSS，并且对Node.js有基本了解，这在管理开发工作流程的上下文中将是有用的，但不是必需的。
-- en: What This Book Covers
-  id: totrans-11
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 本书涵盖的内容
-- en: '[Chapter 1](6eb91088-46e5-46ee-b44e-8452f3bd61e4.xhtml), *Introducing React and
-    UI Design*, introduces React and helps us to start building the basic infrastructure
-    of a React-based application. Then, we will analyze how to design a user interface
-    so that it can be easily mapped to React components.'
-  id: totrans-12
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '[第1章](6eb91088-46e5-46ee-b44e-8452f3bd61e4.xhtml)，*介绍React和UI设计*，介绍React并帮助我们开始构建基于React的应用程序的基本基础设施。然后，我们将分析如何设计用户界面，以便它可以轻松映射到React组件。'
-- en: '[Chapter 2](f4bfb4d0-18d6-4769-9bd4-c047c4a84651.xhtml), *Creating Components*, teaches
-    us how to implement React components, how to assemble multiple components into
-    one, and how to manage their internal states. We will explore React component
-    implementation by building a simple application.'
-  id: totrans-13
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '[第2章](f4bfb4d0-18d6-4769-9bd4-c047c4a84651.xhtml)，*创建组件*，教我们如何实现React组件，如何将多个组件组合成一个，以及如何管理它们的内部状态。我们将通过构建一个简单的应用程序来探索React组件的实现。'
-- en: '[Chapter 3](e40f7b50-96a4-4f53-bb1d-39ca8c567995.xhtml), *Managing User Interactivity*, teaches
-    us how to manage the events generated by a user''s interaction with the components
-    of a React-based user interface. We will explore the events that are triggered
-    during the lifecycle of a React component, and will learn how to exploit them
-    in order to create efficient components.'
-  id: totrans-14
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '[第3章](e40f7b50-96a4-4f53-bb1d-39ca8c567995.xhtml)，*管理用户交互*，教我们如何管理用户与基于React的用户界面组件交互产生的事件。我们将探索在React组件生命周期中触发的事件，并学习如何利用它们来创建高效的组件。'
-- en: To Get the Most out of This Book
-  id: totrans-15
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 充分利用本书
-- en: 'This book will require a system with the following minimum hardware requirements:'
-  id: totrans-16
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 本书将需要具有以下最低硬件要求的系统：
-- en: 'Processor: Pentium 4 (or equivalent)'
-  id: totrans-17
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 处理器：Pentium 4（或同等产品）
-- en: 4 GB RAM
-  id: totrans-18
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 4 GB RAM
-- en: 'Hard disk space: 10 GB'
-  id: totrans-19
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 硬盘空间：10 GB
-- en: An internet connection
-  id: totrans-20
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 互联网连接
-- en: 'The following software should also be installed:'
-  id: totrans-21
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下软件也应该安装：
-- en: Any modern operating system (preferably, Windows 10 version 1507)
-  id: totrans-22
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 任何现代操作系统（最好是Windows 10版本1507）
-- en: The latest version of Node.js ([https://nodejs.org/en/](https://nodejs.org/en/))
-  id: totrans-23
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 最新版本的Node.js（[https://nodejs.org/en/](https://nodejs.org/en/)）
-- en: The latest version of any modern browser (preferably, Chrome)
-  id: totrans-24
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 任何现代浏览器的最新版本（最好是Chrome）
-- en: Download the Example Code Files
-  id: totrans-25
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 下载示例代码文件
-- en: You can download the example code files for this book from your account at [www.packtpub.com](http://www.packtpub.com).
-    If you purchased this book elsewhere, you can visit [www.packtpub.com/support](http://www.packtpub.com/support)
-    and register to have the files emailed directly to you.
-  id: totrans-26
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 您可以从[www.packtpub.com](http://www.packtpub.com)上的帐户下载本书的示例代码文件。如果您在其他地方购买了本书，可以访问[www.packtpub.com/support](http://www.packtpub.com/support)并注册，以便将文件直接发送到您的邮箱。
-- en: 'You can download the code files by following these steps:'
-  id: totrans-27
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 您可以按照以下步骤下载代码文件：
-- en: Log in or register at [www.packtpub.com](http://www.packtpub.com/support).
-  id: totrans-28
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 登录或注册于[www.packtpub.com](http://www.packtpub.com/support)。
-- en: Select the SUPPORT tab.
-  id: totrans-29
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 选择支持选项卡。
-- en: Click on Code Downloads & Errata.
-  id: totrans-30
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 点击代码下载与勘误。
-- en: Enter the name of the book in the Search box and follow the onscreen instructions.
-  id: totrans-31
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 在搜索框中输入书名，并按照屏幕上的指示操作。
-- en: 'Once the file is downloaded, please make sure that you unzip or extract the
-    folder using the latest version of:'
-  id: totrans-32
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 下载文件后，请确保使用最新版本的以下软件解压缩或提取文件夹：
-- en: WinRAR/7-Zip for Windows
-  id: totrans-33
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 适用于Windows的WinRAR/7-Zip
-- en: Zipeg/iZip/UnRarX for Mac
-  id: totrans-34
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 适用于Mac的Zipeg/iZip/UnRarX
-- en: 7-Zip/PeaZip for Linux
-  id: totrans-35
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 适用于Linux的7-Zip/PeaZip
-- en: The code bundle for the book is also hosted on GitHub at [https://github.com/TrainingByPackt/Beginning-React](https://github.com/TrainingByPackt/Beginning-React). In
-    case there's an update to the code, it will be updated on the existing GitHub
-    repository.
-  id: totrans-36
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 本书的代码包也托管在GitHub上，地址为[https://github.com/TrainingByPackt/Beginning-React](https://github.com/TrainingByPackt/Beginning-React)。如果有代码更新，将会在现有的GitHub仓库中更新。
-- en: We also have other code bundles from our rich catalog of books and videos available
-    at **[https://github.com/PacktPublishing/](https://github.com/PacktPublishing/)**.
-    Check them out!
-  id: totrans-37
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们还有来自丰富图书和视频目录的其他代码包，可在**[https://github.com/PacktPublishing/](https://github.com/PacktPublishing/)**上查看。去看看吧！
-- en: Download the Color Images
-  id: totrans-38
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 下载彩色图像
-- en: 'We also provide a PDF file that has color images of the screenshots/diagrams
-    used in this book. You can download it here: [https://www.packtpub.com/sites/default/files/downloads/BeginningReact_ColorImages.pdf](https://www.packtpub.com/sites/default/files/downloads/BeginningReact_ColorImages.pdf).'
-  id: totrans-39
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们还提供了一个包含本书中使用的截图/图表的彩色图像的PDF文件。您可以在此处下载：[https://www.packtpub.com/sites/default/files/downloads/BeginningReact_ColorImages.pdf](https://www.packtpub.com/sites/default/files/downloads/BeginningReact_ColorImages.pdf)。
-- en: Conventions Used
-  id: totrans-40
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 使用的约定
-- en: There are a number of text conventions used throughout this book.
-  id: totrans-41
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 本书中使用了多种文本约定。
-- en: '`CodeInText`: Indicates code words in text, database table names, folder names,
-    filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles.
-    Here is an example: "By wrapping the `App` component, the `BrowserRouter` component
-    enriches it with routing capabilities."'
-  id: totrans-42
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`CodeInText`：表示文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟URL、用户输入和Twitter句柄。例如：“通过包装`App`组件，`BrowserRouter`组件为其赋予了路由功能。”'
-- en: 'A block of code is set as follows:'
-  id: totrans-43
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 代码块设置如下：
-- en: '[PRE0]'
-  id: totrans-44
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE0]'
-- en: 'When we wish to draw your attention to a particular part of a code block, the
-    relevant lines or items are set in bold:'
-  id: totrans-45
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当我们希望引起您对代码块特定部分的注意时，相关行或项目以粗体显示：
-- en: '[PRE1]'
-  id: totrans-46
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE1]'
-- en: 'Any command-line input or output is written as follows:'
-  id: totrans-47
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 任何命令行输入或输出都以下列方式书写：
-- en: '[PRE2]'
-  id: totrans-48
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE2]'
-- en: '**Bold**: Indicates a new term, an important word, or words that you see onscreen.
-    For example, words in menus or dialog boxes appear in the text like this. Here
-    is an example: "Now we need to create a view to display the **Catalog** component
-    or the **About** page."'
-  id: totrans-49
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**粗体**：表示新术语、重要单词或屏幕上看到的单词。例如，菜单或对话框中的单词以这种方式出现在文本中。例如：“现在我们需要创建一个视图来显示**目录**组件或**关于**页面。”'
-- en: '**Activity**: These are scenario-based activities that will let you practically
-    apply what you''ve learned over the course of a complete section. They are typically
-    in the context of a real-world problem or situation.'
-  id: totrans-50
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**活动**：这些是基于场景的活动，将让您在完整的部分过程中实际应用所学知识。它们通常是在现实世界问题或情况的背景下。'
-- en: Warnings or important notes appear like this.
-  id: totrans-51
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 警告或重要提示以这种方式出现。
diff --git a/docs/bg-react/bg-react_1.md b/docs/bg-react/bg-react_1.md
index 249bd13..2814990 100644
--- a/docs/bg-react/bg-react_1.md
+++ b/docs/bg-react/bg-react_1.md
@@ -1,2 +1,450 @@
-# 第二章
+# 第一章：介绍 React 和用户界面设计
 
+React 无疑是网络上讨论最多的库之一。它已经变得像 jQuery 在其鼎盛时期一样流行，越来越多的开发者选择它来构建他们的网页应用程序的用户界面。为什么它变得如此流行？为什么这个 JavaScript 库与其他库相比如此创新？
+
+我们将在本书中尝试回答这些问题，展示该库提供的内容，并使用它来构建高效的网页用户界面。
+
+在本章中，我们将介绍 React，并开始构建基于 React 的应用程序的基本基础设施。然后，我们将分析如何设计用户界面，以便它可以轻松映射到 React 组件，充分利用 React 的内部架构。
+
+在本章结束时，你将能够：
+
++   描述 React 是什么以及它在你的应用程序开发中的作用
+
++   搭建基于 React 的应用程序的基础设施
+
++   设计你的应用程序的用户界面，并优化其在 React 中的使用
+
+# 什么是 React？
+
+简而言之，React 是一个用于构建可组合用户界面的 JavaScript 库。这意味着我们可以通过组合称为**组件**的项来构建用户界面。组件是构建用户界面的元素。它可以是一个文本框、一个按钮、一个完整的表单、一组其他组件，等等。甚至整个应用程序的用户界面也是一个组件。因此，React 鼓励创建组件来构建用户界面；如果这些组件是可重用的，那就更好了。
+
+React 组件有能力展示随时间变化，并且当我们遵循一些指导原则时，该变化数据的可视化是自动的。
+
+由于该库涉及用户界面，你可能会好奇 React 受到了哪些展示设计模式的影响：**模型-视图-控制器**、**模型-视图-展示器**、**模型-视图-视图模型**，还是其他。React 并不局限于特定的展示模式。React 实现了最常见模式中的*视图*部分，让开发者自由选择最佳方法来实现模型、展示器以及构建应用程序所需的其他一切。这一点很重要，因为它使我们能够将其归类为库，而不是框架；因此，与 Angular 等框架的比较可能会出现一些不一致之处。
+
+# 如何搭建基于 React 的应用程序
+
+React 是一个 JavaScript 库，因此我们应该能够通过 HTML 页面中的`<script>`标签引用它并开始编写我们的 Web 应用程序。然而，这种方法会阻止我们利用现代 JavaScript 开发环境提供的一些功能——这些功能使我们的生活更轻松。例如，我们将无法使用 ECMAScript 2015+的最新功能，如类、模块、箭头函数、`let`和`const`语句等。或者，我们可以使用这些功能，但只有最近的浏览器才会支持它们。
+
+**ECMAScript 与 JavaScript 的关系**
+
+使用最新的 ECMAScript 功能需要一个真正的开发环境，允许我们将代码转换为 ECMAScript 5 版本的 JavaScript 代码，以便即使旧的浏览器也能够运行我们的应用程序。设置现代 JavaScript 开发环境需要安装和配置一些工具：一个转换器、一个语法检查器、一个模块捆绑器、一个任务运行器等。学习正确使用这些工具需要大量时间，甚至在开始编写一行代码之前。
+
+# **安装 create-react-app**
+
+幸运的是，我们可以使用`create-react-app`，这是一个**命令行界面**（**CLI**）工具，它允许我们无需配置任何上述工具即可设置基于 React 的应用程序。它基于 Node.js，并提供命令以即时方式设置和修改 React 应用程序。
+
+为了安装`create-react-app`，您需要在您的机器上安装 Node.js。您可以在控制台窗口中输入以下命令来安装 CLI：
+
+```jsx
+npm install -g create-react-app
+```
+
+安装后，您可以通过输入以下命令来验证是否已正确安装：
+
+```jsx
+create-react-app --version
+```
+
+如果一切正常，将显示已安装的`create-react-app`版本。
+
+# **创建您的第一个 React 应用程序**
+
+既然开发环境已安装，让我们创建我们的第一个 React 应用程序。我们可以在控制台窗口中输入以下命令来执行此操作：
+
+```jsx
+create-react-app hello-react
+```
+
+此命令告诉`create-react-app`为名为`hello-react`的 React 应用程序设置所有先决条件。创建过程可能需要几分钟，因为它必须下载项目所需的 npm 包。
+
+npm 是 Node.js 环境的默认包管理器。当进程结束时，您将在屏幕上找到可用于管理项目的可用命令列表。我们稍后会回到这一点。项目创建的结果将是一个名为`hello-react`的文件夹，在其中您将找到构成一个虚拟的——但可工作的——基于 React 的应用程序的项。
+
+# **活动：使用 create-react-app 创建应用程序**
+
+**场景**
+
+我们需要设置一个开发环境，以便创建一个使用 React 构建的产品目录应用程序。
+
+**目的**
+
+活动的目的是开始熟悉`create-react-app`及其创建的内容。
+
+**完成步骤**
+
+1.  使用 `create-react-app` 创建开发环境
+
+1.  将示例应用程序命名为 `my-shop`
+
+**解决方案**
+
+没有正式的解决方案。你应该专注于由 `create-react-app` 创建的内容，因为接下来我们将在以下部分中分析它。
+
+# 探索生成的内容
+
+让我们来看看 `create-react-app` 生成的文件，以便我们能够理解基于 React 的应用程序的结构。我们将在 `HELLO-REACT` 文件夹中找到这些文件和文件夹，如下面的截图所示：
+
+![](img/b24741a3-0f38-44cd-a832-5fd756aa5339.png)
+
+在根文件夹中，我们可以看到一个 `README.md` 文件、`package.json` 文件和 `.gitignore` 文件。
+
+`README` 文档包含开始构建基于 React 的应用程序所需的所有引用。它是以 Markdown 格式编写的，你可以将其与自己的文档集成或覆盖。
+
+Markdown 是一种简单的标记语言，常用于创建软件库的技术文档。它只需要一个简单的文本编辑器，并且可以将 Markdown 文档转换为 HTML。
+
+`package.json` 文件包含有关项目的信息，如名称、版本等，以及对当前项目使用的所有 npm 包的引用。这是一个 Node.js 资源，允许你在将项目复制到另一台机器时下载所需的包。它还包含允许我们管理项目本身的脚本定义。
+
+以下是 `package.json` 文件内容的示例：
+
+```jsx
+{
+  "name": "hello-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "¹⁶.0.0",
+    "react-dom": "¹⁶.0.0",
+    "react-scripts": "1.0.14"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+正如我们所见，文件内容是一个 JSON 对象，有几个易于识别的属性。特别是，我们可以识别项目的名称、版本和包依赖项。除了名称和版本属性外，通常你不需要手动更改这些设置。
+
+`.gitignore` 文件是 Unix 系统中的隐藏文件，它允许我们跟踪在使用 Git 作为版本控制系统时要忽略的文件。`create-react-app` 工具添加了这个文件，因为现在，将项目置于版本控制之下是必不可少的。它建议使用 Git，因为它是目前最流行的版本控制系统之一。
+
+`public` 文件夹包含我们应用程序的静态部分：
+
++   `favicon`：这是在浏览器地址栏中显示的图标，用于书签
+
++   `index.html`：这是包含对我们的 React 代码的引用并提供 React 渲染上下文的 HTML 页面
+
++   `manifest.json`：这是一个根据 **渐进式 Web 应用**（**PWA**）标准包含元数据的配置文件
+
+特别是，`index.html` 文件是我们应用程序的起点。让我们来看看它，以便我们能够理解它的特别之处：
+
+```jsx
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+...
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+  <div id="root"></div>
+...
+</html>
+```
+
+正如我们所见，它是一个标准的 HTML 页面；然而，有几点需要注意。首先，我们看到一个指向 `manifest.json` 文件的链接：
+
+```jsx
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+```
+
+这个清单包含将我们的应用配置为 PWA 的元数据。
+
+渐进式 Web 应用是适用于每个浏览器和平台的 Web 应用，甚至可以离线工作。它们的基本原则是响应性和渐进增强。
+
+我们注意到的第二件事是两个链接引用中都存在的`%PUBLIC_URL%`占位符。
+
+```jsx
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+```
+
+这个占位符将在构建过程中被`public`文件夹的实际 URL 替换。
+
+HTML 页面的主体包含一个带有根标识符的空`div`。这是我们 React 应用程序正确设置的一个重要项目，我们很快就会看到。除了`<noscript>`标签外，我们在主体中看不到其他元素。然而，我们需要在 HTML 页面和 JavaScript 之间建立绑定。构建过程将负责向主体添加所需的脚本。
+
+我们可以向 HTML 页面添加任何其他必需的项目，例如元标签、网络字体等。但是，请记住，HTML 标记中引用的文件应该放在`public`文件夹中。`node_modules`文件夹包含项目使用的 npm 包。通常，您不需要直接管理这些文件。
+
+开发我们应用程序最重要的文件夹是`src`文件夹。它包含我们可以根据需要修改的基本文件和代码。
+
+特别是，我们将找到以下文件：
+
++   `index.js`：包含我们应用程序的启动点。
+
++   `index.css`：存储我们应用程序的基本样式。
+
++   `App.js`：包含示例应用程序的主要组件的定义。
+
++   `App.css`：包含`App`组件的样式。
+
++   `logo.svg`：这是 React 的标志。
+
++   `App.test.js`：存储涉及`App`组件的基本单元测试。
+
++   `registerServiceWorker.js`：包含注册服务工作者的代码，以便允许离线行为，符合 PWA 的要求。
+
+让我们分析一下这些文件的内容，因为它们的代码对于理解 React 应用程序的启动方式至关重要。
+
+让我们从`index.js`文件开始。其内容如下所示：
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+registerServiceWorker();
+```
+
+它是一个 ECMAScript 2015 模块，导入其他模块。特别是，它从`react`和`react-dom`模块分别导入`React`和`ReactDOM`对象。这两个模块都是 React 库的一部分，存储在`node_modules`文件夹中。
+
+`react`模块提供组件创建和状态管理的功能。`react-dom`模块是 React 组件和 HTML DOM 之间的粘合剂。React 库被分为两个模块，以将组件管理与实际渲染分离。当我们想要针对的不是 Web 的渲染平台时，这种分离可能会有用；例如，如果我们想要针对原生移动渲染。
+
+其他模块从与`index.js`文件相同的文件夹中导入。特别是，我们从`App`模块导入`App`组件。`App`组件由`ReactDOM`对象的`render()`方法使用，以便将其绑定到 HTML 页面中的`div`元素。这个魔法是通过以下语句实现的：
+
+```jsx
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+目前，我们先忽略用于渲染`App`组件的语法。这将在下一章中介绍。这个语句的含义是将`App`模块内部定义的 React`App`组件与`root`ID 标识的 HTML 元素关联起来。
+
+`registerServiceWorker()`函数的导入和调用启用了离线行为支持，符合 PWA 规范，而`index.css`的导入使 CSS 样式对应用程序可用。
+
+`App.js`文件包含了代表应用程序的 React 组件的定义。其内容如下所示：
+
+```jsx
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro">
+...
+export default App;
+```
+
+让我们快速看一下代码，因为它将在下一章中详细介绍。目前，我们只想对 React 组件的定义有一个非常基本的了解。在这里，我们看到一个模块从其他模块导入一些项目，通过继承`Component`类定义`App`类，并将`App`类本身作为默认导出。目前就是这样。我们将在下一章中深入介绍这段代码，详细理解其含义。
+
+# create-react-app 命令
+
+`create-react-app` CLI 提供了几个命令来管理我们的 React 项目。这些命令以`npm <command>`的形式出现，因为它们基于 npm。
+
+如果你更喜欢使用 YARN 作为包管理器，你应该在任何地方找到`npm`时替换为`yarn`。
+
+# npm start 命令
+
+我们将介绍的第一个命令是`npm start`。这个命令启动一个开发 Web 服务器，接受`http://localhost:3000`的请求。
+
+因此，在启动这个命令后，我们可以在浏览器中看到以下结果：
+
+![](img/576f13fd-abeb-46d3-a45f-dfacde3d733b.png)
+
+开发 Web 服务器有一个热重载系统，允许我们更改应用程序的代码并在保存文件后在浏览器中刷新页面。
+
+# 更改文件内容并查看结果
+
+以下步骤展示了如何通过更改文件内容来使应用程序在浏览器中重新加载：
+
+1.  打开一个控制台窗口。
+
+1.  转到`hello-react`文件夹。
+
+1.  运行`npm start`。
+
+1.  启动浏览器并访问`http://localhost:3000`。
+
+1.  启动文本编辑器并打开`App.js`文件。
+
+1.  查找以下代码行：
+
+```jsx
+To get started, edit <code>src/App.js</code> and save to reload.
+```
+
+1.  将第 6 步中提到的代码替换为以下代码行：
+
+```jsx
+Hello React!
+```
+
+1.  保存文件。
+
+1.  检查浏览器内容。现在它应该显示新文本。
+
+# 活动：启动和更改应用程序
+
+**场景**
+
+我们想要更改在前一个活动中创建的应用程序的标题。
+
+**目的**
+
+活动的目的是熟悉启动应用程序并欣赏热重载功能。
+
+**完成步骤**
+
+1.  启动应用程序，以便您可以在浏览器中看到它
+
+1.  编辑`App.js`文件并将标题设置为`My Shop`
+
+**解决方案**
+
+没有正式的解决方案。您应该专注于正确更改标题并使应用程序运行。
+
+# npm 测试命令
+
+`create-react-app`通过生成一个示例单元测试文件（我们已经看到过）并提供一组工具来运行这些测试，从而推广使用单元测试。
+
+这些工具基于**Jest**，我们可以通过运行以下命令来运行我们应用程序中编写的测试：
+
+```jsx
+npm test
+```
+
+这个命令将开始运行我们的测试，并显示结果，如以下截图所示：
+
+![](img/6214f136-1247-4f58-ae30-447792398d06.png)
+
+# npm 运行构建命令
+
+当我们准备好将应用程序移动到生产环境时，我们需要发布工件。我们可以通过运行以下命令来生成这些工件：
+
+```jsx
+npm run build
+```
+
+运行此命令的结果是一个新的`BUILD`文件夹，我们将在这里找到所有需要移动到生产环境的文件。该命令对我们的开发环境文件进行一些处理。简单来说，它将我们编写的所有 ES2015 代码转换为与 ES5 兼容的代码，以便它也可以用于旧版浏览器。这个过程称为**转译**。此外，它还减小了代码本身的大小，允许通过网络更快地下载。这个过程称为**压缩**。最后，它将我们开发环境中的文件合并为几个文件，称为捆绑包，以减少网络请求。
+
+以下截图显示了示例应用程序的`BUILD`文件夹的内容：
+
+![](img/751f24bf-3ab9-4bde-aa22-52c5c896fc43.png)
+
+要发布我们应用程序的生产构建，我们只需将`BUILD`文件夹的内容复制到生产服务器的文件夹中。
+
+生产构建的结果假设工件将被发布到 Web 服务器根目录，也就是说，在一个位置，应用程序将通过一个 URL（如`http://www.myapplication.com`）访问。
+
+如果我们需要在根目录的子文件夹中发布应用程序，也就是说，在一个位置，应用程序将通过一个 URL（如`http://www.myapplication.com/app`）访问，我们需要对`package.json`文件进行轻微更改。
+
+在这种情况下，我们需要在配置 JSON 中添加一个`homepage`键，其值为 URL，如下所示：
+
+`"homepage": "http://www.myapplication.com/app"`。
+
+# npm 运行 eject 命令
+
+我们要介绍的最后一个命令是`eject`命令：
+
+```jsx
+npm run eject
+```
+
+当我们对使用`create-react-app`底层工具充满信心并且需要自定义环境配置时，我们可以使用此命令。此命令将我们的应用程序从 CLI 上下文中移出，并赋予我们管理和负责它的能力。
+
+这是一个单向过程。如果我们为应用程序离开`create-react-app`上下文，我们就无法返回。
+
+# 如何设计 UI
+
+现在，我们将看到如何设计我们的应用程序，以便它在用 React 实现时很好地适应。
+
+# 一切都是组件
+
+在用户界面设计和实现中引入的主要概念是 React 的组件概念。用户界面是组件的聚合，整个 React 应用程序是组件的聚合。现在我们将更详细地了解从设计角度来看组件是什么。
+
+从设计的角度来看，我们可以说组件是用户界面的一部分，具有特定的作用。组件的层次结构通常被称为组件树。
+
+考虑网页中的一个表单。它可以被视为一个组件，因为它有一个特定的作用：收集数据并将其发送到服务器。此外，表单内的文本框也可以被视为一个组件。它有一个特定的作用：收集单个数据片段，该数据将被发送到服务器。因此，一个组件可能包含其他组件。这通常是发生的情况：用户界面是组件的层次结构，其中一些组件包含其他组件。
+
+记住这个概念，因为它将有助于实现高效和可重用的用户界面。
+
+# 分解用户界面
+
+为了更好地理解如何设计用户界面以及如何创建组件来实现它们，我们将尝试分解一个广为人知的网页用户界面——YouTube 主页：
+
+![](img/e9867a5a-8ca0-4c86-9b7e-73501a8bde50.png)
+
+我们可以检测到页面上的多个项目，每个项目都有特定的作用，从页面本身开始，其作用是允许用户与系统交互。
+
+如果我们考虑页眉、左侧边栏和主区域，所有这些项目都是页面的组件。您可以在下面的截图中看到它们被突出显示：
+
+![](img/094ad032-347c-4c84-9cfd-c33f4ce932f8.png)
+
+当然，我们可以继续识别其他组件。例如，我们可以将主区域中的每个视频预览框视为一个组件。您可以在下面的截图中看到它们：
+
+![](img/fbd31514-b679-4314-9c01-bd23302a7d35.png)
+
+这个分解过程使我们能够专注于界面中每个项目的特定作用，以便我们可以尝试隔离每个功能并创建可重用的组件，即只具有真正重要的依赖关系的组件。
+
+# 容器和展示组件
+
+我们可以将用户界面中的组件分为容器组件和展示组件。
+
+容器组件是那些没有显著视觉效果的组件。它们的主要作用是组合其他组件，即*包含*其他组件。例如，一个表单通常是容器组件，因为它的主要作用是包含其他组件，如文本框、标签、按钮等。
+
+展示组件是那些以某种图形形式显示数据的组件。文本框、日期选择器和工具栏都是展示组件的例子。
+
+区分容器组件和展示组件对于在 React 中创建高效的用户界面非常重要。我们将在学习管理组件状态和通过组件传播数据时利用这种区分。
+
+# 活动：在网页用户界面中识别组件
+
+**场景**
+
+我们需要将维基百科网站的用户界面（[`en.wikipedia.org`](https://en.wikipedia.org)）转换为 React 组件。
+
+**目标**
+
+该活动的目的是解决在实现基于 React 的用户界面时的设计过程。
+
+**完成步骤**
+
+1.  分析页面的当前结构并识别可以作为组件实现的项目
+
+1.  指出了哪些是容器组件，哪些是展示组件
+
+**解决方案**
+
+假设以下是当前的维基百科首页：
+
+![](img/3efcae52-04c7-429a-92d7-fd347d736c11.png)
+
+可能的解决方案如下。
+
+我们可以识别以下组件：
+
++   *首页*组件包含*左侧边栏*组件、*头部*组件和*主区域*组件。所有这些组件都是容器组件。
+
++   *左侧边栏*组件包含*徽标*组件（展示型）和一组*节*组件（展示型）。
+
++   *头部*组件包含一组*链接*组件（展示型），指向一般的功能块。
+
++   *主区域*组件包含一组*标签*组件（容器型）和一个*搜索*组件（展示型）。
+
++   *主标签*组件包含一个*横幅*组件（展示型），一个*主题索引*组件（展示型），以及一组*块*组件（展示型）。
+
+# **总结**
+
+在本章中，我们开始探索 React 世界。特别是，我们：
+
++   确定了 React 是一个用户界面库，用于实现各种 MV*设计模式中的视图部分
+
++   介绍了`create-react-app`工具，它帮助我们设置一个开发环境来构建基于 React 的应用程序
+
++   探索了构成典型基于 React 的应用程序的各个部分
+
++   分析了最适合 React 世界的用户界面设计方法
+
+在下一章中，我们将学习如何创建 React 组件来构建我们应用程序的用户界面。
diff --git a/docs/bg-react/bg-react_1.yaml b/docs/bg-react/bg-react_1.yaml
deleted file mode 100644
index e9828fd..0000000
--- a/docs/bg-react/bg-react_1.yaml
+++ /dev/null
@@ -1,1164 +0,0 @@
-- en: Introducing React and UI Design
-  id: totrans-0
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 介绍React和用户界面设计
-- en: React is definitely one of the most talked about libraries on the web. It has
-    become as popular as jQuery was in its prime, and more and more developers choose
-    it to build the user interface of their web applications. Why has it become so
-    popular? Why is this JavaScript library so innovative compared to others?
-  id: totrans-1
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React无疑是网络上讨论最多的库之一。它已经变得像jQuery在其鼎盛时期一样流行，越来越多的开发者选择它来构建他们的网页应用程序的用户界面。为什么它变得如此流行？为什么这个JavaScript库与其他库相比如此创新？
-- en: We will try to provide answers to these questions in this book by showing what the
-    library offers, and by using it to build efficient web user interfaces.
-  id: totrans-2
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们将在本书中尝试回答这些问题，展示该库提供的内容，并使用它来构建高效的网页用户界面。
-- en: In this chapter, we will introduce React and we will start building the basic infrastructure
-    of a React-based application. Then, we will analyze how to design a user interface
-    so that it can be easily mapped to React components, exploiting the best from
-    React's internal architecture.
-  id: totrans-3
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章中，我们将介绍React，并开始构建基于React的应用程序的基本基础设施。然后，我们将分析如何设计用户界面，以便它可以轻松映射到React组件，充分利用React的内部架构。
-- en: 'By the end of this chapter, you will be able to:'
-  id: totrans-4
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章结束时，你将能够：
-- en: Describe what React is and where it fits in the development of your applications
-  id: totrans-5
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 描述React是什么以及它在你的应用程序开发中的作用
-- en: Set up the infrastructure of a React-based application
-  id: totrans-6
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 搭建基于React的应用程序的基础设施
-- en: Design the UI of your application, optimizing it for use in React
-  id: totrans-7
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 设计你的应用程序的用户界面，并优化其在React中的使用
-- en: What is React?
-  id: totrans-8
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 什么是React？
-- en: To put it simply, React is a JavaScript library for building composable user interfaces.
-    This means that we can build a user interface by composing items called **components**.
-    A component is an element that contributes to building a user interface. It could
-    be a textbox, a button, a whole form, a group of other components, and so on.
-    Even the entire application's user interface is a component. So, React encourages
-    the creation of components to build a user interface; it's even better if these
-    components are reusable.
-  id: totrans-9
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 简而言之，React是一个用于构建可组合用户界面的JavaScript库。这意味着我们可以通过组合称为**组件**的项来构建用户界面。组件是构建用户界面的元素。它可以是一个文本框、一个按钮、一个完整的表单、一组其他组件，等等。甚至整个应用程序的用户界面也是一个组件。因此，React鼓励创建组件来构建用户界面；如果这些组件是可重用的，那就更好了。
-- en: React components have the ability to present data that changes over time, and
-    the visualization of that changing data is automatic when we follow a few guidelines.
-  id: totrans-10
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React组件有能力展示随时间变化，并且当我们遵循一些指导原则时，该变化数据的可视化是自动的。
-- en: 'Since the library deals with user interfaces, you may wonder which presentational design
-    patterns React was inspired by: **Model-View-Controller**, **Model-View-Presenter**,
-    **Model-View-ViewModel**, or something else. React is not bound to a specific
-    presentational pattern. React implements the *View* part of the most common patterns,
-    leaving developers free to choose the best approach to implement the model, the
-    presenter, and everything else they need to build their application. This aspect
-    is important, since it allows us to classify it as a library, not as a framework; therefore,
-    comparisons with frameworks such as Angular may throw up some inconsistencies.'
-  id: totrans-11
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 由于该库涉及用户界面，你可能会好奇React受到了哪些展示设计模式的影响：**模型-视图-控制器**、**模型-视图-展示器**、**模型-视图-视图模型**，还是其他。React并不局限于特定的展示模式。React实现了最常见模式中的*视图*部分，让开发者自由选择最佳方法来实现模型、展示器以及构建应用程序所需的其他一切。这一点很重要，因为它使我们能够将其归类为库，而不是框架；因此，与Angular等框架的比较可能会出现一些不一致之处。
-- en: How to Set up a React-Based Application
-  id: totrans-12
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 如何搭建基于React的应用程序
-- en: React is a JavaScript library, so we should be able to make a reference to it
-    through a `<script>` tag in our HTML page and start writing our web application.
-    However, this approach would prevent us from exploiting some features that are
-    provided by a modern JavaScript development environment—features that make our
-    lives easier. For example, we wouldn't be able to use recent features from ECMAScript
-    2015+, such as classes, modules, arrow functions, `let` and `const` statements,
-    and so on. Or, we could use those features, but only recent browsers would support
-    them.
-  id: totrans-13
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React是一个JavaScript库，因此我们应该能够通过HTML页面中的`<script>`标签引用它并开始编写我们的Web应用程序。然而，这种方法会阻止我们利用现代JavaScript开发环境提供的一些功能——这些功能使我们的生活更轻松。例如，我们将无法使用ECMAScript
-    2015+的最新功能，如类、模块、箭头函数、`let`和`const`语句等。或者，我们可以使用这些功能，但只有最近的浏览器才会支持它们。
-- en: '**The relationship of ECMAScript with JavaScript**'
-  id: totrans-14
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**ECMAScript与JavaScript的关系**'
-- en: 'Using the latest ECMAScript features requires a true development environment, allowing
-    us to transpile our code into ECMAScript 5 version JavaScript code, so that even
-    older browsers will be able to run our application. Setting up a modern JavaScript
-    development environment requires the installation and configuration of a few tools:
-    a transpiler, a syntax checker, a module bundler, a task runner, and so on. Learning
-    to use these tools properly requires a lot of time, even before starting to write
-    a single line of code.'
-  id: totrans-15
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 使用最新的ECMAScript功能需要一个真正的开发环境，允许我们将代码转换为ECMAScript 5版本的JavaScript代码，以便即使旧的浏览器也能够运行我们的应用程序。设置现代JavaScript开发环境需要安装和配置一些工具：一个转换器、一个语法检查器、一个模块捆绑器、一个任务运行器等。学习正确使用这些工具需要大量时间，甚至在开始编写一行代码之前。
-- en: Installing create-react-app
-  id: totrans-16
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: '**安装create-react-app**'
-- en: Fortunately, we can use `create-react-app`, a **command-line interface** (**CLI**) tool
-    that allows us to set up a React-based application without needing to configure
-    any of the aforementioned tools. It is based on Node.js and provides commands
-    to set up and modify a React application in an immediate way.
-  id: totrans-17
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 幸运的是，我们可以使用`create-react-app`，这是一个**命令行界面**（**CLI**）工具，它允许我们无需配置任何上述工具即可设置基于React的应用程序。它基于Node.js，并提供命令以即时方式设置和修改React应用程序。
-- en: 'In order to install `create-react-app`, you need Node.js installed on your
-    machine. You can install the CLI by typing the following command in a console
-    window:'
-  id: totrans-18
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 为了安装`create-react-app`，您需要在您的机器上安装Node.js。您可以在控制台窗口中输入以下命令来安装CLI：
-- en: '[PRE0]'
-  id: totrans-19
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE0]'
-- en: 'After installation, you can verify whether it is properly installed by typing
-    the following command:'
-  id: totrans-20
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 安装后，您可以通过输入以下命令来验证是否已正确安装：
-- en: '[PRE1]'
-  id: totrans-21
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE1]'
-- en: If all is OK, the installed version of `create-react-app` will be shown.
-  id: totrans-22
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果一切正常，将显示已安装的`create-react-app`版本。
-- en: Creating Your First React Application
-  id: totrans-23
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: '**创建您的第一个React应用程序**'
-- en: 'Now that the development environment is installed, let''s create our first
-    React application. We can do this by typing the following command in a console
-    window:'
-  id: totrans-24
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 既然开发环境已安装，让我们创建我们的第一个React应用程序。我们可以在控制台窗口中输入以下命令来执行此操作：
-- en: '[PRE2]'
-  id: totrans-25
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE2]'
-- en: This command tells `create-react-app` to set up all of the prerequisites for
-    a React-based application named `hello-react`. The creation process may take several minutes,
-    since it has to download the npm packages needed for the project.
-  id: totrans-26
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 此命令告诉`create-react-app`为名为`hello-react`的React应用程序设置所有先决条件。创建过程可能需要几分钟，因为它必须下载项目所需的npm包。
-- en: npm is the standard package manager of the Node.js environment. When the process
-    ends, you will find a list of the available commands that you can run to manage
-    the project on the screen. We will return to this later. The result of the project
-    creation will be a folder named `hello-react`, inside of which you will find the
-    items composing a dummy—but working—React-based application.
-  id: totrans-27
-  prefs: []
-  type: TYPE_NORMAL
-  zh: npm是Node.js环境的默认包管理器。当进程结束时，您将在屏幕上找到可用于管理项目的可用命令列表。我们稍后会回到这一点。项目创建的结果将是一个名为`hello-react`的文件夹，在其中您将找到构成一个虚拟的——但可工作的——基于React的应用程序的项。
-- en: 'Activity: Creating an Application with create-react-app'
-  id: totrans-28
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: '**活动：使用create-react-app创建应用程序**'
-- en: '**Scenario**'
-  id: totrans-29
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We need to set up a development environment in order to create a product catalog application
-    built with React.
-  id: totrans-30
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们需要设置一个开发环境，以便创建一个使用React构建的产品目录应用程序。
-- en: '**Aim**'
-  id: totrans-31
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目的**'
-- en: The aim of the activity is to start becoming familiar with `create-react-app`
-    and the content it creates.
-  id: totrans-32
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 活动的目的是开始熟悉`create-react-app`及其创建的内容。
-- en: '**Steps for Completion**'
-  id: totrans-33
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Use `create-react-app` to create the development environment
-  id: totrans-34
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 使用 `create-react-app` 创建开发环境
-- en: Give the name `my-shop` to the sample application
-  id: totrans-35
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 将示例应用程序命名为 `my-shop`
-- en: '**Solution**'
-  id: totrans-36
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: There is no formal solution. You should focus on the content created by `create-react-app`,
-    as we are going to analyze it in the following sections.
-  id: totrans-37
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 没有正式的解决方案。你应该专注于由 `create-react-app` 创建的内容，因为接下来我们将在以下部分中分析它。
-- en: Exploring the Generated Content
-  id: totrans-38
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 探索生成的内容
-- en: 'Let''s take a look at the files generated by `create-react-app`, so that we
-    can get an understanding of the structure of a React-based application. We will
-    find these files and folders inside of the `HELLO-REACT` folder as shown in the
-    following screenshot:'
-  id: totrans-39
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们来看看 `create-react-app` 生成的文件，以便我们能够理解基于 React 的应用程序的结构。我们将在 `HELLO-REACT`
-    文件夹中找到这些文件和文件夹，如下面的截图所示：
-- en: '![](Images/b24741a3-0f38-44cd-a832-5fd756aa5339.png)'
-  id: totrans-40
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/b24741a3-0f38-44cd-a832-5fd756aa5339.png)'
-- en: In the root folder, we can see a `README.md` file, the `package.json` file,
-    and the `.gitignore` file.
-  id: totrans-41
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在根文件夹中，我们可以看到一个 `README.md` 文件、`package.json` 文件和 `.gitignore` 文件。
-- en: The `README` document contains references to all you need to start building
-    a React-based application. It is written in Markdown format, and you can integrate
-    or overwrite it with your own documentation.
-  id: totrans-42
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`README` 文档包含开始构建基于 React 的应用程序所需的所有引用。它是以 Markdown 格式编写的，你可以将其与自己的文档集成或覆盖。'
-- en: Markdown is a simple markup language, often used to create technical documentation
-    for software libraries. It requires a simple text editor, and it is possible to
-    convert a Markdown document into HTML.
-  id: totrans-43
-  prefs: []
-  type: TYPE_NORMAL
-  zh: Markdown 是一种简单的标记语言，常用于创建软件库的技术文档。它只需要一个简单的文本编辑器，并且可以将 Markdown 文档转换为 HTML。
-- en: The `package.json` file contains information about the project, such as the
-    name, the version, and so on, and references to all the npm packages used by the
-    current project. This is a Node.js asset that allows you to download the required
-    packages when copying the project to another machine. It also contains the definitions
-    of scripts that allow us to manage the project itself.
-  id: totrans-44
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`package.json` 文件包含有关项目的信息，如名称、版本等，以及对当前项目使用的所有 npm 包的引用。这是一个 Node.js 资源，允许你在将项目复制到另一台机器时下载所需的包。它还包含允许我们管理项目本身的脚本定义。'
-- en: 'The following is an example of `package.json` file content:'
-  id: totrans-45
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下是 `package.json` 文件内容的示例：
-- en: '[PRE3]'
-  id: totrans-46
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE3]'
-- en: As we can see, the file's content is a JSON object, with a few easy to recognize properties.
-    In particular, we can identify the project's name, the version, and package dependencies.
-    Apart from the name and version properties, usually, you don't need to manually
-    change these settings.
-  id: totrans-47
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 正如我们所见，文件内容是一个 JSON 对象，有几个易于识别的属性。特别是，我们可以识别项目的名称、版本和包依赖项。除了名称和版本属性外，通常你不需要手动更改这些设置。
-- en: The `.gitignore` file is a hidden file in Unix-based systems, and it allows
-    us to track which file(s) to ignore when using Git as a version control system. The
-    `create-react-app` tool added this file because nowadays, it is essential to have
-    a project under version control. It suggests Git, since it is one of the most popular
-    version control systems.
-  id: totrans-48
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`.gitignore` 文件是 Unix 系统中的隐藏文件，它允许我们跟踪在使用 Git 作为版本控制系统时要忽略的文件。`create-react-app`
-    工具添加了这个文件，因为现在，将项目置于版本控制之下是必不可少的。它建议使用 Git，因为它是目前最流行的版本控制系统之一。'
-- en: 'The `public` folder contains the static parts of our application:'
-  id: totrans-49
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`public` 文件夹包含我们应用程序的静态部分：'
-- en: '`favicon`: This is the icon shown in the browser''s address bar and is used
-    for bookmarks'
-  id: totrans-50
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`favicon`：这是在浏览器地址栏中显示的图标，用于书签'
-- en: '`index.html`: This is the HTML page containing the reference to our React code
-    and providing a context to React rendering'
-  id: totrans-51
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`index.html`：这是包含对我们的 React 代码的引用并提供 React 渲染上下文的 HTML 页面'
-- en: '`manifest.json`: This is a configuration file containing metadata according to
-    the **Progressive Web Apps** (**PWA**) criteria'
-  id: totrans-52
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`manifest.json`：这是一个根据 **渐进式 Web 应用**（**PWA**）标准包含元数据的配置文件'
-- en: 'In particular, the `index.html` file is the starting point of our application.
-    Let''s take a look at it so that we can understand what''s special about it:'
-  id: totrans-53
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 特别是，`index.html` 文件是我们应用程序的起点。让我们来看看它，以便我们能够理解它的特别之处：
-- en: '[PRE4]'
-  id: totrans-54
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE4]'
-- en: 'As we can see, it is a standard HTML page; however, a few things should be
-    noted. First of all, we see a link to the `manifest.json` file:'
-  id: totrans-55
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 正如我们所见，它是一个标准的 HTML 页面；然而，有几点需要注意。首先，我们看到一个指向 `manifest.json` 文件的链接：
-- en: '[PRE5]'
-  id: totrans-56
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE5]'
-- en: This manifest contains metadata for configuring our app as a PWA.
-  id: totrans-57
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这个清单包含将我们的应用配置为 PWA 的元数据。
-- en: Progressive web apps are web applications that work for every browser and every
-    platform, even offline. Their basic tenet is responsiveness and progressive enhancement.
-  id: totrans-58
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 渐进式Web应用是适用于每个浏览器和平台的Web应用，甚至可以离线工作。它们的基本原则是响应性和渐进增强。
-- en: 'The second thing we notice is the `%PUBLIC_URL%` placeholder in both link references:'
-  id: totrans-59
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们注意到的第二件事是两个链接引用中都存在的`%PUBLIC_URL%`占位符。
-- en: '[PRE6]'
-  id: totrans-60
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE6]'
-- en: This placeholder will be replaced with the actual URL of the `public` folder
-    during the build process.
-  id: totrans-61
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这个占位符将在构建过程中被`public`文件夹的实际URL替换。
-- en: The body of the HTML page contains an empty `div` with a root identifier. This
-    is an important item for the correct setup of our React application, as we will
-    soon see. Apart from the `<noscript>` tag, we do not see any other element in
-    the body. However, we need a binding between the HTML page and the JavaScript.
-    The build process will be responsible for adding the required scripts to the body.
-  id: totrans-62
-  prefs: []
-  type: TYPE_NORMAL
-  zh: HTML页面的主体包含一个带有根标识符的空`div`。这是我们React应用程序正确设置的一个重要项目，我们很快就会看到。除了`<noscript>`标签外，我们在主体中看不到其他元素。然而，我们需要在HTML页面和JavaScript之间建立绑定。构建过程将负责向主体添加所需的脚本。
-- en: We can add any other required items to the HTML page, such as meta tags, web
-    fonts, and so on. However, remember that files referenced inside the HTML markup
-    should be put in the `public` folder. The `node_modules` folder contains the npm
-    packages used by the project. Usually, you don't need to directly manage these
-    files.
-  id: totrans-63
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以向HTML页面添加任何其他必需的项目，例如元标签、网络字体等。但是，请记住，HTML标记中引用的文件应该放在`public`文件夹中。`node_modules`文件夹包含项目使用的npm包。通常，您不需要直接管理这些文件。
-- en: The most important folder for developing our application is the `src` folder.
-    It contains the basic files, with the code that we can modify for our purposes.
-  id: totrans-64
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 开发我们应用程序最重要的文件夹是`src`文件夹。它包含我们可以根据需要修改的基本文件和代码。
-- en: 'In particular, we will find the following files:'
-  id: totrans-65
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 特别是，我们将找到以下文件：
-- en: '`index.js`: Contains the starting point of our application'
-  id: totrans-66
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`index.js`：包含我们应用程序的启动点。'
-- en: '`index.css`: Stores the base styling for our application'
-  id: totrans-67
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`index.css`：存储我们应用程序的基本样式。'
-- en: '`App.js`: Contains the definition of the main component of the sample application'
-  id: totrans-68
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`App.js`：包含示例应用程序的主要组件的定义。'
-- en: '`App.css`: Contains the styling of the `App` component'
-  id: totrans-69
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`App.css`：包含`App`组件的样式。'
-- en: '`logo.svg`: This is the React logo'
-  id: totrans-70
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`logo.svg`：这是React的标志。'
-- en: '`App.test.js`: Stores the basic unit test involving the `App` component'
-  id: totrans-71
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`App.test.js`：存储涉及`App`组件的基本单元测试。'
-- en: '`registerServiceWorker.js`: Contains the code to register the service worker
-    in order to allow offline behavior, as per the PWA requirements'
-  id: totrans-72
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`registerServiceWorker.js`：包含注册服务工作者的代码，以便允许离线行为，符合PWA的要求。'
-- en: Let's analyze the content of a couple of these files, since their code is fundamental
-    to understanding how the startup of a React application works.
-  id: totrans-73
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们分析一下这些文件的内容，因为它们的代码对于理解React应用程序的启动方式至关重要。
-- en: 'Let''s start with the `index.js` file. Its content is shown as follows:'
-  id: totrans-74
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们从`index.js`文件开始。其内容如下所示：
-- en: '[PRE7]'
-  id: totrans-75
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE7]'
-- en: It is an ECMAScript 2015 module, importing other modules. In particular, it
-    imports the `React` and `ReactDOM` objects from the `react` and `react-dom` modules, respectively.
-    Both modules are part of the React library and are stored inside the `node_modules`
-    folder.
-  id: totrans-76
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 它是一个ECMAScript 2015模块，导入其他模块。特别是，它从`react`和`react-dom`模块分别导入`React`和`ReactDOM`对象。这两个模块都是React库的一部分，存储在`node_modules`文件夹中。
-- en: The `react` module provides functionality for component creation and state management.
-    The `react-dom` module is the glue between React components and the HTML DOM.
-    The React library has been split into two modules in order to separate the component
-    management from the actual rendering. This separation may be useful when we want
-    to target a rendering platform that is not the web; for example, if we want to
-    target native mobile rendering.
-  id: totrans-77
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`react`模块提供组件创建和状态管理的功能。`react-dom`模块是React组件和HTML DOM之间的粘合剂。React库被分为两个模块，以将组件管理与实际渲染分离。当我们想要针对的不是Web的渲染平台时，这种分离可能会有用；例如，如果我们想要针对原生移动渲染。'
-- en: 'Other modules are imported from the same folder as the `index.js` file. In
-    particular, we import the `App` component from the `App` module. The `App` component
-    is used by the `render()` method of the `ReactDOM` object in order to bind it
-    to the `div` element in the HTML page. This magic is performed by the following
-    statement:'
-  id: totrans-78
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 其他模块从与`index.js`文件相同的文件夹中导入。特别是，我们从`App`模块导入`App`组件。`App`组件由`ReactDOM`对象的`render()`方法使用，以便将其绑定到HTML页面中的`div`元素。这个魔法是通过以下语句实现的：
-- en: '[PRE8]'
-  id: totrans-79
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE8]'
-- en: For the moment, let's ignore the syntax used to render the `App` component.
-    This will be covered in the next chapter. The meaning of this statement is to
-    associate the React `App` component defined inside the `App` module with the HTML
-    element identified by the `root` ID.
-  id: totrans-80
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 目前，我们先忽略用于渲染`App`组件的语法。这将在下一章中介绍。这个语句的含义是将`App`模块内部定义的React`App`组件与`root`ID标识的HTML元素关联起来。
-- en: The `registerServiceWorker()` function import and invocation enables the support for
-    offline behavior, in line with the PWA specification, while the import of `index.css`
-    makes the CSS styling available to the application.
-  id: totrans-81
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`registerServiceWorker()`函数的导入和调用启用了离线行为支持，符合PWA规范，而`index.css`的导入使CSS样式对应用程序可用。'
-- en: 'The `App.js` file contains the definition of the React component representing
-    the application. Its content looks like the following:'
-  id: totrans-82
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`App.js`文件包含了代表应用程序的React组件的定义。其内容如下所示：'
-- en: '[PRE9]'
-  id: totrans-83
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE9]'
-- en: Let's take a quick look at the code, since it will be covered in detail in the
-    next chapter. For the moment, we only want to get a very basic idea of how a React
-    component is defined. Here, we see a module importing a few items from other modules,
-    defining the `App` class by inheriting from the `Component` class and exporting
-    the `App` class itself as a default export. That's all, for the moment. We will
-    cover this code in depth in the next chapter, understanding its meaning in detail.
-  id: totrans-84
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们快速看一下代码，因为它将在下一章中详细介绍。目前，我们只想对React组件的定义有一个非常基本的了解。在这里，我们看到一个模块从其他模块导入一些项目，通过继承`Component`类定义`App`类，并将`App`类本身作为默认导出。目前就是这样。我们将在下一章中深入介绍这段代码，详细理解其含义。
-- en: The create-react-app Commands
-  id: totrans-85
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: create-react-app命令
-- en: The `create-react-app` CLI provides a few commands to manage our React project. These
-    commands appear in the form `npm <command>`, since they are based on the npm.
-  id: totrans-86
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`create-react-app` CLI提供了几个命令来管理我们的React项目。这些命令以`npm <command>`的形式出现，因为它们基于npm。'
-- en: If you prefer to use YARN as a package manager, you should replace `yarn` wherever
-    you find `npm`.
-  id: totrans-87
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果你更喜欢使用YARN作为包管理器，你应该在任何地方找到`npm`时替换为`yarn`。
-- en: The npm start Command
-  id: totrans-88
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: npm start命令
-- en: The first command we will cover is `npm start`. This command starts a development web
-    server accepting requests at `http://localhost:3000`.
-  id: totrans-89
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们将介绍的第一个命令是`npm start`。这个命令启动一个开发Web服务器，接受`http://localhost:3000`的请求。
-- en: 'So, after launching this command, we can open a browser and see the following
-    result:'
-  id: totrans-90
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 因此，在启动这个命令后，我们可以在浏览器中看到以下结果：
-- en: '![](Images/576f13fd-abeb-46d3-a45f-dfacde3d733b.png)'
-  id: totrans-91
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/576f13fd-abeb-46d3-a45f-dfacde3d733b.png)'
-- en: The development web server has a hot reloading system that allows us to change
-    the code of our application and get the page refreshed in the browser after saving
-    the file.
-  id: totrans-92
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 开发Web服务器有一个热重载系统，允许我们更改应用程序的代码并在保存文件后在浏览器中刷新页面。
-- en: Changing File Content and Viewing the Result
-  id: totrans-93
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 更改文件内容并查看结果
-- en: 'This following steps show how changing the content of a file causes the application
-    to reload in the browser:'
-  id: totrans-94
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下步骤展示了如何通过更改文件内容来使应用程序在浏览器中重新加载：
-- en: Open a console window.
-  id: totrans-95
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口。
-- en: Go to the `hello-react` folder.
-  id: totrans-96
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`hello-react`文件夹。
-- en: Run `npm start`.
-  id: totrans-97
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`。
-- en: Launch a browser and go to `http://localhost:3000`.
-  id: totrans-98
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 启动浏览器并访问`http://localhost:3000`。
-- en: Launch a text editor and open the `App.js` file.
-  id: totrans-99
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 启动文本编辑器并打开`App.js`文件。
-- en: 'Search for the following line of code:'
-  id: totrans-100
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 查找以下代码行：
-- en: '[PRE10]'
-  id: totrans-101
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE10]'
-- en: 'Replace the code mentioned in step 6 with the following line of code:'
-  id: totrans-102
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 将第6步中提到的代码替换为以下代码行：
-- en: '[PRE11]'
-  id: totrans-103
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE11]'
-- en: Save the file.
-  id: totrans-104
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 保存文件。
-- en: Check the browser content. Now it should display the new text.
-  id: totrans-105
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 检查浏览器内容。现在它应该显示新文本。
-- en: 'Activity: Starting and Changing the Application'
-  id: totrans-106
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：启动和更改应用程序
-- en: '**Scenario**'
-  id: totrans-107
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We want to change the title of the application that was created in the previous activity.
-  id: totrans-108
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们想要更改在前一个活动中创建的应用程序的标题。
-- en: '**Aim**'
-  id: totrans-109
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目的**'
-- en: The aim of the activity is to become familiar with launching an application
-    and appreciating the hot reloading feature.
-  id: totrans-110
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 活动的目的是熟悉启动应用程序并欣赏热重载功能。
-- en: '**Steps for Completion**'
-  id: totrans-111
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Start the application so that you can see it in a browser
-  id: totrans-112
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 启动应用程序，以便您可以在浏览器中看到它
-- en: Edit the `App.js` file and set the title to `My Shop`
-  id: totrans-113
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 编辑`App.js`文件并将标题设置为`My Shop`
-- en: '**Solution**'
-  id: totrans-114
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: There is no formal solution. You should focus on getting the title correctly
-    changed and the application running.
-  id: totrans-115
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 没有正式的解决方案。您应该专注于正确更改标题并使应用程序运行。
-- en: The npm test Command
-  id: totrans-116
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: npm测试命令
-- en: '`create-react-app` promotes the use of unit tests by generating a sample unit
-    test file, as we have already seen, and by providing a set of tools to run such
-    tests.'
-  id: totrans-117
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`create-react-app`通过生成一个示例单元测试文件（我们已经看到过）并提供一组工具来运行这些测试，从而推广使用单元测试。'
-- en: 'These tools are based on **Jest**, and we can run the tests written within
-    our application by running the following command:'
-  id: totrans-118
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这些工具基于**Jest**，我们可以通过运行以下命令来运行我们应用程序中编写的测试：
-- en: '[PRE12]'
-  id: totrans-119
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE12]'
-- en: 'This command will start running our test and will show the results, as shown
-    in the following screenshot:'
-  id: totrans-120
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这个命令将开始运行我们的测试，并显示结果，如以下截图所示：
-- en: '![](Images/6214f136-1247-4f58-ae30-447792398d06.png)'
-  id: totrans-121
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/6214f136-1247-4f58-ae30-447792398d06.png)'
-- en: The npm run build Command
-  id: totrans-122
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: npm运行构建命令
-- en: 'When we are ready to move our application into the production environment,
-    we need the artifacts to publish. We can produce these artifacts by running the
-    following command:'
-  id: totrans-123
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当我们准备好将应用程序移动到生产环境时，我们需要发布工件。我们可以通过运行以下命令来生成这些工件：
-- en: '[PRE13]'
-  id: totrans-124
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE13]'
-- en: The result of running this command is a new `BUILD` folder where we will find
-    all of the files that we need to move into a production environment. The command
-    carries out some processing on the files of our development environment. Put simply,
-    it translates all of the ES2015 code we wrote into ES5 compatible code, so that
-    it is also available for older browsers. This process is called **transpilation**.
-    In addition, it reduces the size of the code itself, allowing for faster downloading
-    over the network. This process is called **minification**. Finally, it takes the
-    files in our development environment and combines them into a few files, called
-    bundles, in order to decrease network requests.
-  id: totrans-125
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 运行此命令的结果是一个新的`BUILD`文件夹，我们将在这里找到所有需要移动到生产环境的文件。该命令对我们的开发环境文件进行一些处理。简单来说，它将我们编写的所有ES2015代码转换为与ES5兼容的代码，以便它也可以用于旧版浏览器。这个过程称为**转译**。此外，它还减小了代码本身的大小，允许通过网络更快地下载。这个过程称为**压缩**。最后，它将我们开发环境中的文件合并为几个文件，称为捆绑包，以减少网络请求。
-- en: 'The following screenshot shows the content of the `BUILD` folder of the sample
-    application:'
-  id: totrans-126
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下截图显示了示例应用程序的`BUILD`文件夹的内容：
-- en: '![](Images/751f24bf-3ab9-4bde-aa22-52c5c896fc43.png)'
-  id: totrans-127
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/751f24bf-3ab9-4bde-aa22-52c5c896fc43.png)'
-- en: To publish the production build of our application, we can just copy the content
-    of the `BUILD` folder into the production server's folder.
-  id: totrans-128
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 要发布我们应用程序的生产构建，我们只需将`BUILD`文件夹的内容复制到生产服务器的文件夹中。
-- en: The result of the production build assumes that the artifact will be published
-    into the web server root, that is, at a location where the application will be
-    accessible through a URL such as `http://www.myapplication.com`.
-  id: totrans-129
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 生产构建的结果假设工件将被发布到Web服务器根目录，也就是说，在一个位置，应用程序将通过一个URL（如`http://www.myapplication.com`）访问。
-- en: If we need to publish the application in a root's subfolder, that is, at a location
-    where the application will be accessible through a URL such as `http://www.myapplication.com/app`,
-    we need to make a slight change to the `package.json` file.
-  id: totrans-130
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果我们需要在根目录的子文件夹中发布应用程序，也就是说，在一个位置，应用程序将通过一个URL（如`http://www.myapplication.com/app`）访问，我们需要对`package.json`文件进行轻微更改。
-- en: 'In this case, we need to add a `homepage` key to the configuration JSON with
-    the URL as its value, as shown here:'
-  id: totrans-131
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在这种情况下，我们需要在配置JSON中添加一个`homepage`键，其值为URL，如下所示：
-- en: '`"homepage": "http://www.myapplication.com/app"`.'
-  id: totrans-132
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`"homepage": "http://www.myapplication.com/app"`。'
-- en: The npm run eject Command
-  id: totrans-133
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: npm运行eject命令
-- en: 'The last command we will cover is the `eject` command:'
-  id: totrans-134
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们要介绍的最后一个命令是`eject`命令：
-- en: '[PRE14]'
-  id: totrans-135
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE14]'
-- en: We can use this command when we are confident in using the tools underlying `create-react-app`
-    and we need to customize the environment configuration. This command takes our
-    application out of the CLI context and gives us the power and responsibility to
-    manage it.
-  id: totrans-136
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当我们对使用`create-react-app`底层工具充满信心并且需要自定义环境配置时，我们可以使用此命令。此命令将我们的应用程序从CLI上下文中移出，并赋予我们管理和负责它的能力。
-- en: This is a one-way process. If we leave the `create-react-app` context for our
-    application, we cannot go back.
-  id: totrans-137
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这是一个单向过程。如果我们为应用程序离开`create-react-app`上下文，我们就无法返回。
-- en: How to Design a UI
-  id: totrans-138
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 如何设计UI
-- en: Now, we are going to see how we can design our application so that it fits well
-    when implemented with React.
-  id: totrans-139
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 现在，我们将看到如何设计我们的应用程序，以便它在用React实现时很好地适应。
-- en: Everything Is a Component
-  id: totrans-140
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 一切都是组件
-- en: The main concept introduced by React in user interface design and implementation is
-    the component concept. A user interface is an aggregate of components, and the whole
-    React application is an aggregate of components. We will now see in more detail
-    what components are from a design point of view.
-  id: totrans-141
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在用户界面设计和实现中引入的主要概念是React的组件概念。用户界面是组件的聚合，整个React应用程序是组件的聚合。现在我们将更详细地了解从设计角度来看组件是什么。
-- en: From a design point of view, we can say that a component is a part of the user interface,
-    having a specific role. A hierarchy of components is often called a component
-    tree.
-  id: totrans-142
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 从设计的角度来看，我们可以说组件是用户界面的一部分，具有特定的作用。组件的层次结构通常被称为组件树。
-- en: 'Consider a form in a web page. It can be treated as a component, since it has
-    a specific role: to collect data and send it to the server. Also, a textbox inside
-    the form can be considered a component. It has a specific role: to collect a single
-    piece of data that will be sent to the server. So, a component may contain other
-    components. And this is what usually happens: a user interface is a hierarchy
-    of components, where some components contain other components.'
-  id: totrans-143
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 考虑网页中的一个表单。它可以被视为一个组件，因为它有一个特定的作用：收集数据并将其发送到服务器。此外，表单内的文本框也可以被视为一个组件。它有一个特定的作用：收集单个数据片段，该数据将被发送到服务器。因此，一个组件可能包含其他组件。这通常是发生的情况：用户界面是组件的层次结构，其中一些组件包含其他组件。
-- en: Keep this concept in mind, since it will be useful to implement efficient and
-    reusable user interfaces.
-  id: totrans-144
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 记住这个概念，因为它将有助于实现高效和可重用的用户界面。
-- en: Decompose a User Interface
-  id: totrans-145
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 分解用户界面
-- en: 'To better understand how to design a user interface and how to create components to
-    implement them, we will try to decompose a well-known web user interface—the YouTube
-    main page:'
-  id: totrans-146
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 为了更好地理解如何设计用户界面以及如何创建组件来实现它们，我们将尝试分解一个广为人知的网页用户界面——YouTube主页：
-- en: '![](Images/e9867a5a-8ca0-4c86-9b7e-73501a8bde50.png)'
-  id: totrans-147
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/e9867a5a-8ca0-4c86-9b7e-73501a8bde50.png)'
-- en: We can detect several items on this page, each having a specific role, starting
-    with the page itself, whose role is to allow the user to interact with the system.
-  id: totrans-148
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以检测到页面上的多个项目，每个项目都有特定的作用，从页面本身开始，其作用是允许用户与系统交互。
-- en: 'If we consider the header, the left sidebar, and the main area, all of these
-    items are components of the page. You can see them highlighted in the following
-    screenshot:'
-  id: totrans-149
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果我们考虑页眉、左侧边栏和主区域，所有这些项目都是页面的组件。您可以在下面的截图中看到它们被突出显示：
-- en: '![](Images/094ad032-347c-4c84-9cfd-c33f4ce932f8.png)'
-  id: totrans-150
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/094ad032-347c-4c84-9cfd-c33f4ce932f8.png)'
-- en: 'Of course, we can go ahead and detect other components. For example, we can
-    consider each video preview box in the main area as a component. You can see them
-    in the following screenshot:'
-  id: totrans-151
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当然，我们可以继续识别其他组件。例如，我们可以将主区域中的每个视频预览框视为一个组件。您可以在下面的截图中看到它们：
-- en: '![](Images/fbd31514-b679-4314-9c01-bd23302a7d35.png)'
-  id: totrans-152
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/fbd31514-b679-4314-9c01-bd23302a7d35.png)'
-- en: This decomposition process allows us to focus on the specific role of each item
-    in an interface, so that we can try to isolate each functionality and create reusable components,
-    that is, components with just the dependencies that really matter.
-  id: totrans-153
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这个分解过程使我们能够专注于界面中每个项目的特定作用，以便我们可以尝试隔离每个功能并创建可重用的组件，即只具有真正重要的依赖关系的组件。
-- en: Container and Presentational Components
-  id: totrans-154
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 容器和展示组件
-- en: We can classify the components in a user interface into container and presentational components.
-  id: totrans-155
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以将用户界面中的组件分为容器组件和展示组件。
-- en: The container components are components that do not have a relevant visual effect. Their
-    main role is to group other components, that is, *contain* other components. For example,
-    a form is usually a container component, since its main role is to contain other
-    components, such as textboxes, labels, buttons, and so on.
-  id: totrans-156
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 容器组件是那些没有显著视觉效果的组件。它们的主要作用是组合其他组件，即*包含*其他组件。例如，一个表单通常是容器组件，因为它的主要作用是包含其他组件，如文本框、标签、按钮等。
-- en: The presentational components are components that display data in some graphical form.
-    A textbox, a date picker, and a toolbar are examples of presentational components.
-  id: totrans-157
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 展示组件是那些以某种图形形式显示数据的组件。文本框、日期选择器和工具栏都是展示组件的例子。
-- en: The distinction between container and presentational components is very important in
-    order to create efficient user interfaces in React. We will exploit this distinction later,
-    when we learn to manage the components' state and to propagate data through the
-    components.
-  id: totrans-158
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 区分容器组件和展示组件对于在React中创建高效的用户界面非常重要。我们将在学习管理组件状态和通过组件传播数据时利用这种区分。
-- en: 'Activity: Detecting Components in a Web User Interface'
-  id: totrans-159
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：在网页用户界面中识别组件
-- en: '**Scenario**'
-  id: totrans-160
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We need to convert the Wikipedia website's user interface ([https://en.wikipedia.org](https://en.wikipedia.org))
-    into React components.
-  id: totrans-161
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们需要将维基百科网站的用户界面（[https://en.wikipedia.org](https://en.wikipedia.org)）转换为React组件。
-- en: '**Aim**'
-  id: totrans-162
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of the activity is to address the design process when implementing React-based user
-    interfaces.
-  id: totrans-163
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 该活动的目的是解决在实现基于React的用户界面时的设计过程。
-- en: '**Steps for Completion**'
-  id: totrans-164
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Analyze the page's current structure and detect the items you can implement
-    as components
-  id: totrans-165
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 分析页面的当前结构并识别可以作为组件实现的项目
-- en: Indicate which would be container and which would be presentational components
-  id: totrans-166
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 指出了哪些是容器组件，哪些是展示组件
-- en: '**Solution**'
-  id: totrans-167
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: 'Assume that the following is the current Wikipedia home page:'
-  id: totrans-168
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 假设以下是当前的维基百科首页：
-- en: '![](Images/3efcae52-04c7-429a-92d7-fd347d736c11.png)'
-  id: totrans-169
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/3efcae52-04c7-429a-92d7-fd347d736c11.png)'
-- en: A possible solution could be as follows.
-  id: totrans-170
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 可能的解决方案如下。
-- en: 'We can detect the following components:'
-  id: totrans-171
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以识别以下组件：
-- en: The *home page* component contains the *left sidebar* component, the *header* component,
-    and the *main area* component. All of these components are container components.
-  id: totrans-172
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '*首页*组件包含*左侧边栏*组件、*头部*组件和*主区域*组件。所有这些组件都是容器组件。'
-- en: The *left-side* component contains the *logo* component (presentational) and
-    a list of *section* components (presentational).
-  id: totrans-173
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '*左侧边栏*组件包含*徽标*组件（展示型）和一组*节*组件（展示型）。'
-- en: The *header* component contains a list of *link* components (presentational)
-    to general pieces of functionality.
-  id: totrans-174
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '*头部*组件包含一组*链接*组件（展示型），指向一般的功能块。'
-- en: The *main area* component contains a list of *tab* components (container) and
-    a *search* component (presentational).
-  id: totrans-175
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '*主区域*组件包含一组*标签*组件（容器型）和一个*搜索*组件（展示型）。'
-- en: The main *tab* component contains a *banner* component (presentational), a *topic
-    index* component (presentational), and a list of *block* components (presentational).
-  id: totrans-176
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '*主标签*组件包含一个*横幅*组件（展示型），一个*主题索引*组件（展示型），以及一组*块*组件（展示型）。'
-- en: Summary
-  id: totrans-177
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: '**总结**'
-- en: 'In this chapter, we started to explore the React world. In particular, we:'
-  id: totrans-178
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章中，我们开始探索React世界。特别是，我们：
-- en: Established that React is a user interface library, used to implement the View part
-    of various MV* design patterns
-  id: totrans-179
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 确定了React是一个用户界面库，用于实现各种MV*设计模式中的视图部分
-- en: Introduced the `create-react-app` tool, which helps us to set up a development environment
-    to build React-based applications
-  id: totrans-180
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 介绍了`create-react-app`工具，它帮助我们设置一个开发环境来构建基于React的应用程序
-- en: Explored the items composing a typical React-based application
-  id: totrans-181
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 探索了构成典型基于React的应用程序的各个部分
-- en: Analyzed the approach to designing user interfaces that best fits in the React world
-  id: totrans-182
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 分析了最适合React世界的用户界面设计方法
-- en: In the next chapter, we will discover how to create React components to build
-    user interfaces for our application.
-  id: totrans-183
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在下一章中，我们将学习如何创建React组件来构建我们应用程序的用户界面。
diff --git a/docs/bg-react/bg-react_2.md b/docs/bg-react/bg-react_2.md
index 34fa951..a0a62d8 100644
--- a/docs/bg-react/bg-react_2.md
+++ b/docs/bg-react/bg-react_2.md
@@ -1,2 +1,843 @@
-# 第三章
+# 第二章：创建组件
 
+在本章中，我们将学习如何实现 React 组件，如何将多个组件组合成一个，以及如何管理它们的内部状态。我们将通过构建一个简单的应用程序来探索 React 组件的实现。这个应用程序将逐步实现，以便将概述的概念付诸实践。
+
+在本章结束时，您将能够：
+
++   创建基本的 React 组件
+
++   使用 JSX 来定义组件的标记
+
++   组合多个 React 组件以创建复杂的 UI 元素
+
++   管理 React 组件的内部状态
+
+# 组件定义
+
+如前一章所定义，组件是 React 的基本构建块。用户界面中的几乎任何视觉项都可以是一个组件。从正式的角度来看，我们会说一个 React 组件是一段定义用户界面一部分的 JavaScript 代码。
+
+考虑以下代码文件：
+
+```jsx
+import React from 'react';
+
+class Catalog extends React.Component {
+  render() {
+    return <div><h2>Catalog</h2></div>;
+  }
+}
+
+export default Catalog;
+```
+
+这是一个 ECMAScript 2015 模块，定义了一个基本的 React 组件。
+
+它从 `react` 模块导入 `React` 命名空间，并通过扩展 `React.Component` 类来定义 `Catalog` 类。该模块将 `Catalog` 类作为默认导出。
+
+这个定义的有趣之处在于 `render()` 方法的实现。
+
+`render()` 方法定义了组件的视觉部分。它可以执行任何 JavaScript 代码，并应返回一个定义其视觉输出的标记表达式。`render()` 方法对于 React 组件是强制性的。在我们的示例中，`render()` 方法返回以下标记：
+
+```jsx
+<div><h2>Catalog</h2></div>
+```
+
+它看起来像 HTML；尽管它使用类似的语法，但它定义了称为 **元素** 的普通对象。React 元素类似于 **文档对象模型** (**DOM**) 元素，但更轻便且更高效。因此，React 组件生成一组将由库引擎映射到 DOM 元素的 React 元素。这组 React 元素称为 **虚拟 DOM**，是浏览器 DOM 的轻量级表示。React 负责更新 DOM 以匹配虚拟 DOM，仅在严格必要时进行。这种方法使得 React 在渲染用户界面时具有非常高的性能。
+
+`render()` 方法必须遵守一些约束：
+
++   它是强制性的；也就是说，每个 React 组件都必须实现它
+
++   它必须返回一个 React 元素；也就是说，一个带有任何嵌套元素的单个标记项
+
++   它应该是纯函数；也就是说，它不应该改变组件的内部状态（我们将在下一节详细讨论这个话题）
+
++   它不应该直接与浏览器交互；也就是说，它不应该包含试图访问 DOM 的语句
+
+纯函数是指其输出结果仅依赖于输入数据，且执行过程中没有副作用，例如，不会更新全局变量。给定一个输入值，纯函数总是返回相同的结果。
+
+纯组件是一种像纯函数一样工作的组件。这意味着，给定相同的初始条件，它总是渲染相同的输出。保持`render()`方法为纯函数非常重要。这样可以避免我们在下一章中看到的奇怪的错误。
+
+一旦我们定义了组件，我们就可以在任何其他 React 组件中将其作为 React 元素使用。例如，我们知道 React 应用程序本身已经是一个 React 组件。让我们回顾一下`create-react-app`工具在`App.js`文件中生成的代码：
+
+```jsx
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+我们可以看到这段代码与我们所定义的`Catalog`组件具有相同的结构。让我们更改这段代码，以便在`App`组件内部使用我们的组件：
+
+```jsx
+import React, { Component } from 'react';
+import './App.css';
+import Catalog from './Catalog';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">The Catalog App</h1>
+        </header>
+        <Catalog />
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+我们通过删除一些自动生成的标记简化了代码。然后导入`Catalog`组件，并将`<Catalog />`元素放入应用程序`render()`方法返回的`<div>`元素中。
+
+# 构建我们的第一个 React 组件
+
+打开现有项目`my-shop-01`，以展示之前代码更改的结果：
+
+1.  打开一个控制台窗口
+
+1.  转到`my-shop-1`文件夹
+
+1.  运行`npm install`
+
+1.  运行`npm start`
+
+以下是我们在浏览器窗口中将看到的一个示例：
+
+![](img/888b626e-0f78-4346-9515-29ba28498237.png)
+
+我们已经构建了我们的第一个 React 组件，并且可以看到它在运行！
+
+# 管理样式
+
+也许您已经注意到，在`App`组件模块中有一个关于 CSS 文件的`import`语句：
+
+```jsx
+import React, { Component } from 'react';
+import './App.css';
+import Catalog from './Catalog';
+```
+
+这可能看起来有点奇怪，因为`import`语句应该只适用于 JavaScript 代码。然而，由于`create-react-app`提供的开发环境，我们甚至可以使用相同的语法，即使对于 CSS 文件也是如此。这允许我们在组件中使用`App.css`中定义的类和其他 CSS 定义，将组件特定的样式保持在组件定义本身附近。例如，如果我们想让`Catalog`组件的标题为红色，我们可以按照以下步骤进行。
+
+# 添加 CSS
+
+我们现在将更改现有项目`my-shop-01`的内容，以便添加一些 CSS 代码并将目录标题显示为红色：
+
+1.  打开一个控制台窗口。
+
+1.  转到`my-shop-1/src`文件夹。
+
+1.  创建一个文件，`Catalog.css`，并添加以下代码：
+
+```jsx
+h2 { color: red }
+```
+
+1.  打开`Catalog.js`文件并添加以下语句以导入`Catalog.css`模块：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+
+class Catalog extends React.Component {
+  render() {
+    return <div><h2>Catalog</h2></div>;
+  }
+}
+export default Catalog;
+```
+
+1.  运行`npm start`并查看结果。
+
+您可以在`Code/Chapter-2`中的`my-shop-02`文件夹中找到一个准备好的项目。
+
+浏览器将显示红色 Catalog 标题：
+
+![](img/2e2fe10c-32de-4a03-8f13-3a1ebfa19cc5.png)CSS 导入不是 React 的特性，也不是 React 所必需的。它是开发环境提供的一种便利，由`create-react-app`构建。特别是，这个特性是由**webpack**提供的，**webpack**是最常用的打包器和模块加载器之一。
+
+当你想将应用程序迁移到一个不基于 webpack 的开发环境时，应该考虑这一点。
+
+# 活动：定义购物车
+
+**场景**
+
+我们的电子商店需要一个购物车。
+
+**目标**
+
+此活动的目的是开始使用 React 定义一个组件。
+
+**完成步骤**
+
+1.  我们应该定义一个作为购物车基础的 React 组件
+
+1.  它应该是一个仅显示字符串`Cart`的组件。
+
+使用`create-react-app`创建一个新的 React 应用程序，并按照当前章节所示进行更改。
+
+**解决方案**
+
+一个可能的解决方案包含在`Code/Chapter-2/`下的`my-cart-01`文件夹中。
+
+# 使用 JSX
+
+在前面的示例中，我们使用类似 HTML 的标记表达式定义了组件的`render()`方法返回的视觉输出。例如，让我们看看`Catalog`组件的定义：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+
+class Catalog extends React.Component {
+  render() {
+    return <div><h2>Catalog</h2></div>;
+  }
+}
+
+export default Catalog;
+```
+
+标记表达式并未使用 JavaScript 语法，但它被包含在一个 JavaScript 代码片段内。我们为什么要混合 HTML 和 JavaScript 语法？这是如何实现的？
+
+首先，我们要说的是，描述 React 组件视觉输出的类似 HTML 的语言被称为**JSX**。这种语言通过在 JavaScript 代码中添加 XML 表达式来简化 HTML 元素的创建。你可以将其视为一种`document.write("...")`，但功能更强大。实际上，在构建 React 应用程序时，JSX 标记由特定的解析器预处理，以生成纯 JavaScript 代码。因此，我们可以利用使用声明性标记语言的简单性，该语言将自动转换为优化的 JavaScript 代码。
+
+如前所述，JSX 表达式创建了一个 React 元素，它是 HTML 元素的对应物。从语法角度来看，JSX 表达式是一个带有任何嵌套元素的单个标记项。因此，以下是一个有效的 JSX 表达式：
+
+```jsx
+<div><h2>Catalog</h2></div>
+```
+
+以下不是一个有效的 JSX 表达式，因为它包含两个标记项：
+
+```jsx
+<div><h2>Catalog</h2></div>
+<div><img src="image.png" /></div>
+```
+
+JSX 表达式是 XML 片段，因此它们遵循 XML 语法规则。这意味着，除其他事项外，标记是区分大小写的，并且所有标签都必须关闭。
+
+例如，以下 JSX 表达式是无效的：
+
+`<img src="image.png">`
+
+其有效版本如下：
+
+`<img src="image.png"/>`
+
+我们可以将 JSX 表达式赋值给一个变量，如下例所示：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+
+class Catalog extends React.Component {
+  render() {
+    let output = <div><h2>Catalog</h2></div>;
+    return output;
+  }
+}
+
+export default Catalog;
+```
+
+我们还可以在 JSX 表达式中嵌入任何 JavaScript 表达式，方法是将其用大括号包裹，如下例所示：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+
+class Catalog extends React.Component {
+  render() {
+    let title = "Catalog";
+    return <div><h2>{title}</h2></div>;
+  }
+}
+export default Catalog;
+```
+
+当然，JavaScript 表达式可以像我们需要的那样复杂，如下面的组件定义所示：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+
+class Catalog extends React.Component {
+  render() {
+    let title = "The Catalog of today " + new Date().toDateString();
+    return <div><h2>{title}</h2></div>;
+  }
+}
+
+export default Catalog;
+```
+
+除了优化输出渲染，JSX 还提供支持以防止注入攻击。实际上，任何嵌入 JSX 表达式的值在被渲染之前都会被转义。例如，这可以防止用户输入的恶意代码被插入。
+
+结合 JavaScript 和 JSX 表达式的常见用法称为**条件渲染**；也就是说，一种根据某些布尔条件生成 JSX 表达式的技术。考虑以下示例：
+
+```jsx
+import React from 'react';
+import './Message.css';
+
+class Message extends React.Component {
+  render() {
+    let message;
+    let today = new Date().getDay();
+
+    if (today == 0) {
+ message = <div className="sorry">We are closed on Sunday...</div>;
+ } else {
+ message = <div className="happy">How can we help you?</div>
+ }
+
+    return message;
+  }
+}
+
+export default Message;
+```
+
+在前面的示例中，`render()`方法根据当前星期几返回一条不同的消息，这导致生成具有不同消息和 CSS 类的 React 元素，但我们甚至可以返回完全不同的标记。
+
+您可以将 JSX 表达式放在多行中，如下所示：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+
+class Catalog extends React.Component {
+  render() {
+    let title = "Catalog";
+
+    return <div>
+ <h2>{title}</h2>
+ </div>;
+  }
+}
+
+export default Catalog;
+```
+
+当返回 JSX 表达式时，在`return`语句的同一行开始它非常重要，如前一个示例所示。如果您想在新行开始 JSX 表达式，则需要将其括在圆括号中，并将左括号放在与`return`语句相同的行上，如下所示：
+
+`return (`
+
+`  <div>`
+
+`    <h2>Catalog</h2>`
+
+`  </div>);`
+
+您可以使用 JavaScript 语法将注释放在 JSX 表达式中，用大括号括起来。以下是带有注释的 JSX 表达式的示例：
+
+```jsx
+<div>
+  <h2>Catalog</h2>
+  {//This is a comment}
+ {/* This is a comment, too */}
+</div>;
+```
+
+JSX 标签匹配 HTML 标签，这就是为什么我们可以使用整个 HTML 语法来定义 JSX 元素。但是，有一些限制：
+
++   所有 HTML 标签均为小写
+
++   您需要使用`className`而不是`class`属性
+
++   您需要使用`htmlFor`而不是`for`属性
+
+以下示例展示了使用`className`属性而不是`class`：
+
+```jsx
+<div className="catalog-style">
+  <h2>Catalog</h2>
+</div>;
+```
+
+JSX 使用`className`和`htmlFor`属性而不是`class`和`for`，因为 JSX 表达式在 JavaScript 内部，`class`和`for`可能与相应的保留关键字冲突。
+
+# 活动：将 HTML 转换为 JSX
+
+**场景**
+
+图形部门已向您提供了一个 HTML 片段，您需要将其翻译为 JSX 以创建 React 组件。
+
+**目标**
+
+此活动的目的是了解 HTML 和 JSX 之间的区别。
+
+**完成步骤**
+
+1.  打开`Code02.txt`文件
+
+1.  将包含的 HTML 代码转换为 JSX
+
+**解决方案**
+
+可能的解决方案是包含在`Code/Chapter-2/`中的`activity-b.html`文件。
+
+# 组合组件
+
+在定义 React 组件时，我们可以将它们用作另一个组件的子组件，方法是将其作为 React 元素使用。当我们包含`Catalog`组件在`App`组件内部时，我们已经看到了这一点，但是让我们进一步分析这种组合。
+
+# 组合组件
+
+现在我们将看到如何组合组件以创建新的、复杂的组件：
+
+1.  在`my-shop-03`文件夹中打开`src/ProductList.js`文件
+
+1.  按照文本直到本节结束
+
+让我们考虑以下组件：
+
+```jsx
+import React from 'react';
+class ProductList extends React.Component {
+  render() {
+    return <ul>
+      <li>
+        <h3>Traditional Merlot</h3>
+        <p>A bottle of middle weight wine, lower in tannins (smoother), 
+           with a more red-fruited flavor profile.</p>
+      </li>
+      <li>
+        <h3>Classic Chianti</h3>
+        <p>A medium-bodied wine characterized by a marvelous freshness with 
+           a lingering, fruity finish</p>
+      </li>
+      <li>
+        <h3>Chardonnay</h3>
+        <p>A dry full-bodied white wine with spicy, bourbon-y notes in an 
+           elegant bottle</p>
+      </li>
+      <li>
+ <h3>Brunello di Montalcino</h3> <p>A bottle red wine with exceptionally bold fruit flavors, 
+           high tannin, and high acidity</p>
+      </li>
+    </ul>;
+  }
+}
+export default ProductList; 
+```
+
+该组件定义了酒名和描述的列表。
+
+我们希望将我们的`Catalog`组件与酒单集成。由于我们已经创建了`ProductList`组件，因此我们可以将其用作`Catalog`组件的 JSX 标记中的标签，如下所示：
+
+```jsx
+import React from 'react';
+import ProductList from './ProductList';
+
+class Catalog extends React.Component {
+  render() {
+    return <div>
+      <h2>Catalog</h2>
+      <ProductList />
+    </div>;
+  }
+}
+
+export default Catalog;
+```
+
+如您所见，我们只需导入`ProductList`组件，以便在`Catalog`组件的模块中使其可用，并在我们希望酒单出现的地方使用`ProductList`标签。
+
+运行`npm start`以启动应用程序。生成的页面将如下所示：
+
+![](img/772ab3c7-0d0d-49dc-b8cf-08cb9a057d5e.png)
+
+我们说过，JSX 表达式中的 HTML 标签应该始终是小写的。然而，我们在 Pascal case 中使用了`ProductList`标签。
+
+对应于组件的标签必须遵循类定义中使用的案例，并且按照惯例，组件类名使用 Pascal case，尽管这不是 React 所要求的。
+
+React 组件的组合简便性使得创建用户界面变得非常简单，遵循上一章提供的指导原则。我们可以将页面布局分解为一系列层次化的组件，每个组件又由其他组件组成。这种方法使我们能够专注于单个组件的行为，并促进其可重用性。
+
+# 活动：定义一个组合的购物车
+
+**场景**
+
+我们想要为我们的购物车创建一些内容。
+
+**目的**
+
+这项活动的目的是组合 React 组件。
+
+**完成步骤**
+
+将之前创建的`Cart`组件整合，以便包含一个显示两个项目的`CartList`组件。
+
+**解决方案**
+
+可能的解决方案是包含在`Code/Chapter-2/`下的`my-cart-02`文件夹中的方案。
+
+# 数据传播
+
+`ProductList`组件，我们在上一节中定义的，是不切实际的。让我们再次看看它：
+
+```jsx
+import React from 'react';
+import './ProductList.css';
+
+class ProductList extends React.Component {
+  render() {
+    return <ul>
+      <li>
+        <h3>Traditional Merlot</h3>
+        <p>A bottle of middle weight wine, lower in tannins (smoother), 
+           with a more red-fruited flavor profile.</p>
+      </li>
+      <li>
+        <h3>Classic Chianti</h3>
+        <p>A medium-bodied wine characterized by a marvelous freshness with 
+           a lingering, fruity finish</p>
+      </li>
+      <li>
+        <h3>Chardonnay</h3>
+        <p>A dry full-bodied white wine with spicy, bourbon-y notes in an 
+           elegant bottle</p>
+      </li>
+      <li>
+        <h3>Brunello di Montalcino</h3>
+        <p>A bottle of red wine with exceptionally bold fruit flavors, high 
+           tannin, and high acidity</p>
+      </li>
+      </ul>;
+   }
+}
+
+export default ProductList;
+```
+
+列表项都是作为 JSX 标记定义的，因此，如果您需要更改目录产品的图形外观，则需要更改每个`<li>`元素的所有出现位置。
+
+我们可以通过进一步分解用户界面来实现更好的实现。我们可以将每个列表项视为一个组件，并将`Product`组件视为以下代码定义的组件：
+
+```jsx
+import React from 'react';
+
+class Product extends React.Component {
+  render() {
+    return <li>
+      <h3>Product name</h3>
+      <p>Product description</p>
+    </li>;
+  }
+}
+
+export default Product;
+```
+
+这段代码作为每个列表项的模板，以便我们可以动态构建我们的产品列表，如下所示：
+
+```jsx
+import React from 'react';
+import './ProductList.css';
+import Product from './Product';
+
+class ProductList extends React.Component {
+  render() {
+    let products = [
+      {code:"P01", name: "Traditional Merlot", description: "A bottle 
+       of middle weight wine, lower in tannins (smoother), with a 
+       more red-fruited flavor profile."},
+      {code:"P02", name: "Classic Chianti", description: "A medium-bodied
+       wine characterized by a marvelous freshness with a lingering, 
+       fruity finish"},
+      {code:"P03", name: "Chardonnay", description: "A dry full-bodied
+       white wine with spicy, bourbon-y notes in an elegant bottle"},
+      {code:"P04", name: "Brunello di Montalcino", description: "A bottle
+       of red wine with exceptionally bold fruit flavors, high tannin,
+       and high acidity"}
+    ];
+    let productComponents = [];
+
+    for (let product of products) {
+      productComponents.push(<Product/>);
+    }
+
+    return <ul>{productComponents}</ul>;
+  }
+}
+
+export default ProductList;
+```
+
+我们可以看到一个对象数组的定义，`products`，包含每个产品的相关数据。第二个数组，`productComponents`，将包含由合并产品数据与`Product`组件的标记创建的 React 组件列表。`for`循环旨在执行此类合并。最后，将返回包围在`<ul>`元素中的结果`productComponents`数组。
+
+即使代码结构看起来是正确的，结果也不会如预期。实际上，我们将得到一个具有固定名称和描述的项列表，这些名称和描述是我们放在`Product`组件定义中的。换句话说，数据与组件定义的合并没有发生。
+
+实际上，我们需要一种方法将每个产品的数据传递给`Component`类。让我们将 React 组件视为普通的 JavaScript 函数。它们可以实现为返回 React 元素的函数，并且，与任何函数一样，组件可以有数据输入。这种数据输入通过 JSX 属性传递，并且可以在组件内部通过一个特殊的对象`**props**`访问。让我们更改`ProductList`组件的代码，以便通过 JSX 属性传递数据：
+
+```jsx
+
+import React from 'react';
+import Product from './Product';
+
+class ProductList extends React.Component {
+  render() {
+    let products = [
+      {code:"P01", name: "Traditional Merlot", description: "A bottle
+       of middle weight wine, lower in tannins (smoother), with a 
+       more red-fruited flavor profile."},
+      {code:"P02", name: "Classic Chianti", description: "A medium-bodied
+       wine characterized by a marvelous freshness with a lingering, 
+       fruity finish"},
+      {code:"P03", name: "Chardonnay", description: "A dry full-bodied
+       white wine with spicy, bourbon-y notes in an elegant bottle"},
+      {code:"P04", name: "Brunello di Montalcino", description: "A bottle
+       of red wine with exceptionally bold fruit flavors, high tannin, 
+       and high acidity"}
+    ];
+
+    let productComponents = [];
+
+    for (let product of products) {
+      productComponents.push(<Product
+      item={product}/>);
+    }
+
+    return <ul>{productComponents}</ul>;
+  }
+}
+
+export default ProductList;
+```
+
+我们在`<Product>`标签上添加了一个`item`属性，并将`products`数组中的单个对象分配给它。这允许我们将每个产品的数据传递给`Product`组件。
+
+另一方面，我们修改了`Product`组件的代码，以便接收和管理传递的数据：
+
+```jsx
+import React from 'react';
+
+class Product extends React.Component {
+  render() {
+    return <li>
+      <h3>{this.props.item.name}</h3>
+      <p>{this.props.item.description}</p>
+    </li>;
+  }
+}
+
+export default Product;
+```
+
+你可以在`Code/Chapter-2/my-shop-04`文件夹中找到一个准备好的项目。
+
+每个 React 组件都有一个`props`属性。这个属性的目的是收集传递给组件本身的数据输入。每当将 JSX 属性附加到 React 元素时，具有相同名称的属性就会附加到`props`对象上。因此，我们可以通过使用附加的属性来访问传递的数据。在我们的例子中，我们找到了通过`item`属性传递的产品数据映射到`this.props.item`属性。
+
+`props`是不可变的；也就是说，它们是只读属性。
+
+这种新的实现方式允许目录像以前一样显示，但使图形标记独立于产品的数据。
+
+在组件层次结构中，数据传播非常重要。它允许我们将组件视为具有输入和输出的函数。此外，`props`的不变性允许我们将组件视为纯函数，这些函数是没有副作用的函数（因为它们不改变其输入数据）。我们可以将从一个组件到另一个组件的数据传递视为**单向数据流**，从父组件流向子组件。这为我们提供了一个更可控的系统。
+
+下图显示了我们如何理想地想象组件层次结构中的数据传播：
+
+![](img/4e8e2c52-6d4e-4ebc-969a-497971c28dfb.png)
+
+状态的变化会导致数据通过`props`属性向子组件传播。
+
+# 活动：创建购物车项组件
+
+**场景**
+
+我们希望将`CartList`组件变为一个动态组件，以便它能够根据接收到的数据调整其内容。
+
+**目标**
+
+这项活动的目的是组合 React 组件并在它们之间传递数据。
+
+**完成步骤**
+
+1.  创建一个显示商品名称的`CartItem`组件。
+
+1.  更改之前创建的`CartList`组件，使其根据`items`数组动态地由`CartItem`实例组成。
+
+**解决方案**
+
+一个可能的解决方案是包含在`Code/Chapter-2/my-cart-03`文件夹中的那个。
+
+# 管理内部状态
+
+组件具有存储随时间变化的数据的能力。
+
+当组件显示随时间变化，的数据时，我们希望尽快显示更改。例如，考虑`ProductList`组件：它显示`products`数组中的产品列表。如果向数组添加新产品，我们希望它立即显示。React 提供了一种机制来支持数据变化时组件的自动渲染。这种机制基于**状态**的概念。
+
+React `state`是一个代表随时间变化的数据的属性。每个组件都支持`state`属性，但应谨慎使用。
+
+再次考虑`ProductList`组件：
+
+```jsx
+import React from 'react';
+import Product from './Product';
+
+class ProductList extends React.Component {
+  render() {
+    let products = [
+      {code:"P01", name: "Traditional Merlot", description: "A bottle
+       of middle weight wine, lower in tannins (smoother), with a more 
+       red-fruited flavor profile."},
+      {code:"P02", name: "Classic Chianti", description: "A medium-bodied
+       wine characterized by a marvelous freshness with a lingering, 
+       fruity finish"},
+      {code:"P03", name: "Chardonnay", description: "A dry full-bodied 
+       white wine with spicy, bourbon-y notes in an elegant bottle"},
+      {code:"P04", name: "Brunello di Montalcino", description: "A bottle
+       of red wine with exceptionally bold fruit flavors, high tannin, 
+       and high acidity"}
+    ];
+
+    let productComponents = [];
+
+    for (let product of products) {
+      productComponents.push(<Product item={product}/>);
+    }
+
+    return <ul>{productComponents}</ul>;
+  }
+}
+
+export default ProductList;
+```
+
+从实用的角度来看，这并不那么有用。它显示了一个硬编码的产品列表。如果我们想添加新产品，我们需要修改组件源代码。
+
+在现实世界场景中，我们希望保持组件代码独立于产品数据。例如，我们会通过向 Web 服务器发出 HTTP 请求来获取产品数据。在这种情况下，`products`数组代表随时间变化，的数据：最初是一个空数组，然后会填充从服务器接收的产品数据，并且可以通过后续对服务器的请求再次更改。
+
+存储随时间变化，的数据的组件被称为**有状态组件**。有状态组件将状态存储在`this.state`属性中。要通知组件状态已更改，必须使用`setState()`方法。此方法为组件设置新状态；它不更新它。状态的变化触发组件的渲染；即`render()`方法的自动执行。
+
+让我们看看如何通过更改`ProductList`组件定义来管理状态：
+
+```jsx
+import React from 'react';
+import Product from './Product';
+
+class ProductList extends React.Component {
+  constructor() {
+ super();
+ this.state = { products: [] };
+
+ fetch("products.json")
+ .then(response => response.json())
+ .then(json => {this.setState({products: json})})
+ .catch(error => console.log(error));
+ }
+
+  render() {
+    let productComponents = [];
+
+    for (let product of this.state.products) {
+      productComponents.push(<Product item={product}/>);
+    }
+    return <ul>{productComponents}</ul>;
+  }
+}
+export default ProductList;
+```
+
+我们向组件添加了构造函数。构造函数运行超类构造函数，并将组件的初始状态设置为具有`products`属性的空数组的对象。
+
+然后，通过`fetch()`向服务器发送 GET HTTP 请求。由于请求是异步的，组件的初始渲染将是一个空的产品列表。
+
+状态初始化是唯一可以不使用`setState()`而直接给`this.state`属性赋值的情况。
+
+当接收到 HTTP 响应时，它用于通过`setState()`更改组件的状态。这种状态变化导致`render()`的自动执行，这将显示从服务器接收的产品列表。
+
+既然我们已经知道如何管理组件的状态，那么在使用`setState()`方法时，有几点需要记住：
+
++   `setState()`将新数据与状态中已有的旧数据合并，并覆盖先前的状态。
+
++   `setState()`触发`render()`方法的执行，因此您永远不应该显式调用`render()`。
+
+组件状态管理看似非常简单。然而，在决定什么应该被视为状态以及哪个组件应该是有状态的时，很容易陷入困境。
+
+以下是关于状态的一些建议：
+
++   状态应包含 UI 中随时间变化，所需的最小数据；任何可以从这些最小数据中推导出的信息都应在`render()`方法内部计算。
+
++   应尽可能避免使用状态，因为它会给组件增加复杂性。
+
++   有状态的组件应该位于 UI 组件层次结构的高层。
+
+我们可以将最后一条建议视为第二条建议的后果。如果我们应该限制使用状态，我们应该减少有状态组件的数量。因此，将状态组件的角色分配给用户界面中组件层次结构的根组件是一个很好的规则。你还记得我们在上一章中讨论的将组件分为展示组件和容器组件的分类吗？通常，容器组件是有状态组件的良好候选者。
+
+在我们的示例应用程序中，我们将有状态组件的角色分配给了`ProductList`组件。即使它是一个容器组件，它也不是应用程序组件层次结构中最高的。也许这个角色更适合`Catalog`组件。在这种情况下，我们应该将获取数据的逻辑移到`Catalog`组件内部，如下面的代码所示：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+import ProductList from './ProductList';
+
+class Catalog extends React.Component {
+  constructor() {
+    super();
+    this.state = { products: [] };
+
+    fetch("products.json")
+      .then(response => response.json())
+      .then(json => {this.setState({products: json})})
+      .catch(error => console.log(error));
+  }
+
+  render() {
+    return <div><h2>Wine Catalog</h2><ProductList 
+ items={this.state.products}/></div>;
+  }
+}
+
+export default Catalog;
+```
+
+你可以在`Code/Chapter-2`下的`my-shop-05`文件夹中找到一个准备好的项目。
+
+# 活动：向购物车组件添加状态管理。
+
+**场景**
+
+为了使`Cart`组件准备好投入生产，我们添加了状态管理和动态数据加载。
+
+**目标**
+
+该活动的目的是熟悉组件状态管理。
+
+**完成步骤**
+
+将之前创建的`Cart`组件更改为添加状态管理，以便通过 HTTP 请求加载数据，并且购物车的内容会自动更新。
+
+**解决方案**
+
+一个可能的解决方案包含在`Code/Chapter-2/`下的`my-cart-04`文件夹中。
+
+# 总结
+
+在本章中，我们开始创建 React 组件并探索它们的基本功能。特别是，我们：
+
++   学习了如何将组件定义为从`React.Component`派生的类，以及如何导入特定的 CSS 样式。
+
++   探索了 JSX 语法，它允许我们快速定义组件的图形方面，并使用在其他地方定义的 React 组件。
+
++   组合 React 组件以构建其他组件。
+
++   使用状态管理功能，以便 React 组件在数据变化时自动更新其视觉表示。
+
+在下一章中，我们将分析如何管理用户与基于 React 的应用程序的交互；换句话说，如何捕获事件并使 UI 对这些事件做出反应。
diff --git a/docs/bg-react/bg-react_2.yaml b/docs/bg-react/bg-react_2.yaml
deleted file mode 100644
index d6edc5c..0000000
--- a/docs/bg-react/bg-react_2.yaml
+++ /dev/null
@@ -1,1338 +0,0 @@
-- en: Creating Components
-  id: totrans-0
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 创建组件
-- en: In this chapter, we are going to learn how to implement React components, how
-    to assemble multiple components into one, and how to manage their internal states.
-    We will explore React component implementation by building a simple application.
-    This application will be implemented step-by-step, in order to put the outlined
-    concepts into practice.
-  id: totrans-1
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章中，我们将学习如何实现 React 组件，如何将多个组件组合成一个，以及如何管理它们的内部状态。我们将通过构建一个简单的应用程序来探索 React
-    组件的实现。这个应用程序将逐步实现，以便将概述的概念付诸实践。
-- en: 'By the end of this chapter, you will be able to:'
-  id: totrans-2
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章结束时，您将能够：
-- en: Create basic React components
-  id: totrans-3
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 创建基本的 React 组件
-- en: Use JSX to define a component's markup
-  id: totrans-4
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 使用 JSX 来定义组件的标记
-- en: Combine multiple React components in order to create complex UI elements
-  id: totrans-5
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 组合多个 React 组件以创建复杂的 UI 元素
-- en: Manage the internal state of React components
-  id: totrans-6
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 管理 React 组件的内部状态
-- en: Definition of a Component
-  id: totrans-7
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 组件定义
-- en: As defined in the previous chapter, components are the fundamental building
-    blocks of React. Virtually any visual item in a user interface can be a component. From
-    a formal point of view, we would say that a React component is a piece of JavaScript
-    code defining a portion of a user interface.
-  id: totrans-8
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如前一章所定义，组件是 React 的基本构建块。用户界面中的几乎任何视觉项都可以是一个组件。从正式的角度来看，我们会说一个 React 组件是一段定义用户界面一部分的
-    JavaScript 代码。
-- en: 'Consider the following code in a file:'
-  id: totrans-9
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 考虑以下代码文件：
-- en: '[PRE0]'
-  id: totrans-10
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE0]'
-- en: This is an ECMAScript 2015 module, defining a basic React component.
-  id: totrans-11
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这是一个 ECMAScript 2015 模块，定义了一个基本的 React 组件。
-- en: It imports the `React` namespace from the `react` module and defines the `Catalog` class
-    by extending the `React.Component` class. The module exports the `Catalog` class
-    as a default export.
-  id: totrans-12
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 它从 `react` 模块导入 `React` 命名空间，并通过扩展 `React.Component` 类来定义 `Catalog` 类。该模块将 `Catalog`
-    类作为默认导出。
-- en: The interesting part of this definition is the implementation of the `render()`
-    method.
-  id: totrans-13
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这个定义的有趣之处在于 `render()` 方法的实现。
-- en: 'The `render()` method defines the visual part of the component. It may execute
-    any JavaScript code, and it should return a markup expression defining its visual
-    output. The presence of the `render()` method is mandatory for React components. In
-    our example, the `render()` method returns the following markup:'
-  id: totrans-14
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`render()` 方法定义了组件的视觉部分。它可以执行任何 JavaScript 代码，并应返回一个定义其视觉输出的标记表达式。`render()`
-    方法对于 React 组件是强制性的。在我们的示例中，`render()` 方法返回以下标记：'
-- en: '[PRE1]'
-  id: totrans-15
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE1]'
-- en: It looks like HTML; although it uses similar syntax, it defines plain objects
-    called **elements**. React elements are similar to **Document Object Model** (**DOM**)
-    elements, but are lighter and more efficient. So, React components generate a
-    set of React elements that will be mapped to DOM elements by the library's engine.
-    This set of React elements is called the **Virtual DOM**, a lightweight representation
-    of the browser's DOM. React takes care of updating the DOM to match the Virtual
-    DOM, only when it is strictly necessary. This approach allows React to have very
-    high performance when rendering user interfaces.
-  id: totrans-16
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 它看起来像 HTML；尽管它使用类似的语法，但它定义了称为 **元素** 的普通对象。React 元素类似于 **文档对象模型** (**DOM**)
-    元素，但更轻便且更高效。因此，React 组件生成一组将由库引擎映射到 DOM 元素的 React 元素。这组 React 元素称为 **虚拟 DOM**，是浏览器
-    DOM 的轻量级表示。React 负责更新 DOM 以匹配虚拟 DOM，仅在严格必要时进行。这种方法使得 React 在渲染用户界面时具有非常高的性能。
-- en: 'The `render()` method must comply with a few constraints:'
-  id: totrans-17
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`render()` 方法必须遵守一些约束：'
-- en: It is mandatory; that is, every React component must implement it
-  id: totrans-18
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 它是强制性的；也就是说，每个 React 组件都必须实现它
-- en: It must return one React element; that is, a single markup item with any nested
-    elements
-  id: totrans-19
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 它必须返回一个 React 元素；也就是说，一个带有任何嵌套元素的单个标记项
-- en: It should be a pure function; that is, it should not change the internal state of
-    the component (we will discuss this topic in further detail in the next section)
-  id: totrans-20
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 它应该是纯函数；也就是说，它不应该改变组件的内部状态（我们将在下一节详细讨论这个话题）
-- en: It should not directly interact with the browser; that is, it shouldn't contain statements
-    that try to access the DOM
-  id: totrans-21
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 它不应该直接与浏览器交互；也就是说，它不应该包含试图访问 DOM 的语句
-- en: A pure function is a function whose output result depends only on its input data,
-    and its execution has no side effect, like, for example, updating a global variable.
-    Given an input value, a pure function always returns the same result.
-  id: totrans-22
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 纯函数是指其输出结果仅依赖于输入数据，且执行过程中没有副作用，例如，不会更新全局变量。给定一个输入值，纯函数总是返回相同的结果。
-- en: A pure component is a component that acts like a pure function. This means that,
-    given the same initial conditions, it always renders the same output. It is very
-    important to keep the `render()` method a pure function. This avoids weird bugs,
-    as we will see in the next chapter.
-  id: totrans-23
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 纯组件是一种像纯函数一样工作的组件。这意味着，给定相同的初始条件，它总是渲染相同的输出。保持`render()`方法为纯函数非常重要。这样可以避免我们在下一章中看到的奇怪的错误。
-- en: 'Once we have defined our component, we can use it as a React element inside
-    any other React component. For example, we know that the React application itself
-    is already a React component. Let''s recall the code generated by the `create-react-app` tool
-    in the `App.js` file:'
-  id: totrans-24
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一旦我们定义了组件，我们就可以在任何其他React组件中将其作为React元素使用。例如，我们知道React应用程序本身已经是一个React组件。让我们回顾一下`create-react-app`工具在`App.js`文件中生成的代码：
-- en: '[PRE2]'
-  id: totrans-25
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE2]'
-- en: 'We can see that this code has the same structure as the `Catalog` component
-    that we defined. Let''s change this code in order to use our component inside
-    of the `App` component:'
-  id: totrans-26
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以看到这段代码与我们所定义的`Catalog`组件具有相同的结构。让我们更改这段代码，以便在`App`组件内部使用我们的组件：
-- en: '[PRE3]'
-  id: totrans-27
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE3]'
-- en: We simplified the code by removing some of the automatically generated markup. We
-    then imported the `Catalog` component, and put the `<Catalog />` element inside the
-    `<div>` element returned by the app's `render()` method.
-  id: totrans-28
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们通过删除一些自动生成的标记简化了代码。然后导入`Catalog`组件，并将`<Catalog />`元素放入应用程序`render()`方法返回的`<div>`元素中。
-- en: Building Our First React Component
-  id: totrans-29
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 构建我们的第一个React组件
-- en: 'The following steps open the existing project, `my-shop-01`, in order to show
-    the result of the previous code changes:'
-  id: totrans-30
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 打开现有项目`my-shop-01`，以展示之前代码更改的结果：
-- en: Open a console window
-  id: totrans-31
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口
-- en: Move to the `my-shop-1` folder
-  id: totrans-32
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-1`文件夹
-- en: Run `npm install`
-  id: totrans-33
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm install`
-- en: Run `npm start`
-  id: totrans-34
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`
-- en: 'The following is an example of what we will see in a browser window:'
-  id: totrans-35
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下是我们在浏览器窗口中将看到的一个示例：
-- en: '![](Images/888b626e-0f78-4346-9515-29ba28498237.png)'
-  id: totrans-36
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/888b626e-0f78-4346-9515-29ba28498237.png)'
-- en: We have built our first React component, and we can see it in action!
-  id: totrans-37
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们已经构建了我们的第一个React组件，并且可以看到它在运行！
-- en: Managing Styles
-  id: totrans-38
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 管理样式
-- en: 'Perhaps you have noticed that we have an `import` statement concerning a CSS
-    file in the `App` component module:'
-  id: totrans-39
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 也许您已经注意到，在`App`组件模块中有一个关于CSS文件的`import`语句：
-- en: '[PRE4]'
-  id: totrans-40
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE4]'
-- en: This may seem a bit strange, since `import` statements should only work for
-    JavaScript code. However, thanks to the development environment provided by `create-react-app`, we
-    can use the same syntax, even for CSS files. This allows us to use the classes and
-    other CSS definitions defined in `App.css` in our component, keeping component-specific styles
-    close to the component definition itself. For example, if we want our `Catalog`
-    component to have the title in red, we can proceed as shown next.
-  id: totrans-41
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这可能看起来有点奇怪，因为`import`语句应该只适用于JavaScript代码。然而，由于`create-react-app`提供的开发环境，我们甚至可以使用相同的语法，即使对于CSS文件也是如此。这允许我们在组件中使用`App.css`中定义的类和其他CSS定义，将组件特定的样式保持在组件定义本身附近。例如，如果我们想让`Catalog`组件的标题为红色，我们可以按照以下步骤进行。
-- en: Adding CSS
-  id: totrans-42
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 添加CSS
-- en: 'We will now change the content of the existing project, `my-shop-01`, in order
-    to add some CSS code and show the catalog title in red:'
-  id: totrans-43
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们现在将更改现有项目`my-shop-01`的内容，以便添加一些CSS代码并将目录标题显示为红色：
-- en: Open a console window.
-  id: totrans-44
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口。
-- en: Move to the `my-shop-1/src` folder.
-  id: totrans-45
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-1/src`文件夹。
-- en: 'Create a file, `Catalog.css`, and add the following code:'
-  id: totrans-46
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 创建一个文件，`Catalog.css`，并添加以下代码：
-- en: '[PRE5]'
-  id: totrans-47
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE5]'
-- en: 'Open the `Catalog.js` file and add the statement to import the `Catalog.css` module,
-    as shown here:'
-  id: totrans-48
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开`Catalog.js`文件并添加以下语句以导入`Catalog.css`模块：
-- en: '[PRE6]'
-  id: totrans-49
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE6]'
-- en: Run `npm start` and look at the result.
-  id: totrans-50
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`并查看结果。
-- en: You can find a project ready in the `my-shop-02` folder at `Code/Chapter-2`.
-  id: totrans-51
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 您可以在`Code/Chapter-2`中的`my-shop-02`文件夹中找到一个准备好的项目。
-- en: 'The browser will show the Catalog title in red:'
-  id: totrans-52
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 浏览器将显示红色Catalog标题：
-- en: '![](Images/2e2fe10c-32de-4a03-8f13-3a1ebfa19cc5.png)The CSS import is not a
-    React feature, and it is not required by React. It is a convenience provided by
-    the development environment, built by `create-react-app`. In particular, this
-    feature is provided by **webpack**, one of the most frequently used bundlers and
-    module loaders.'
-  id: totrans-53
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '![](Images/2e2fe10c-32de-4a03-8f13-3a1ebfa19cc5.png)CSS导入不是React的特性，也不是React所必需的。它是开发环境提供的一种便利，由`create-react-app`构建。特别是，这个特性是由**webpack**提供的，**webpack**是最常用的打包器和模块加载器之一。'
-- en: You should take this aspect into account when you want to migrate the application
-    into a development environment not based on webpack.
-  id: totrans-54
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当你想将应用程序迁移到一个不基于webpack的开发环境时，应该考虑这一点。
-- en: 'Activity: Defining a Shopping Cart'
-  id: totrans-55
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：定义购物车
-- en: '**Scenario**'
-  id: totrans-56
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We need a shopping cart for our e-shop.
-  id: totrans-57
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们的电子商店需要一个购物车。
-- en: '**Aim**'
-  id: totrans-58
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to start using React to define a component.
-  id: totrans-59
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 此活动的目的是开始使用React定义一个组件。
-- en: '**Steps for Completion**'
-  id: totrans-60
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: We should define a React component that acts as the basis of a shopping cart
-  id: totrans-61
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 我们应该定义一个作为购物车基础的React组件
-- en: It should be a component that simply shows the string `Cart`
-  id: totrans-62
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 它应该是一个仅显示字符串`Cart`的组件。
-- en: Create a new React application by using `create-react-app`, and change the application,
-    as shown in the current section.
-  id: totrans-63
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 使用`create-react-app`创建一个新的React应用程序，并按照当前章节所示进行更改。
-- en: '**Solution**'
-  id: totrans-64
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-01` folder at `Code/Chapter-2/`.
-  id: totrans-65
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一个可能的解决方案包含在`Code/Chapter-2/`下的`my-cart-01`文件夹中。
-- en: Using JSX
-  id: totrans-66
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 使用JSX
-- en: 'In previous examples, we defined the visual output returned by the `render()` method
-    of a component by using an HTML-like markup expression. Let''s see, for example,
-    the definition of the `Catalog` component:'
-  id: totrans-67
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在前面的示例中，我们使用类似HTML的标记表达式定义了组件的`render()`方法返回的视觉输出。例如，让我们看看`Catalog`组件的定义：
-- en: '[PRE7]'
-  id: totrans-68
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE7]'
-- en: The markup expression is not using JavaScript syntax, but it is included inside
-    of a JavaScript code snippet. Why do we mix HTML and JavaScript syntaxes? How
-    is that possible?
-  id: totrans-69
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 标记表达式并未使用JavaScript语法，但它被包含在一个JavaScript代码片段内。我们为什么要混合HTML和JavaScript语法？这是如何实现的？
-- en: Let's start by saying that the HTML-like language describing the React component's visual
-    output is called **JSX**. This language extends JavaScript with XML expressions in
-    order to simplify the creation of HTML elements within JavaScript code. You may think
-    of it as a sort of `document.write("...")`, but much more powerful. In fact, when
-    building a React application, the JSX markup is pre-processed by a specific parser,
-    in order to produce pure JavaScript code. So, we can exploit the simplicity of
-    using a declarative markup language that will automatically be converted into optimized
-    JavaScript code.
-  id: totrans-70
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 首先，我们要说的是，描述React组件视觉输出的类似HTML的语言被称为**JSX**。这种语言通过在JavaScript代码中添加XML表达式来简化HTML元素的创建。你可以将其视为一种`document.write("...")`，但功能更强大。实际上，在构建React应用程序时，JSX标记由特定的解析器预处理，以生成纯JavaScript代码。因此，我们可以利用使用声明性标记语言的简单性，该语言将自动转换为优化的JavaScript代码。
-- en: 'As previously mentioned, a JSX expression creates a React element, which is
-    the counterpart of an HTML element. From a syntactical point of view, a JSX expression
-    is a single markup item with any nested elements. So, the following is a valid
-    JSX expression:'
-  id: totrans-71
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如前所述，JSX表达式创建了一个React元素，它是HTML元素的对应物。从语法角度来看，JSX表达式是一个带有任何嵌套元素的单个标记项。因此，以下是一个有效的JSX表达式：
-- en: '[PRE8]'
-  id: totrans-72
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE8]'
-- en: 'The following is not a valid JSX expression, since it contains two markup items:'
-  id: totrans-73
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下不是一个有效的JSX表达式，因为它包含两个标记项：
-- en: '[PRE9]'
-  id: totrans-74
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE9]'
-- en: JSX expressions are XML fragments, so they are compliant with XML syntax rules.
-    This means that, among other things, the markup is case-sensitive, and all of
-    the tags must be closed.
-  id: totrans-75
-  prefs: []
-  type: TYPE_NORMAL
-  zh: JSX表达式是XML片段，因此它们遵循XML语法规则。这意味着，除其他事项外，标记是区分大小写的，并且所有标签都必须关闭。
-- en: 'For example, the following JSX expression is not valid:'
-  id: totrans-76
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 例如，以下JSX表达式是无效的：
-- en: '`<img src="image.png">`'
-  id: totrans-77
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`<img src="image.png">`'
-- en: 'Its valid version is the following:'
-  id: totrans-78
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 其有效版本如下：
-- en: '`<img src="image.png"/>`'
-  id: totrans-79
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`<img src="image.png"/>`'
-- en: 'We can assign a JSX expression to a variable, as in the following example:'
-  id: totrans-80
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以将JSX表达式赋值给一个变量，如下例所示：
-- en: '[PRE10]'
-  id: totrans-81
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE10]'
-- en: 'We can also embed any JavaScript expression inside of a JSX expression by wrapping it
-    in curly braces, as shown in the following example:'
-  id: totrans-82
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们还可以在JSX表达式中嵌入任何JavaScript表达式，方法是将其用大括号包裹，如下例所示：
-- en: '[PRE11]'
-  id: totrans-83
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE11]'
-- en: 'Of course, the JavaScript expression can be as complex as we need it to be,
-    like in the following component definition:'
-  id: totrans-84
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当然，JavaScript表达式可以像我们需要的那样复杂，如下面的组件定义所示：
-- en: '[PRE12]'
-  id: totrans-85
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE12]'
-- en: In addition to optimizing output rendering, JSX also provides support to prevent
-    injection attacks. In fact, any value embedded in a JSX expression escapes before
-    being rendered. This, for example, prevents malicious code from being inserted
-    by a user's input.
-  id: totrans-86
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 除了优化输出渲染，JSX还提供支持以防止注入攻击。实际上，任何嵌入JSX表达式的值在被渲染之前都会被转义。例如，这可以防止用户输入的恶意代码被插入。
-- en: 'A common use of a combination of JavaScript and JSX expressions is called **conditional
-    rendering**; that is, a technique that allows you to generate a JSX expression
-    based on some Boolean conditions. Consider the following example:'
-  id: totrans-87
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 结合JavaScript和JSX表达式的常见用法称为**条件渲染**；也就是说，一种根据某些布尔条件生成JSX表达式的技术。考虑以下示例：
-- en: '[PRE13]'
-  id: totrans-88
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE13]'
-- en: In the preceding example, the `render()` method returns one message or another, according
-    to the current day of the week. This causes the generation of a React element
-    with a different message and CSS class, but we could even return a completely
-    different markup.
-  id: totrans-89
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在前面的示例中，`render()`方法根据当前星期几返回一条不同的消息，这导致生成具有不同消息和CSS类的React元素，但我们甚至可以返回完全不同的标记。
-- en: 'You can put a JSX expression in multiple lines, as in the following:'
-  id: totrans-90
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 您可以将JSX表达式放在多行中，如下所示：
-- en: '[PRE14]'
-  id: totrans-91
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE14]'
-- en: 'It is very important when returning a JSX expression to start it in the same
-    line of the `return` statement, as in the previous example. If you want to start
-    the JSX expression on a new line, you need to enclose it in round brackets and
-    put the left bracket on the same line as the `return` statement, as in the following
-    example:'
-  id: totrans-92
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当返回JSX表达式时，在`return`语句的同一行开始它非常重要，如前一个示例所示。如果您想在新行开始JSX表达式，则需要将其括在圆括号中，并将左括号放在与`return`语句相同的行上，如下所示：
-- en: '`return (`'
-  id: totrans-93
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`return (`'
-- en: '`  <div>`'
-  id: totrans-94
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`  <div>`'
-- en: '`    <h2>Catalog</h2>`'
-  id: totrans-95
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`    <h2>Catalog</h2>`'
-- en: '`  </div>);`'
-  id: totrans-96
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`  </div>);`'
-- en: 'You can put comments inside of a JSX expression by using the JavaScript syntax wrapped
-    in curly brackets. The following is an example of a JSX expression with comments:'
-  id: totrans-97
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 您可以使用JavaScript语法将注释放在JSX表达式中，用大括号括起来。以下是带有注释的JSX表达式的示例：
-- en: '[PRE15]'
-  id: totrans-98
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE15]'
-- en: 'JSX tags match HTML tags, which is why we can use the whole HTML syntax to define
-    JSX elements. However, there are a few restrictions:'
-  id: totrans-99
-  prefs: []
-  type: TYPE_NORMAL
-  zh: JSX标签匹配HTML标签，这就是为什么我们可以使用整个HTML语法来定义JSX元素。但是，有一些限制：
-- en: All HTML tags are in lowercase
-  id: totrans-100
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 所有HTML标签均为小写
-- en: You need to use `className` instead of the `class` attribute
-  id: totrans-101
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 您需要使用`className`而不是`class`属性
-- en: You need to use `htmlFor` instead of the `for` attribute
-  id: totrans-102
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 您需要使用`htmlFor`而不是`for`属性
-- en: 'The following example shows the use of the `className` attribute instead of
-    `class`:'
-  id: totrans-103
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下示例展示了使用`className`属性而不是`class`：
-- en: '[PRE16]'
-  id: totrans-104
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE16]'
-- en: JSX uses the `className` and `htmlFor` attributes instead of `class` and `for`
-    because as JSX expressions are inside JavaScript, `class` and `for` could clash
-    with the corresponding reserved keywords.
-  id: totrans-105
-  prefs: []
-  type: TYPE_NORMAL
-  zh: JSX使用`className`和`htmlFor`属性而不是`class`和`for`，因为JSX表达式在JavaScript内部，`class`和`for`可能与相应的保留关键字冲突。
-- en: 'Activity: Translating HTML into JSX'
-  id: totrans-106
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：将HTML转换为JSX
-- en: '**Scenario**'
-  id: totrans-107
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: The Graphics department has provided you with an HTML snippet, and you need
-    to translate it into JSX in order to create a React component.
-  id: totrans-108
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 图形部门已向您提供了一个HTML片段，您需要将其翻译为JSX以创建React组件。
-- en: '**Aim**'
-  id: totrans-109
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to understand the difference between HTML and JSX.
-  id: totrans-110
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 此活动的目的是了解HTML和JSX之间的区别。
-- en: '**Steps for Completion**'
-  id: totrans-111
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Open the `Code02.txt` file
-  id: totrans-112
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开`Code02.txt`文件
-- en: Transform the HTML code it contains into JSX
-  id: totrans-113
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 将包含的HTML代码转换为JSX
-- en: '**Solution**'
-  id: totrans-114
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `activity-b.html` file at `Code/Chapter-2/`.
-  id: totrans-115
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 可能的解决方案是包含在`Code/Chapter-2/`中的`activity-b.html`文件。
-- en: Composing Components
-  id: totrans-116
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 组合组件
-- en: When defining React components, we can use them as the children of another component
-    by using that component as a React element. We already saw this when we included
-    the `Catalog` component inside of the `App` component, but let's analyze this
-    composition further.
-  id: totrans-117
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在定义React组件时，我们可以将它们用作另一个组件的子组件，方法是将其作为React元素使用。当我们包含`Catalog`组件在`App`组件内部时，我们已经看到了这一点，但是让我们进一步分析这种组合。
-- en: Combining Components
-  id: totrans-118
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 组合组件
-- en: 'We will now see how to combine components in order to create new, complex components:'
-  id: totrans-119
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 现在我们将看到如何组合组件以创建新的、复杂的组件：
-- en: Open the `src/ProductList.js` file in the `my-shop-03` folder
-  id: totrans-120
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 在`my-shop-03`文件夹中打开`src/ProductList.js`文件
-- en: Follow the text until the end of the section
-  id: totrans-121
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 按照文本直到本节结束
-- en: 'Let''s consider the following component:'
-  id: totrans-122
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们考虑以下组件：
-- en: '[PRE17]'
-  id: totrans-123
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE17]'
-- en: This component defines a list of wines, names, and descriptions.
-  id: totrans-124
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 该组件定义了酒名和描述的列表。
-- en: 'We want to integrate our `Catalog` component with the wine list. Since we have created
-    the `ProductList` component, we can use it as a tag in the JSX markup of the `Catalog`
-    component, as shown here:'
-  id: totrans-125
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们希望将我们的`Catalog`组件与酒单集成。由于我们已经创建了`ProductList`组件，因此我们可以将其用作`Catalog`组件的JSX标记中的标签，如下所示：
-- en: '[PRE18]'
-  id: totrans-126
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE18]'
-- en: As you can see, we simply imported the `ProductList` component in order to make
-    it available inside the `Catalog` component's module, and we used the `ProductList`
-    tag where we wanted the wine list to appear.
-  id: totrans-127
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如您所见，我们只需导入`ProductList`组件，以便在`Catalog`组件的模块中使其可用，并在我们希望酒单出现的地方使用`ProductList`标签。
-- en: 'Run `npm start` to launch the application. The resulting page will look like this:'
-  id: totrans-128
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 运行`npm start`以启动应用程序。生成的页面将如下所示：
-- en: '![](Images/772ab3c7-0d0d-49dc-b8cf-08cb9a057d5e.png)'
-  id: totrans-129
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/772ab3c7-0d0d-49dc-b8cf-08cb9a057d5e.png)'
-- en: We said that the HTML tags in JSX expressions should always be in lowercase.
-    However, we used the `ProductList` tag in Pascal case.
-  id: totrans-130
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们说过，JSX表达式中的HTML标签应该始终是小写的。然而，我们在Pascal case中使用了`ProductList`标签。
-- en: Tags corresponding to components must follow the case used in the class definition,
-    and by convention, component class names use Pascal case, even though it is not
-    required by React.
-  id: totrans-131
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 对应于组件的标签必须遵循类定义中使用的案例，并且按照惯例，组件类名使用Pascal case，尽管这不是React所要求的。
-- en: The ease of composing React components makes it very simple to create user interfaces,
-    following the guidelines provided in the previous chapter. We can decompose a
-    page layout into a hierarchical set of components, each one consisting of other
-    components. This approach allows us to focus on the behavior of a single component,
-    and promotes its reusability.
-  id: totrans-132
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React组件的组合简便性使得创建用户界面变得非常简单，遵循上一章提供的指导原则。我们可以将页面布局分解为一系列层次化的组件，每个组件又由其他组件组成。这种方法使我们能够专注于单个组件的行为，并促进其可重用性。
-- en: 'Activity: Defining a Composed Cart'
-  id: totrans-133
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：定义一个组合的购物车
-- en: '**Scenario**'
-  id: totrans-134
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We want to create some content for our shopping cart.
-  id: totrans-135
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们想要为我们的购物车创建一些内容。
-- en: '**Aim**'
-  id: totrans-136
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目的**'
-- en: The aim of this activity is to compose React components.
-  id: totrans-137
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这项活动的目的是组合React组件。
-- en: '**Step for Completion**'
-  id: totrans-138
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Integrate the previously created `Cart` component in order to contain a `CartList` component,
-    showing two items.
-  id: totrans-139
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 将之前创建的`Cart`组件整合，以便包含一个显示两个项目的`CartList`组件。
-- en: '**Solution**'
-  id: totrans-140
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-02` folder at `Code/Chapter-2/`.
-  id: totrans-141
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 可能的解决方案是包含在`Code/Chapter-2/`下的`my-cart-02`文件夹中的方案。
-- en: Data Propagation
-  id: totrans-142
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 数据传播
-- en: 'The `ProductList` component that we defined in the previous section is impractical. Let''s
-    take a look at it again:'
-  id: totrans-143
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`ProductList`组件，我们在上一节中定义的，是不切实际的。让我们再次看看它：'
-- en: '[PRE19]'
-  id: totrans-144
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE19]'
-- en: The list items are all defined as JSX markup, so if you need to change the graphical appearance
-    of the catalog's product, you need to change all of the occurrences of each `<li>`
-    element.
-  id: totrans-145
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 列表项都是作为JSX标记定义的，因此，如果您需要更改目录产品的图形外观，则需要更改每个`<li>`元素的所有出现位置。
-- en: 'We can make a better implementation by going further in the user interface decomposition.
-    We can consider each list item as a component, and the `Product` component as
-    the one defined by the following code:'
-  id: totrans-146
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以通过进一步分解用户界面来实现更好的实现。我们可以将每个列表项视为一个组件，并将`Product`组件视为以下代码定义的组件：
-- en: '[PRE20]'
-  id: totrans-147
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE20]'
-- en: 'This code acts as a template for each list item, so that we can build our product
-    list dynamically, as follows:'
-  id: totrans-148
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这段代码作为每个列表项的模板，以便我们可以动态构建我们的产品列表，如下所示：
-- en: '[PRE21]'
-  id: totrans-149
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE21]'
-- en: We can see the definition of an array of objects, `products`, containing the
-    relevant data for each product. The second array, `productComponents`, will contain
-    the list of React components created by merging product data with the `Product`
-    component's markup. The `for` loop is intended to perform such merging. Finally,
-    the resulting `productComponents` array, surrounded by the `<ul>` element, will
-    be returned.
-  id: totrans-150
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以看到一个对象数组的定义，`products`，包含每个产品的相关数据。第二个数组，`productComponents`，将包含由合并产品数据与`Product`组件的标记创建的React组件列表。`for`循环旨在执行此类合并。最后，将返回包围在`<ul>`元素中的结果`productComponents`数组。
-- en: Even if the code structure appears to be correct, the result will not be as
-    expected. In fact, we will obtain a list of items with the fixed names and descriptions
-    that we put in the `Product` component definition. In other words, the merge between
-    data and component definition didn't happen.
-  id: totrans-151
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 即使代码结构看起来是正确的，结果也不会如预期。实际上，我们将得到一个具有固定名称和描述的项列表，这些名称和描述是我们放在`Product`组件定义中的。换句话说，数据与组件定义的合并没有发生。
-- en: 'Actually, we need a way to pass the data of each product to the `Component`
-    class. Let''s think of React components as plain JavaScript functions. They may
-    be implemented as functions returning React elements, and, as with any function,
-    components may have data input. Such data input is passed through JSX attributes,
-    and is accessible inside of a component through a special object called `**props**`.
-    Let''s change the `ProductList` component''s code in order to pass data through
-    JSX attributes:'
-  id: totrans-152
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 实际上，我们需要一种方法将每个产品的数据传递给`Component`类。让我们将React组件视为普通的JavaScript函数。它们可以实现为返回React元素的函数，并且，与任何函数一样，组件可以有数据输入。这种数据输入通过JSX属性传递，并且可以在组件内部通过一个特殊的对象`**props**`访问。让我们更改`ProductList`组件的代码，以便通过JSX属性传递数据：
-- en: '[PRE22]'
-  id: totrans-153
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE22]'
-- en: We added an `item` attribute to the `<Product>` tag and assigned a single object
-    from the `products` array to it. This allows us to pass the data of each product
-    to the `Product` component.
-  id: totrans-154
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们在`<Product>`标签上添加了一个`item`属性，并将`products`数组中的单个对象分配给它。这允许我们将每个产品的数据传递给`Product`组件。
-- en: 'On the other hand, we modify the `Product` component''s code in order to receive
-    and manage the passed data:'
-  id: totrans-155
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 另一方面，我们修改了`Product`组件的代码，以便接收和管理传递的数据：
-- en: '[PRE23]'
-  id: totrans-156
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE23]'
-- en: You can find a project ready in the `my-shop-04` folder at `Code/Chapter-2/`.
-  id: totrans-157
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 你可以在`Code/Chapter-2/my-shop-04`文件夹中找到一个准备好的项目。
-- en: Every React component has a `props` property. The purpose of this property is to
-    collect data input passed to the component itself. Whenever a JSX attribute is attached
-    to a React element, a property with the same name is attached to the `props` object.
-    So, we can access the passed data by using the attached property. In our example,
-    we found the product data passed via the `item` attribute mapped to the `this.props.item`
-    property.
-  id: totrans-158
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 每个React组件都有一个`props`属性。这个属性的目的是收集传递给组件本身的数据输入。每当将JSX属性附加到React元素时，具有相同名称的属性就会附加到`props`对象上。因此，我们可以通过使用附加的属性来访问传递的数据。在我们的例子中，我们找到了通过`item`属性传递的产品数据映射到`this.props.item`属性。
-- en: '`props` are immutable; that is, they are read-only properties.'
-  id: totrans-159
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`props`是不可变的；也就是说，它们是只读属性。'
-- en: This new implementation allows the catalog to be shown as before, but makes graphical
-    markup independent from a product's data.
-  id: totrans-160
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这种新的实现方式允许目录像以前一样显示，但使图形标记独立于产品的数据。
-- en: In a component hierarchy, data propagation is very important. It allows us to think
-    about components as functions with inputs and outputs. In addition, the immutability
-    of `props` allows us to think of components as pure functions, which are functions
-    that have no side effects (since they don't change their input data). We can think
-    of data passing from one component to another as a **unidirectional data ****flow**,
-    from the parent component toward the child components. This gives us a more controllable
-    system.
-  id: totrans-161
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在组件层次结构中，数据传播非常重要。它允许我们将组件视为具有输入和输出的函数。此外，`props`的不变性允许我们将组件视为纯函数，这些函数是没有副作用的函数（因为它们不改变其输入数据）。我们可以将从一个组件到另一个组件的数据传递视为**单向数据流**，从父组件流向子组件。这为我们提供了一个更可控的系统。
-- en: 'The following diagram shows how we would imagine the data propagation in a component
-    hierarchy, ideally:'
-  id: totrans-162
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 下图显示了我们如何理想地想象组件层次结构中的数据传播：
-- en: '![](Images/4e8e2c52-6d4e-4ebc-969a-497971c28dfb.png)'
-  id: totrans-163
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/4e8e2c52-6d4e-4ebc-969a-497971c28dfb.png)'
-- en: A change in the state causes a data propagation toward the child components
-    through the `props` property.
-  id: totrans-164
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 状态的变化会导致数据通过`props`属性向子组件传播。
-- en: 'Activity: Creating a Cart Item Component'
-  id: totrans-165
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：创建购物车项组件
-- en: '**Scenario**'
-  id: totrans-166
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We want to make the `CartList` component a dynamic component, so that it can adapt
-    its content to received data.
-  id: totrans-167
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们希望将`CartList`组件变为一个动态组件，以便它能够根据接收到的数据调整其内容。
-- en: '**Aim**'
-  id: totrans-168
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to compose React components and pass data between them.
-  id: totrans-169
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这项活动的目的是组合React组件并在它们之间传递数据。
-- en: '**Steps for Completion**'
-  id: totrans-170
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Create a `CartItem` component showing the name of an item.
-  id: totrans-171
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 创建一个显示商品名称的`CartItem`组件。
-- en: Change the previously created `CartList` component so that it is dynamically composed
-    of `CartItem` instances, based on an `items` array.
-  id: totrans-172
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 更改之前创建的`CartList`组件，使其根据`items`数组动态地由`CartItem`实例组成。
-- en: '**Solution**'
-  id: totrans-173
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-03` folder at `Code/Chapter-2`.
-  id: totrans-174
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一个可能的解决方案是包含在`Code/Chapter-2/my-cart-03`文件夹中的那个。
-- en: Managing the Internal State
-  id: totrans-175
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 管理内部状态
-- en: Components have the ability to store data that can change over time.
-  id: totrans-176
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 组件具有存储随时间变化的数据的能力。
-- en: 'When a component shows data that can change over time, we want changes to be shown
-    as soon as possible. For example, consider the `ProductList` component: it shows
-    a list of products contained in the `products` array. If a new product is added to
-    the array, we want it to be shown immediately. React provides a mechanism to support
-    the automatic rendering of a component when data changes. Such a mechanism is
-    based on the concept of **state**.'
-  id: totrans-177
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当组件显示随时间变化，的数据时，我们希望尽快显示更改。例如，考虑`ProductList`组件：它显示`products`数组中的产品列表。如果向数组添加新产品，我们希望它立即显示。React提供了一种机制来支持数据变化时组件的自动渲染。这种机制基于**状态**的概念。
-- en: React `state` is a property that represents data that changes over time. Every component
-    supports the `state` property, but it should be used carefully.
-  id: totrans-178
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React `state`是一个代表随时间变化的数据的属性。每个组件都支持`state`属性，但应谨慎使用。
-- en: 'Again, consider the `ProductList` component:'
-  id: totrans-179
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 再次考虑`ProductList`组件：
-- en: '[PRE24]'
-  id: totrans-180
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE24]'
-- en: From a practical point of view, it is not so useful. It shows a hardcoded list
-    of products. If we want to add a new product, we need to make changes to the component
-    source code.
-  id: totrans-181
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 从实用的角度来看，这并不那么有用。它显示了一个硬编码的产品列表。如果我们想添加新产品，我们需要修改组件源代码。
-- en: 'In a real-world scenario, we want to keep the component''s code independent
-    from the product data. For example, we would get product data by making an HTTP request
-    to the web server. In this case, the `products` array would represent data that changes
-    over time: initially an empty array, it would then be filled with product data received
-    from the server, and it could be changed again by subsequent requests to the server.'
-  id: totrans-182
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在现实世界场景中，我们希望保持组件代码独立于产品数据。例如，我们会通过向Web服务器发出HTTP请求来获取产品数据。在这种情况下，`products`数组代表随时间变化，的数据：最初是一个空数组，然后会填充从服务器接收的产品数据，并且可以通过后续对服务器的请求再次更改。
-- en: Components that store data that can change over time are said to be **stateful components**. A
-    stateful component stores the state in the `this.state` property. To inform a component
-    that the state has changed, you must use the `setState()` method. This method
-    sets a new state for the component; it does not update it. Changes to the state trigger
-    the component's rendering; that is, the automatic execution of the `render()` method.
-  id: totrans-183
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 存储随时间变化，的数据的组件被称为**有状态组件**。有状态组件将状态存储在`this.state`属性中。要通知组件状态已更改，必须使用`setState()`方法。此方法为组件设置新状态；它不更新它。状态的变化触发组件的渲染；即`render()`方法的自动执行。
-- en: 'Let''s see how to manage the state by changing the `ProductList` component definition:'
-  id: totrans-184
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们看看如何通过更改`ProductList`组件定义来管理状态：
-- en: '[PRE25]'
-  id: totrans-185
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE25]'
-- en: We added the constructor to the component. The constructor runs the superclass constructor
-    and sets the initial state of the component to an object with the `products` property
-    as an empty array.
-  id: totrans-186
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们向组件添加了构造函数。构造函数运行超类构造函数，并将组件的初始状态设置为具有`products`属性的空数组的对象。
-- en: Then, send a GET HTTP request to the server via `fetch()`. Since the request
-    is asynchronous, the initial rendering of the component will be an empty list
-    of products.
-  id: totrans-187
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 然后，通过`fetch()`向服务器发送GET HTTP请求。由于请求是异步的，组件的初始渲染将是一个空的产品列表。
-- en: State initialization is the only case where you can assign a value to the `this.state`
-    property without using `setState()`.
-  id: totrans-188
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 状态初始化是唯一可以不使用`setState()`而直接给`this.state`属性赋值的情况。
-- en: When the HTTP response is received, it is used to change the component's state
-    with `setState()`. This state change causes the automatic execution of `render()`,
-    which will show the list of products received from the server.
-  id: totrans-189
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当接收到HTTP响应时，它用于通过`setState()`更改组件的状态。这种状态变化导致`render()`的自动执行，这将显示从服务器接收的产品列表。
-- en: 'Now that we know how to manage the component''s state, here are a couple of
-    things to remember when using the `setState()` method:'
-  id: totrans-190
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 既然我们已经知道如何管理组件的状态，那么在使用`setState()`方法时，有几点需要记住：
-- en: '`setState()` merges new data with old data already contained in the state, and
-    overwrites the previous state'
-  id: totrans-191
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`setState()`将新数据与状态中已有的旧数据合并，并覆盖先前的状态。'
-- en: '`setState()` triggers the execution of the `render()` method, so you should never
-    call `render()` explicitly'
-  id: totrans-192
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`setState()`触发`render()`方法的执行，因此您永远不应该显式调用`render()`。'
-- en: Component state management appears to be very simple. However, it is easy to
-    get in trouble when deciding what should be considered state and which component
-    should be stateful.
-  id: totrans-193
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 组件状态管理看似非常简单。然而，在决定什么应该被视为状态以及哪个组件应该是有状态的时，很容易陷入困境。
-- en: 'Here is some advice about state:'
-  id: totrans-194
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下是关于状态的一些建议：
-- en: State should contain the minimum data needed to represent data that can change
-    over time in your UI; any information that can be derived from this minimal data
-    should be computed inside the `render()` method
-  id: totrans-195
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 状态应包含UI中随时间变化，所需的最小数据；任何可以从这些最小数据中推导出的信息都应在`render()`方法内部计算。
-- en: State should be avoided as much as possible, since it adds complexity to a component
-  id: totrans-196
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 应尽可能避免使用状态，因为它会给组件增加复杂性。
-- en: Stateful components should be located high up in the component hierarchy of
-    a UI
-  id: totrans-197
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 有状态的组件应该位于UI组件层次结构的高层。
-- en: We can consider the last piece of advice a consequence of the second piece of advice.
-    If we should restrict the usage of state, we should reduce the number of stateful
-    components. So, it is a good rule to assign the role of stateful component to
-    components that are the root of a component hierarchy in a user interface. Do you
-    remember the classification of components into presentational and container components,
-    which we discussed in the previous chapter? In general, container components are
-    good candidates for stateful components.
-  id: totrans-198
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以将最后一条建议视为第二条建议的后果。如果我们应该限制使用状态，我们应该减少有状态组件的数量。因此，将状态组件的角色分配给用户界面中组件层次结构的根组件是一个很好的规则。你还记得我们在上一章中讨论的将组件分为展示组件和容器组件的分类吗？通常，容器组件是有状态组件的良好候选者。
-- en: 'In our example application, we assigned the role of a stateful component to
-    the `ProductList` component. Even if it is a container component, it is not the
-    highest in the component hierarchy of the application. Maybe this role would be
-    more appropriate for the `Catalog` component. In this case, we should move the
-    logic of getting data inside of the `Catalog` component, as shown in the following
-    code:'
-  id: totrans-199
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在我们的示例应用程序中，我们将有状态组件的角色分配给了`ProductList`组件。即使它是一个容器组件，它也不是应用程序组件层次结构中最高的。也许这个角色更适合`Catalog`组件。在这种情况下，我们应该将获取数据的逻辑移到`Catalog`组件内部，如下面的代码所示：
-- en: '[PRE26]'
-  id: totrans-200
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE26]'
-- en: You can find a project ready in the `my-shop-05` folder at `Code/Chapter-2`.
-  id: totrans-201
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 你可以在`Code/Chapter-2`下的`my-shop-05`文件夹中找到一个准备好的项目。
-- en: 'Activity: Adding State Management to the Cart Component'
-  id: totrans-202
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：向购物车组件添加状态管理。
-- en: '**Scenario**'
-  id: totrans-203
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: In order to make the `Cart` component production ready, we add state management and
-    dynamic data loading.
-  id: totrans-204
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 为了使`Cart`组件准备好投入生产，我们添加了状态管理和动态数据加载。
-- en: '**Aim**'
-  id: totrans-205
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to become familiar with component state management.
-  id: totrans-206
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 该活动的目的是熟悉组件状态管理。
-- en: '**Step for Completion**'
-  id: totrans-207
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Change the previously created `Cart` component to add state management, so that data
-    is loaded via HTTP requests, and the contents of the cart is automatically updated.
-  id: totrans-208
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 将之前创建的`Cart`组件更改为添加状态管理，以便通过HTTP请求加载数据，并且购物车的内容会自动更新。
-- en: '**Solution**'
-  id: totrans-209
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-04` folder at `Code/Chapter-2/`.
-  id: totrans-210
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一个可能的解决方案包含在`Code/Chapter-2/`下的`my-cart-04`文件夹中。
-- en: Summary
-  id: totrans-211
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 总结
-- en: 'In this chapter, we started to create React components and explored their basic features.
-    In particular, we:'
-  id: totrans-212
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章中，我们开始创建React组件并探索它们的基本功能。特别是，我们：
-- en: Learned how to define a component as a class derived from `React.Component`,
-    and how to import specific CSS styles
-  id: totrans-213
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 学习了如何将组件定义为从`React.Component`派生的类，以及如何导入特定的CSS样式。
-- en: Explored the syntax of JSX, which allows us to quickly define the graphical aspect
-    of a component and use React components that were defined elsewhere
-  id: totrans-214
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 探索了JSX语法，它允许我们快速定义组件的图形方面，并使用在其他地方定义的React组件。
-- en: Combined React components in order to build other components
-  id: totrans-215
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 组合React组件以构建其他组件。
-- en: Used state management features so that React components automatically update
-    their visual representation when data changes
-  id: totrans-216
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 使用状态管理功能，以便React组件在数据变化时自动更新其视觉表示。
-- en: In the next chapter, we will analyze how to manage user interaction with a React-based
-    application; in other words, how to capture events and make a UI react to those events.
-  id: totrans-217
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在下一章中，我们将分析如何管理用户与基于React的应用程序的交互；换句话说，如何捕获事件并使UI对这些事件做出反应。
diff --git a/docs/bg-react/bg-react_3.md b/docs/bg-react/bg-react_3.md
index 93eae2b..26dca87 100644
--- a/docs/bg-react/bg-react_3.md
+++ b/docs/bg-react/bg-react_3.md
@@ -1,2 +1,812 @@
-# 第四章
+# 第三章：管理用户交互性
 
+在本章中，我们将学习如何管理由用户与 React 基础用户界面的组件交互产生的事件。我们将探讨在 React 组件生命周期中触发的事件，并学习如何利用它们来创建高效的组件。最后，我们将使用 React Router 库来允许在由组件实现的不同的视图之间轻松导航。
+
+在本章结束时，你将能够：
+
++   处理由用户交互产生的事件
+
++   在事件触发时更改组件的状态
+
++   使用组件的生命周期事件以获得更好的用户体验
+
++   配置路由以允许通过组件进行导航
+
+# 管理用户交互
+
+任何 Web 应用程序都需要用户与**用户界面**（**UI**）之间的交互。没有交互的应用程序不是真正的应用程序；交互性是一个基本要求。
+
+我们在上一章构建的应用程序不允许交互。它只是显示数据，用户无法对其进行任何操作（除了查看）。
+
+假设我们想在上一章开始构建的目录应用程序中引入一点交互。例如，也许我们想在用户点击产品区域时显示一个带有产品价格的警告。
+
+假设产品数据包括价格，如下面的 JSON 对象所示：
+
+```jsx
+[
+  {"code":"P01", 
+   "name": "Traditional Merlot", 
+   "description": "A bottle of middle weight wine, lower in tannins
+      (smoother), with a more red-fruited flavor profile.", 
+   "price": 4.5, "selected": false},
+  {"code":"P02", 
+   "name": "Classic Chianti", 
+   "description": "A medium-bodied wine characterized by a marvelous
+      freshness with a lingering, fruity finish", 
+   "price": 5.3, "selected": false},
+  {"code":"P03", 
+   "name": "Chardonnay", 
+   "description": "A dry full-bodied white wine with spicy, 
+      bourbon-y notes in an elegant bottle", 
+   "price": 4.0, "selected": false},
+  {"code":"P04", 
+   "name": "Brunello di Montalcino", 
+   "description": "A bottle of red wine with exceptionally bold fruit 
+      flavors, high tannin, and high acidity", 
+   "price": 7.5, "selected": false}
+]
+```
+
+我们可以如下实现这种行为：
+
+```jsx
+import React from 'react';
+
+class Product extends React.Component {
+  showPrice() {
+ alert(this.props.item.price);
+ }
+
+  render() {
+    return <li onClick={() => this.showPrice()}>
+      <h3>{this.props.item.name}</h3>
+      <p>{this.props.item.description}</p>
+    </li>;
+  }
+}
+
+export default Product;
+```
+
+让我们分析组件的代码，并强调与前一个版本的不同之处。
+
+首先，我们添加了`showPrice()`方法，通过一个警告框显示当前产品实例的价格。这个方法在箭头函数内部被调用，该箭头函数被分配给`<li>`标签的`onClick`属性。
+
+这些简单的更改允许`Product`组件捕获`click`事件并执行`showPrice()`方法。
+
+现在我们将打开现有的项目`my-shop-01`，以展示之前的代码更改的结果：
+
+1.  打开一个控制台窗口
+
+1.  转到`my-shop-01`文件夹
+
+1.  运行`npm install`
+
+1.  运行`npm start`
+
+点击产品的结果显示在以下截图中：
+
+![](img/4f5a555a-4d0e-43e1-ad83-5f723cf29071.png)
+
+# HTML 事件与 React 事件
+
+正如我们所见，React 处理事件的方法与 HTML 中的经典事件管理非常相似。然而，有一些细微的差别需要注意。
+
+HTML 事件使用小写字母命名，而 JSX 事件使用驼峰命名法。例如，在 HTML 中，你应该使用以下语法：
+
+```jsx
+<li onclick="...">...</li>
+```
+
+但在 JSX 中，你使用这种语法：
+
+```jsx
+<li onClick=...>...</li>
+```
+
+在 HTML 中，你分配一个代表函数调用的字符串，而在 JSX 中，你分配一个函数，如下所示：
+
+```jsx
+<li onclick="showPrice()">...</li>
+<li onClick={showPrice}>...</li>
+```
+
+当然，你可以分配任何返回或代表函数的 JavaScript 表达式，如下例所示：
+
+```jsx
+<li onClick={() => this.showPrice()}>
+```
+
+最后，您可以通过返回`false`来阻止大多数 HTML 事件的默认行为，而在 JSX 事件中，您需要显式调用`preventDefault`。以下是一个典型示例：
+
+```jsx
+<a href="#" onClick={(e) => { e.preventDefault();
+console.log("Clicked");}}>Click</a>
+```
+
+# Event Handlers 和 this 关键字
+
+在前面的定义`Product`组件的示例中，我们将箭头函数分配给了`onClick`属性，而不是简单的`showPrice()`方法。这不仅仅是一个偏好问题。这是必要的，因为我们使用了`showPrice()`方法内部的`this`关键字。
+
+实际上，当事件处理程序执行时，`this`关键字不再绑定到`Product`类，因为它是在不同的上下文中异步执行的。这种行为不依赖于 React，而是依赖于 JavaScript 的工作方式。
+
+为了将方法绑定到当前类，我们有几个选项：
+
+1.  使用箭头函数并在其体内调用方法，如下例所示：
+
+```jsx
+<li onClick={() => this.showPrice()}>
+```
+
+1.  使用`bind()`方法将方法绑定到当前类上下文，如下例所示：
+
+```jsx
+<li onClick={this.showPrice.bind(this)}>
+```
+
+1.  您可以在类构造函数中使用`bind()`，而不是在将方法分配给事件属性时内联使用。以下是这种方法的示例：
+
+```jsx
+constructor() {
+this.showPrice = this.showPrice.bind(this);
+}
+...
+<li onClick={this.showPrice}>
+```
+
+# 更改状态
+
+我们看过的这个事件管理示例非常简单，但它只展示了 React 事件管理的基础。这个示例不涉及状态，其管理是直接的。在许多现实世界的情况下，一个事件导致应用程序状态的变化，这意味着组件状态的变化。
+
+假设，例如，您想允许从目录中选择产品。为此，我们为每个产品对象添加`selected`属性，如下面的数组所示：
+
+```jsx
+[
+  {"code":"P01", 
+   "name": "Traditional Merlot", 
+   "description": "A bottle of middle weight wine, lower in tannins
+      (smoother), with a more red-fruited flavor profile.", 
+   "price": 4.5, "selected": false},
+  {"code":"P02", 
+   "name": "Classic Chianti", 
+   "description": "A medium-bodied wine characterized by a marvelous
+      freshness with a lingering, fruity finish", 
+   "price": 5.3, "selected": false},
+  {"code":"P03", 
+   "name": "Chardonnay", 
+   "description": "A dry full-bodied white wine with spicy, bourbon-y
+      notes in an elegant bottle", 
+   "price": 4.0, "selected": false},
+  {"code":"P04", 
+   "name": "Brunello di Montalcino", 
+   "description": "A bottle of red wine with exceptionally bold fruit
+      flavors, high tannin, and high acidity", 
+   "price": 7.5, "selected": false}
+]  
+```
+
+当用户点击产品区域时，`selected`属性的值会切换，并且区域背景颜色会改变。以下代码片段展示了`Product`组件的新版本：
+
+```jsx
+import React from 'react';
+import './Product.css'
+
+class Product extends React.Component {
+  select() {
+ this.props.item.selected = !this.props.item.selected;
+ }
+
+  render() {
+    let classToApply = this.props.item.selected? "selected": "";
+
+    return <li onClick={() => this.select()} className={classToApply}>
+             <h3>{this.props.item.name}</h3>
+             <p>{this.props.item.description}</p>
+           </li>;
+  }
+}
+
+export default Product;
+```
+
+`select()`方法切换`selected`属性的值，而在渲染方法中，我们根据`selected`属性的值计算要应用的类的名称。然后，生成的类名被分配给`className`属性。
+
+意外地，这段代码没有正确工作。您可以通过执行以下步骤来验证。我们可以打开现有项目`my-shop-02`，以便查看之前代码的结果。请按照以下步骤操作：
+
+1.  打开一个控制台窗口
+
+1.  转到`my-shop-02`文件夹
+
+1.  运行`npm install`
+
+1.  运行`npm start`
+
+代码没有按预期工作，因为`select()`方法没有改变组件的状态，所以`render()`方法没有被触发。此外，请记住`props`属性是只读的，因此对其的任何更改都不会产生影响。
+
+`Product`组件是一个无状态组件，因此我们没有状态需要改变。产品的数据来自通过`props`传递的`Catalog`根组件。那么，我们如何从`Product`组件实例触发的事件开始改变`Catalog`组件的状态呢？
+
+具体来说，子组件如何改变其父组件的状态？
+
+实际上，子组件没有机会改变父组件的状态，因为在 React 组件层次结构中，数据以单向方式流动，从父组件流向子组件。我们在下面的图表中说明了这种流动：
+
+![](img/e619f805-e32d-446c-9b2b-f9bd1d036e19.png)
+
+我们不能将数据从子组件推送到父组件。为了让子组件改变父组件的状态，我们需要获取一个方法来操作该状态。由于组件状态只能由组件本身访问，因此父组件必须通过`props`属性向其子组件提供该方法。
+
+考虑以下代码：
+
+```jsx
+import React from 'react';
+import './Catalog.css';
+import ProductList from './ProductList';
+
+class Catalog extends React.Component {
+  constructor() {
+    super();
+    this.state = { products: [] };
+
+    fetch("products.json")
+      .then(response => response.json())
+      .then(json => {this.setState({products: json})})
+      .catch(error => console.log(error));
+  }
+
+  select(productCode) {
+ let productList = this.state.products.map(function(p) {
+ if (p.code === productCode) {
+ p.selected = (!p.selected);
+ }
+ return p;
+ });
+ this.setState({products: productList});
+ }
+
+  render() {
+    return <div><h2>Wine Catalog</h2><ProductList 
+      items={this.state.products} selectHandler={this.select}/></div>;
+  }
+}
+
+export default Catalog;
+```
+
+前面的代码将`select()`方法添加到`Catalog`组件中。该方法接受一个产品代码作为输入参数，从组件的状态中获取产品列表，并更新相应产品的`selected`属性。然后使用新的产品列表更新组件的状态。
+
+`select()`方法被分配给`ProductList`标签中的新`selectHandler`属性，因此相应的组件可以通过`props`属性访问它。
+
+以下代码展示了如何将`this.props.selectHandler`从`ProductList`组件传递到`Product`组件，通过`selectHandler`属性：
+
+```jsx
+import React from 'react';
+import './ProductList.css';
+import Product from './Product';
+
+class ProductList extends React.Component {
+  render() {
+    let products = [];
+
+    for (let product of this.props.items) {
+      products.push(<Product item={product} 
+ selectHandler={this.props.selectHandler}/>);
+    }
+
+    return <ul>{products}</ul>;
+  }
+}
+
+export default ProductList;
+```
+
+最后，`Product`组件通过调用通过`this.props.selectHandler`属性传递的`select()`方法来处理`onClick`事件，并使用适当的产品代码：
+
+```jsx
+import React from 'react';
+import './Product.css'
+
+class Product extends React.Component {
+  render() {
+    let classToApply = this.props.item.selected? "selected": ""; 
+ return <li onClick={() => this.props.selectHandler 
+    (this.props.item.code)} className={classToApply}>
+      <h3>{this.props.item.name}</h3>
+      <p>{this.props.item.description}</p>
+    </li>
+  }
+}
+
+export default Product;
+```
+
+现在我们将打开现有的项目`my-shop-03`，以便查看之前代码的结果。请按照以下步骤操作：
+
+1.  打开一个控制台窗口
+
+1.  转到`my-shop-03`文件夹
+
+1.  运行`npm install`
+
+1.  运行`npm start`
+
+我们可以得出结论，子组件上的事件触发了通过`props`传递的父组件方法的执行。该方法改变了父组件的状态，这种变化的效果再次通过`props`传播到子组件。以下图表说明了这种行为：
+
+![](img/c5f36cd8-28ca-4ccb-a05b-7fd69497a78e.png)
+
+# 活动：将商品添加到购物车
+
+**场景**
+
+我们希望允许用户从产品目录中选择商品并将其添加到购物车中。
+
+**目标**
+
+此活动的目的是熟悉 React 中的事件管理。
+
+**完成步骤**
+
+1.  考虑`my-cart-01`文件夹中的现有项目
+
+1.  处理`Product`组件的“添加到购物车”按钮的点击事件，以便将该商品添加到购物车中
+
+**解决方案**
+
+一个可能的解决方案包含在`Code/Chapter-3/`下的`my-cart-02`文件夹中。
+
+# 组件生命周期事件
+
+在 React 应用程序中，组件根据应用程序运行时的演变动态创建。用户的交互启动了组件的创建、屏幕上的可视化、更新和销毁。
+
+因此，组件在应用程序执行期间经历不同的阶段：这些阶段代表了它们的生命周期。
+
+React 允许我们以自定义的方式拦截和管理组件生命周期的各个阶段，这得益于我们可以通过实现特定方法来处理的一组事件。
+
+在分析组件的生命周期事件之前，我们应该强调，创建组件的第一步是执行其构造函数。虽然它不是 React 生命周期阶段的一部分，但它是组件生命的第一步。在组件构造函数执行期间，DOM 不可用，也无法访问任何子组件。构造函数执行是执行不涉及图形渲染或子组件操作的初始化的正确时机。
+
+组件创建后，React 将触发几个对应于组件生命周期相应阶段的事件。我们可以捕获这些事件并通过在我们的组件中实现一些方法来处理它们。考虑以下方法：
+
+```jsx
+componentWillMount
+```
+
+这种方法在组件即将被插入到 DOM 中时执行。它只被调用一次，就在初始渲染发生之前。通常，这个方法用于执行与 DOM 无关的组件初始化，例如初始化组件的属性或本地变量。
+
+你可以在`componentWillMount()`中使用`setState()`方法，但它不会触发组件的重新渲染，所以要谨慎使用。
+
+`componentWillReceiveProps`是在组件通过`props`从父组件接收到新值之前渲染时调用的方法。这个方法接收新值作为参数，我们可以通过`this.props`访问旧值。
+
+如果我们尝试在这个方法执行期间改变组件状态，我们将不会触发任何额外的渲染。此外，`componentWillReceiveProps()`在初始渲染时不会被调用。
+
+`shouldComponentUpdate`方法应该返回一个布尔值，表示组件是否应该被渲染（`true`）或不渲染（`false`）。如果该方法返回`false`，则不会调用下一个方法，包括`render()`。
+
+它有两个参数：`nextProps`，包含`props`的新值，以及`nextState`，包含组件状态的新值。
+
+`componentWillUpdate`在`render()`方法之前立即被调用，因此它是更新组件之前执行某些处理的最后机会。
+
+在`shouldComponentUpdate()`的实现中不能使用`setState()`。
+
+`componentDidUpdate`在渲染发生后立即调用，在其执行期间，我们可以访问 DOM 中组件的新版本。该方法有两个参数：之前的`props`和之前的状态。
+
+`componentDidMount`在组件被插入到 DOM 后调用，并且只调用一次。
+
+`componentWillUnmount`在组件从 DOM 中移除之前立即调用。
+
+在这个方法执行期间，你不能使用`setState()`。
+
+我们可以将组件生命周期事件分为三个主要区域：
+
++   **挂载**：这个`props`组包含与 DOM 操作相关的事件：`componentWillMount`、`componentDidMount`和`componentWillUnmount`
+
++   **通过 props 更新**：这个组包含当组件通过其父组件传递的`props`更新时触发的事件，包括：`componentWillReceiveProps`、`shouldComponentUpdate`、`componentWillUpdate`和`componentDidUpdate`。
+
++   **通过 setState()更新**：在这个组中，我们找到当组件通过`setState()`更新时触发的事件：`shouldComponentUpdate`、`componentWillUpdate`和`componentDidUpdate`。
+
+下面的图表说明了事件流，并使用不同的颜色突出了我们刚刚讨论的三个区域：
+
+![](img/77905891-cf29-46ca-a169-f0453358e90b.png)
+
+# 活动：显示添加到购物车的商品数量
+
+**场景**
+
+我们希望避免购物车中出现同一产品的多个实例。相反，我们希望购物车中只有单一产品及其数量的出现，如下面的截图所示：
+
+![](img/c60ffc2b-daab-4b7b-be17-7fd2b6b772b0.png)
+
+**目标**
+
+这个活动的目的是利用 React 组件的生命周期事件。
+
+**完成步骤**
+
+1.  利用在前一个活动中更改的项目（或在`my-cart-02`文件夹中的现有项目）。
+
+1.  更改`Cart`组件以显示一个无重复产品的列表及其相关出现次数。
+
+处理`componentWillReceiveProps`事件，为`Cart`组件的内部状态准备数据。
+
+**解决方案**
+
+一个可能的解决方案是在`Code/Chapter-3`中的`my-cart-03`文件夹中包含的解决方案。
+
+# 管理路由
+
+基于单页应用程序模型的现代 Web 应用程序，不能没有路由机制，这是一种在同一 HTML 页面上浏览视图的方式。
+
+我们可以将视图视为 UI 中的一个占位符，在其中我们可以动态地渲染一个组件或另一个组件，以独占的方式。让我们尝试用一个例子来澄清这个概念。
+
+假设我们想在我们的*葡萄酒目录*应用程序中添加一个导航栏。在最简单的实现中，我们想交替显示目录和一个关于部分，提供一些关于应用程序本身的信息。新的 UI 将如下面的截图所示：
+
+![](img/73e59b33-0f9c-4a43-9024-556c5bca4ea7.png)
+
+当点击菜单项时，我们希望主区域发生变化，而头部保持不变。在这种情况下，主区域将是我们显示`Catalog`组件或`About`组件的视图，具体取决于我们点击的菜单项。
+
+我们如何在 React 中实现路由机制？
+
+# 安装 React Router
+
+我们可以通过使用**React Router**，一个为我们提供特定 React 组件的包，来启用基于 React 的应用程序的路由，这些组件允许我们设置一个完整的路由系统。
+
+我们在应用程序的文件夹中输入以下命令来安装该包：
+
+```jsx
+npm install --save react-router-dom
+```
+
+React Router 提供了三个包：
+
++   `react-router`
+
++   `react-router-dom`
+
++   `react-router-native`
+
+第一个包提供了核心路由组件和功能。第二个包为浏览器环境提供了特定组件，第三个包支持`react-native`，这是一个将 React 组件映射到原生移动 UI 小部件的环境。`react-router-dom`和`react-router-native`都使用`react-router`功能。
+
+# 使用路由器
+
+一旦我们在环境中安装了 React Router 包，我们需要在应用程序中使用提供的组件。
+
+首先，我们需要为应用程序添加路由功能。我们可以通过更改`index.js`文件的代码来实现这一点，如下所示：
+
+```jsx
+import React from 'react';
+...
+import { BrowserRouter } from 'react-router-dom'
+
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+  , document.getElementById('root'));
+registerServiceWorker();
+```
+
+我们强调了与前一版本代码的主要区别。如您所见，我们从`react-router-dom`模块导入了`BrowserRouter`组件，并将其包裹在`App`组件内部。
+
+通过包装`App`组件，`BrowserRouter`组件为其赋予了路由功能。
+
+这是一个组件组合，因此我们称之为组件包装。
+
+# 定义视图
+
+现在，我们需要创建一个视图来显示`Catalog`组件或关于页面，如下所示：
+
+![](img/9aded227-73da-4ec8-9c1d-a9109033be9b.png)
+
+我们可以通过更改`App.js`代码来实现这一点，如下所示：
+
+```jsx
+import React, { Component } from 'react';
+import './App.css';
+import Catalog from './Catalog';
+import About from './About';
+import { Switch, Route } from 'react-router-dom'
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">The Catalog App</h1>
+          <nav>
+            <ul>
+              <li><Link to='/'>Catalog</Link></li>
+              <li><Link to='/about'>About</Link></li>
+            </ul>
+          </nav>
+        </header>
+        <Switch>
+ <Route exact path='/' component={Catalog}/>
+ <Route path='/about' component={About}/>
+ </Switch>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+我们从`react-router-dom`模块导入了`Switch`和`Route`组件，并在 JSX 表达式中使用了它们，该表达式曾经是`Catalog`元素所在的位置。
+
+`Switch`组件允许我们定义一个视图，即我们将在其中切换组件的区域。`Route`组件用作`Switch`的子元素，它们允许我们将 URL 映射到组件。在我们的示例中，我们将根 URL（`/`）映射到`Catalog`组件，将`/about` URL 映射到`About`组件。这意味着当`BrowserRouter`拦截到移动到这些 URL 之一的请求时，它将在视图中渲染适当的组件。
+
+允许我们显示目录或应用程序信息的导航栏实现如下：
+
+```jsx
+import React, { Component } from 'react';
+import './App.css';
+import Catalog from './Catalog';
+import About from './About';
+import { Switch, Route, Link } from 'react-router-dom'
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">The Catalog App</h1>
+          <nav>
+ <ul>
+ <li><Link to='/'>Catalog</Link></li>
+ <li><Link to='/about'>About</Link></li>
+ </ul>
+ </nav>        </header>
+        <Switch>
+          <Route exact path='/' component={Catalog}/>
+          <Route path='/about' component={About}/>
+        </Switch>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+在这里，我们添加了对`Link`组件的导入，并在突出显示的标记中使用了它。`Link`组件允许我们创建一个超链接元素，该元素将被`BrowserRouter`组件捕获。
+
+这些更改为我们的应用程序添加了一个可用的导航栏。您可以通过执行以下步骤来查看这些更改的结果。
+
+我们将打开现有的项目`my-shop-04`，以展示前面代码的结果：
+
+1.  打开一个控制台窗口
+
+1.  转到`my-shop-04`文件夹
+
+1.  运行`npm install`
+
+1.  运行`npm start`
+
+# 关于路由组件的一些注意事项
+
+请注意，`Route`组件具有`path`属性（允许我们指定要映射的 URL）和`component`属性（允许我们分配要在当前视图中渲染的组件）：
+
+```jsx
+<Switch>
+<Route exact path='/' component={Catalog}/>
+<Route path='/about' component={About}/>
+</Switch>
+```
+
+`path`属性用于 React Router 来检测要渲染的组件，如相应的`component`属性所指定。
+
+在前面的路由映射中，如果我们点击与`/about` URL 关联的`Link`组件，具有根路径（`/`）的路由将匹配`/about`的起始部分，并且`Catalog`组件将被渲染。
+
+当用户通过点击`Link`组件请求 URL 时，路由列表会按顺序扫描以找到与 URL 起始部分匹配的路径值。第一个匹配的值决定了要渲染的组件。
+
+如果我们想要在`path`属性的值和 URL 之间进行严格比较，我们需要指定`exact`属性，如下所示：
+
+```jsx
+<Switch>
+<Route exact path='/' component={Catalog}/>
+<Route path='/about' component={About}/>
+</Switch>
+```
+
+这可以防止任何以`/`开头的 URL 被第一个路由捕获。
+
+`Route`组件的`component`属性允许我们指定要渲染的组件。或者，我们可以使用`render`属性来指定调用一个返回 React 元素的函数，如下例所示：
+
+```jsx
+<Route path='/about' render={() => (<About data={someData}/>)}/>
+```
+
+这种方法类似于使用`component`属性，但它可能对于内联渲染和当我们需要向元素传递值时很有用。
+
+路由组件还允许我们指定`children`属性。与`render`一样，我们可以将一个函数赋给这个属性，但该函数返回的元素将*始终*被渲染，无论路径是否匹配。
+
+考虑以下示例：
+
+```jsx
+<Switch>
+<Route exact path='/' component={Catalog}/>
+<Route path='/about' component={About}/>
+<Route path='/footer' children={() => (<Footer />)}/>
+</Switch>
+```
+
+`Footer`组件将始终被渲染，即使路径`/footer`不匹配。
+
+# 嵌套视图
+
+在前面的示例中，我们通过使用 React Router 提供的`Switch`、`Route`和`Link`组件，在`App`组件中实现了视图导航。我们可以在任何其他组件中使用这些路由组件，以便我们可以构建嵌套视图和嵌套路由。
+
+让我们尝试用一个例子来说明这一点。假设我们想在我们的应用程序中添加一个酿酒师列表。我们可以在导航栏中添加一个新项，允许我们导航到一个显示该列表的页面。
+
+以下屏幕截图显示了新布局的外观：
+
+![](img/27b9a00c-cc5f-4cf9-9130-728896366abe.png)
+
+因此，让我们更改`App`组件的 JSX 标记，如下所示：
+
+```jsx
+import React, { Component } from 'react';
+import './App.css';
+import Catalog from './Catalog';
+import About from './About';
+import WineMakers from './WineMakers';
+import { Switch, Route, Link } from 'react-router-dom';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <h1 className="App-title">The Catalog App</h1>
+          <nav>
+            <ul>
+              <li><Link to='/'>Catalog</Link></li>
+              <li><Link to='/winemakers'>WineMakers</Link></li>
+              <li><Link to='/about'>About</Link></li>
+            </ul>
+          </nav>
+        </header>
+        <Switch>
+          <Route exact path='/' component={Catalog}/>
+          <Route path='/winemakers' component={WineMakers}/>
+          <Route path='/about' component={About}/>
+        </Switch>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
+
+我们导入了`WineMakers`组件，定义了一个将`/winemakers`路径映射到新组件的路由，并添加了一个链接以导航到它。
+
+我们可以如下实现酿酒师列表：
+
+```jsx
+import React from 'react';
+import WineMaker from './WineMaker';
+import { Switch, Route, Link } from 'react-router-dom';
+
+class WineMakers extends React.Component {
+  renderWineMakersList() {
+    return <ul>
+  ...
+        <Link to="/winemakers/WM2">Wine & Co</Link>
+      </li>
+    </ul>;
+  }
+
+  render() {
+    return <Switch>
+    ...
+
+export default WineMakers;
+```
+
+`WineMakers`组件具有`renderWineMakersList()`方法，该方法返回实现每个酿酒师链接列表的 React 元素。此方法用作组件`render()`方法中与`/winemakers`路径匹配的路由的`render`属性的值。其他路由获取指向每个特定酿酒师的路径，并根据标识码渲染`WineMaker`组件。
+
+您可能会注意到，我们正在`WineMakers`组件中实现一个视图，该视图显示在`App`组件中实现的视图内。换句话说，我们通过组合实现视图的组件来实现嵌套视图。
+
+# 路径参数
+
+`WineMakers`组件的`render()`方法如下实现最终视图：
+
+```jsx
+render() {
+  return <Switch>
+    <Route exact path='/winemakers' render={this.renderWineMakersList}/>
+    <Route path='/winemakers/WM1' render={() => (<WineMaker code='WM1' />}/>
+    <Route path='/winemakers/WM2' render={() => (<WineMaker code='WM2' />}/>
+  </Switch>;
+}
+```
+
+这段代码很简单，而且有效，但它迫使我们每当在我们的列表中添加新的酿酒师时都要添加一个新的路由。
+
+我们可以通过使用`path`参数来避免这种情况，如下面的代码所示：
+
+```jsx
+render() {
+  return <Switch>
+    <Route exact path='/winemakers' render={this.renderWineMakersList}/>
+    <Route path='/winemakers/:code' component={WineMaker}/>
+  </Switch>;
+}
+```
+
+如您所见，我们现在可以通过指定`:code`参数来使用指向特定酿酒师的单个路由。路径表达式中的冒号表示 URL 的后续部分是变量值。您可能还会注意到，我们使用了`component`属性而不是`render`属性。实际上，在这种情况下，我们不需要将酿酒师的代码显式传递给`WineMaker`组件。React Router 为我们做到了这一点，通过在`props`属性中提供一个特殊对象。
+
+让我们看一下`WineMaker`组件的实现：
+
+```jsx
+import React from 'react';
+
+class WineMaker extends React.Component {
+  constructor() {
+    super();
+    this.wineMakers = [
+      {code: "WM1", name: "Wine & Wine", country: "Italy",
+      description:"Wine & Wine produces an excellent Italian wine..."},
+
+export default WineMaker;
+```
+
+在组件的构造函数中，我们将酿酒师列表定义为对象数组。
+
+在`render()`方法中，我们通过将数组中每个`winemaker`对象的`code`属性与`match.params.code`属性（由`this.props`提供）进行比较来查找要显示的酿酒师。
+
+我们将`winemakers`列表实现为`WineMaker`组件的属性，而不是`state`对象的属性，因为由于列表嵌入到代码中并且不应该更改，我们不需要将其实现为`state`属性。请记住，我们只将随时间变化，我们只将随时间变化的数据标识为状态。
+
+我们找到的对象用于适当地渲染有关`WineMaker`的数据。
+
+通常，通过路由到达的 React 组件在`this.props`属性中接收`match`对象。该对象包含有关`Route`定义中匹配路径的信息。特别是，`match`对象的以下属性可用：
+
++   `params`：这是一个对象，其属性与路径中的参数匹配；也就是说，动态部分，前面有冒号
+
++   `isExact`：这是一个布尔值，指示 URL 是否与路径匹配
+
++   `path`：这是分配给所选路由的`path`属性的字符串
+
++   `url`：这是与路由路径匹配的 URL
+
+通过执行以下步骤，我们可以看到最终结果。我们打开现有的项目`my-shop-05`，以展示之前代码的结果：
+
+1.  打开一个控制台窗口
+
+1.  转到`my-shop-05`文件夹
+
+1.  运行`npm install`
+
+1.  运行`npm start`
+
+# 活动：添加有关运输方法的视图
+
+**场景**
+
+我们希望在我们的目录应用中添加一个包含有关可用运输方法信息的章节。
+
+**目标**
+
+本活动的目的是探索 React 路由提供的组件。
+
+**完成步骤**
+
+1.  考虑在前一活动中更改的项目（或位于`my-cart-03`文件夹中的现有项目）。
+
+1.  创建一个`ShippingMethods`组件，显示可用运输方法的列表，以及一个`ShippingMethod`组件，根据通过`props`传递的代码显示每个运输方法的详细信息（可用的运输方法包括**经济配送**（**ECO**）、**标准配送**（**STD**）和**快递配送**（**EXP**））。
+
+1.  创建一个导航栏和一个路由配置，允许我们在`Catalog`和`Shipping`方法视图之间导航。
+
+**解决方案**
+
+一个可能的解决方案是位于`Code/Chapter-3`中的`my-cart-04`文件夹中的那个。
+
+# 总结
+
+在本章中，我们学习了如何管理用户交互。特别是，我们涵盖了以下内容：
+
++   管理不涉及组件状态变化的事件
+
++   处理涉及组件状态变化的事件
+
++   探索了组件生命周期并学习了如何自定义每个阶段
+
++   使用 React Router 的组件来配置组件之间的导航
+
+本章为本书的结尾。它提供了理解 React 工作原理以及如何构建基于 React 的应用程序的基础知识。我们从 React 的简介开始，然后详细探讨了创建组件的过程。最后，我们研究了如何使用 React 管理用户交互。
diff --git a/docs/bg-react/bg-react_3.yaml b/docs/bg-react/bg-react_3.yaml
deleted file mode 100644
index f03dd4f..0000000
--- a/docs/bg-react/bg-react_3.yaml
+++ /dev/null
@@ -1,1447 +0,0 @@
-- en: Managing User Interactivity
-  id: totrans-0
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 管理用户交互性
-- en: In this chapter, we are going to learn how to manage the events generated by
-    a user's interaction with the components of a React-based user interface. We will
-    explore the events that are triggered during the lifecycle of a React component,
-    and will learn how to exploit them in order to create efficient components. Finally,
-    we will use the React Router library to allow easy navigation between the different
-    views implemented by components.
-  id: totrans-1
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章中，我们将学习如何管理由用户与React基础用户界面的组件交互产生的事件。我们将探讨在React组件生命周期中触发的事件，并学习如何利用它们来创建高效的组件。最后，我们将使用React
-    Router库来允许在由组件实现的不同的视图之间轻松导航。
-- en: 'By the end of this chapter, you will be able to:'
-  id: totrans-2
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章结束时，你将能够：
-- en: Handle events generated by user interaction
-  id: totrans-3
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 处理由用户交互产生的事件
-- en: Change a component's state on event triggering
-  id: totrans-4
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 在事件触发时更改组件的状态
-- en: Use a component's lifecycle events for a better user experience
-  id: totrans-5
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 使用组件的生命周期事件以获得更好的用户体验
-- en: Configure routing to allow navigation through components
-  id: totrans-6
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 配置路由以允许通过组件进行导航
-- en: Managing User Interaction
-  id: totrans-7
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 管理用户交互
-- en: Any web application requires interaction between the user and the **user interface** (**UI**).
-    An application without interaction is not a true application; interactivity is
-    a basic requirement.
-  id: totrans-8
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 任何Web应用程序都需要用户与**用户界面**（**UI**）之间的交互。没有交互的应用程序不是真正的应用程序；交互性是一个基本要求。
-- en: The application that we built in the previous chapter does not allow interaction.
-    It simply shows data, and the user cannot do anything with it (apart from look
-    at it).
-  id: totrans-9
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们在上一章构建的应用程序不允许交互。它只是显示数据，用户无法对其进行任何操作（除了查看）。
-- en: Suppose that we want to introduce a little interaction into the catalog application
-    that we started building in the previous chapter. For example, perhaps we want
-    to show an alert with the price of the product when the user clicks on the product
-    area.
-  id: totrans-10
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 假设我们想在上一章开始构建的目录应用程序中引入一点交互。例如，也许我们想在用户点击产品区域时显示一个带有产品价格的警告。
-- en: 'Provided that the product data includes the price, as in the following JSON
-    object:'
-  id: totrans-11
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 假设产品数据包括价格，如下面的JSON对象所示：
-- en: '[PRE0]'
-  id: totrans-12
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE0]'
-- en: 'We can implement this behavior as follows:'
-  id: totrans-13
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以如下实现这种行为：
-- en: '[PRE1]'
-  id: totrans-14
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE1]'
-- en: Let's analyze the component's code and highlight the differences with respect
-    to the previous version.
-  id: totrans-15
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们分析组件的代码，并强调与前一个版本的不同之处。
-- en: First of all, we added the `showPrice()` method, showing the price of the current product
-    instance via an alert. This method is invoked inside of an arrow function assigned
-    to the `onClick` attribute of the `<li>` tag.
-  id: totrans-16
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 首先，我们添加了`showPrice()`方法，通过一个警告框显示当前产品实例的价格。这个方法在箭头函数内部被调用，该箭头函数被分配给`<li>`标签的`onClick`属性。
-- en: These simple changes allow the `Product` component to capture the `click` event
-    and execute the `showPrice()` method.
-  id: totrans-17
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这些简单的更改允许`Product`组件捕获`click`事件并执行`showPrice()`方法。
-- en: 'We''ll now open the existing project, `my-shop-01`, in order to show the result
-    of the previous code changes:'
-  id: totrans-18
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 现在我们将打开现有的项目`my-shop-01`，以展示之前的代码更改的结果：
-- en: Open a console window
-  id: totrans-19
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口
-- en: Move to the `my-shop-01` folder
-  id: totrans-20
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-01`文件夹
-- en: Run `npm install`
-  id: totrans-21
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm install`
-- en: Run `npm start`
-  id: totrans-22
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`
-- en: 'The result of clicking on a product is shown in the following screenshot:'
-  id: totrans-23
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 点击产品的结果显示在以下截图中：
-- en: '![](Images/4f5a555a-4d0e-43e1-ad83-5f723cf29071.png)'
-  id: totrans-24
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/4f5a555a-4d0e-43e1-ad83-5f723cf29071.png)'
-- en: HTML Events versus React Events
-  id: totrans-25
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: HTML事件与React事件
-- en: As we can see, the React approach to handling events is very similar to classic
-    event management within HTML. However, there are some subtle differences to take
-    into account.
-  id: totrans-26
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 正如我们所见，React处理事件的方法与HTML中的经典事件管理非常相似。然而，有一些细微的差别需要注意。
-- en: 'HTML events are named using lowercase, while JSX events use camelCase. For example,
-    in HTML, you should use the following syntax:'
-  id: totrans-27
-  prefs: []
-  type: TYPE_NORMAL
-  zh: HTML事件使用小写字母命名，而JSX事件使用驼峰命名法。例如，在HTML中，你应该使用以下语法：
-- en: '[PRE2]'
-  id: totrans-28
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE2]'
-- en: 'But in JSX, you use this syntax:'
-  id: totrans-29
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 但在JSX中，你使用这种语法：
-- en: '[PRE3]'
-  id: totrans-30
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE3]'
-- en: 'In HTML, you assign a string representing the invocation of a function, while
-    in JSX, you assign a function, which is shown as follows:'
-  id: totrans-31
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在HTML中，你分配一个代表函数调用的字符串，而在JSX中，你分配一个函数，如下所示：
-- en: '[PRE4]'
-  id: totrans-32
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE4]'
-- en: 'Of course, you can assign any JavaScript expression returning or representing
-    a function, like the one shown in the following example:'
-  id: totrans-33
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当然，你可以分配任何返回或代表函数的JavaScript表达式，如下例所示：
-- en: '[PRE5]'
-  id: totrans-34
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE5]'
-- en: 'Finally, you can prevent the default behavior of most HTML events by returning
-    `false`, while in JSX events, you need to explicitly call `preventDefault`. The
-    following is a typical example:'
-  id: totrans-35
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 最后，您可以通过返回`false`来阻止大多数HTML事件的默认行为，而在JSX事件中，您需要显式调用`preventDefault`。以下是一个典型示例：
-- en: '[PRE6]'
-  id: totrans-36
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE6]'
-- en: Event Handlers and the this Keyword
-  id: totrans-37
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: Event Handlers 和 this 关键字
-- en: In the preceding example of defining a `Product` component, we assigned an arrow function
-    to the `onClick` attribute, instead of the simple `showPrice()` method. This was
-    not simply a matter of preference. It was necessary because we used the `this` keyword
-    inside the `showPrice()` method.
-  id: totrans-38
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在前面的定义`Product`组件的示例中，我们将箭头函数分配给了`onClick`属性，而不是简单的`showPrice()`方法。这不仅仅是一个偏好问题。这是必要的，因为我们使用了`showPrice()`方法内部的`this`关键字。
-- en: In fact, when the event handler executes, the `this` keyword is no longer bound
-    to the `Product` class, since it is asynchronously executed in a different context.
-    This behavior does not depend on React, but on how JavaScript works.
-  id: totrans-39
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 实际上，当事件处理程序执行时，`this`关键字不再绑定到`Product`类，因为它是在不同的上下文中异步执行的。这种行为不依赖于React，而是依赖于JavaScript的工作方式。
-- en: 'In order to bind the method to the current class, we have a few options:'
-  id: totrans-40
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 为了将方法绑定到当前类，我们有几个选项：
-- en: 'Use an arrow function and invoke the method inside its body, as shown in the following
-    example:'
-  id: totrans-41
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 使用箭头函数并在其体内调用方法，如下例所示：
-- en: '[PRE7]'
-  id: totrans-42
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE7]'
-- en: 'Use the `bind()` method to bind the method to the current class context, as shown
-    in the following example:'
-  id: totrans-43
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 使用`bind()`方法将方法绑定到当前类上下文，如下例所示：
-- en: '[PRE8]'
-  id: totrans-44
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE8]'
-- en: 'You can use `bind()` in the class constructor instead of using it inline when assigning
-    the method to the event attribute. The following is an example of this approach:'
-  id: totrans-45
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 您可以在类构造函数中使用`bind()`，而不是在将方法分配给事件属性时内联使用。以下是这种方法的示例：
-- en: '[PRE9]'
-  id: totrans-46
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE9]'
-- en: Changing the State
-  id: totrans-47
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 更改状态
-- en: The event management example that we looked at is very simple, but it only shows the
-    basics of React event management. This example does not involve the state, and
-    its management is straightforward. In many real-world cases, an event causes changes
-    to the application's state, and that means changes to the component's state.
-  id: totrans-48
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们看过的这个事件管理示例非常简单，但它只展示了React事件管理的基础。这个示例不涉及状态，其管理是直接的。在许多现实世界的情况下，一个事件导致应用程序状态的变化，这意味着组件状态的变化。
-- en: 'Suppose that, for example, you want to allow the selecting of products from
-    the catalog. To do so, we add the `selected` property to each product object,
-    as shown in the following array:'
-  id: totrans-49
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 假设，例如，您想允许从目录中选择产品。为此，我们为每个产品对象添加`selected`属性，如下面的数组所示：
-- en: '[PRE10]'
-  id: totrans-50
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE10]'
-- en: 'When the user clicks on the product area, the value of the `selected` property
-    is toggled and the background color of the area changes. The following code snippet shows
-    the new version of the `Product` component:'
-  id: totrans-51
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当用户点击产品区域时，`selected`属性的值会切换，并且区域背景颜色会改变。以下代码片段展示了`Product`组件的新版本：
-- en: '[PRE11]'
-  id: totrans-52
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE11]'
-- en: The `select()` method toggles the value of the `selected` property, while in
-    the rendering method, we calculate the name of the class to apply according to
-    the value of the `selected` property. The resulting class name is then assigned
-    to the `className` attribute.
-  id: totrans-53
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`select()`方法切换`selected`属性的值，而在渲染方法中，我们根据`selected`属性的值计算要应用的类的名称。然后，生成的类名被分配给`className`属性。'
-- en: 'Unexpectedly, this code is not working correctly. You can verify it by performing
-    the following steps. We can open the existing project, `my-shop-02`, in order
-    to see the results of the previous code. Follow these steps:'
-  id: totrans-54
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 意外地，这段代码没有正确工作。您可以通过执行以下步骤来验证。我们可以打开现有项目`my-shop-02`，以便查看之前代码的结果。请按照以下步骤操作：
-- en: Open a console window
-  id: totrans-55
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口
-- en: Move to the `my-shop-02` folder
-  id: totrans-56
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-02`文件夹
-- en: Run `npm install`
-  id: totrans-57
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm install`
-- en: Run `npm start`
-  id: totrans-58
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`
-- en: The code is not working as expected because the `select()` method does not change
-    the component's state, so the `render()` method is not triggered. In addition,
-    keep in mind that the `props` property is read-only, so any change to it has no
-    effect.
-  id: totrans-59
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 代码没有按预期工作，因为`select()`方法没有改变组件的状态，所以`render()`方法没有被触发。此外，请记住`props`属性是只读的，因此对其的任何更改都不会产生影响。
-- en: The `Product` component is a stateless component, so we have no state to change here.
-    The product's data comes from the `Catalog` root component via `props`. So, how can
-    we change the `Catalog` component's state, starting from an event triggered at
-    the `Product` component instance?
-  id: totrans-60
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`Product`组件是一个无状态组件，因此我们没有状态需要改变。产品的数据来自通过`props`传递的`Catalog`根组件。那么，我们如何从`Product`组件实例触发的事件开始改变`Catalog`组件的状态呢？'
-- en: Specifically, how can a child component change the state of its parent component?
-  id: totrans-61
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 具体来说，子组件如何改变其父组件的状态？
-- en: 'Actually, the child component has no opportunity to change the parent component''s state,
-    because in a React component hierarchy, data flows in a unidirectional way, from
-    the parent towards the children. We illustrate this flow in the following diagram:'
-  id: totrans-62
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 实际上，子组件没有机会改变父组件的状态，因为在React组件层次结构中，数据以单向方式流动，从父组件流向子组件。我们在下面的图表中说明了这种流动：
-- en: '![](Images/e619f805-e32d-446c-9b2b-f9bd1d036e19.png)'
-  id: totrans-63
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/e619f805-e32d-446c-9b2b-f9bd1d036e19.png)'
-- en: We cannot push data from the child to the parent. In order for a child component to
-    change the state of a parent component, we need to get a method to act on that state.
-    Since a component state is accessible only by the component itself, the parent component
-    must provide that method to its children via the `props` property.
-  id: totrans-64
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们不能将数据从子组件推送到父组件。为了让子组件改变父组件的状态，我们需要获取一个方法来操作该状态。由于组件状态只能由组件本身访问，因此父组件必须通过`props`属性向其子组件提供该方法。
-- en: 'Consider the following code:'
-  id: totrans-65
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 考虑以下代码：
-- en: '[PRE12]'
-  id: totrans-66
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE12]'
-- en: The preceding code adds the `select()` method to the `Catalog` component. This method
-    takes a product code as an input parameter, gets the product list from the component's
-    state, and updates the `selected` property of the corresponding product. It then
-    updates the component's state with the new product list.
-  id: totrans-67
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 前面的代码将`select()`方法添加到`Catalog`组件中。该方法接受一个产品代码作为输入参数，从组件的状态中获取产品列表，并更新相应产品的`selected`属性。然后使用新的产品列表更新组件的状态。
-- en: The `select()` method is assigned to the new `selectHandler` attribute in the `ProductList`
-    tag, so the corresponding component can access it through the `props` property.
-  id: totrans-68
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`select()`方法被分配给`ProductList`标签中的新`selectHandler`属性，因此相应的组件可以通过`props`属性访问它。'
-- en: 'The following code shows how `this.props.selectHandler` is passed from the `ProductList`
-    component to the `Product` component via the `selectHandler` attribute:'
-  id: totrans-69
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下代码展示了如何将`this.props.selectHandler`从`ProductList`组件传递到`Product`组件，通过`selectHandler`属性：
-- en: '[PRE13]'
-  id: totrans-70
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE13]'
-- en: 'Finally, the `Product` component handles the `onClick` events by calling the
-    `select()` method passed via the `this.props.selectHandler` property with the
-    appropriate product code:'
-  id: totrans-71
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 最后，`Product`组件通过调用通过`this.props.selectHandler`属性传递的`select()`方法来处理`onClick`事件，并使用适当的产品代码：
-- en: '[PRE14]'
-  id: totrans-72
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE14]'
-- en: 'We''ll now open the existing project, `my-shop-03`, in order to see the results
-    of the previous code. Follow these steps:'
-  id: totrans-73
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 现在我们将打开现有的项目`my-shop-03`，以便查看之前代码的结果。请按照以下步骤操作：
-- en: Open a console window
-  id: totrans-74
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口
-- en: Move to the `my-shop-03` folder
-  id: totrans-75
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-03`文件夹
-- en: Run `npm install`
-  id: totrans-76
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm install`
-- en: Run `npm start`
-  id: totrans-77
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`
-- en: 'We can conclude that an event on a child component triggers the execution of
-    a parent component method passed via `props`. The method changes the parent''s
-    state, and the effect of this change is once again propagated to the children
-    via `props`. The following diagram illustrates this behavior:'
-  id: totrans-78
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以得出结论，子组件上的事件触发了通过`props`传递的父组件方法的执行。该方法改变了父组件的状态，这种变化的效果再次通过`props`传播到子组件。以下图表说明了这种行为：
-- en: '![](Images/c5f36cd8-28ca-4ccb-a05b-7fd69497a78e.png)'
-  id: totrans-79
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/c5f36cd8-28ca-4ccb-a05b-7fd69497a78e.png)'
-- en: 'Activity: Adding Items to the Shopping Cart'
-  id: totrans-80
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：将商品添加到购物车
-- en: '**Scenario**'
-  id: totrans-81
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We want to allow the user to add items to the shopping cart by picking them
-    from the product catalog.
-  id: totrans-82
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们希望允许用户从产品目录中选择商品并将其添加到购物车中。
-- en: '**Aim**'
-  id: totrans-83
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to become familiar with event management in React.
-  id: totrans-84
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 此活动的目的是熟悉React中的事件管理。
-- en: '**Steps for Completion**'
-  id: totrans-85
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Consider the existing project in the `my-cart-01` folder
-  id: totrans-86
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 考虑`my-cart-01`文件夹中的现有项目
-- en: Handle the click event of the `Product` component's Add to cart button in order
-    to add that product to the cart
-  id: totrans-87
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 处理`Product`组件的“添加到购物车”按钮的点击事件，以便将该商品添加到购物车中
-- en: '**Solution**'
-  id: totrans-88
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-02` folder at `Code/Chapter-3/`.
-  id: totrans-89
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一个可能的解决方案包含在`Code/Chapter-3/`下的`my-cart-02`文件夹中。
-- en: Component Lifecycle Events
-  id: totrans-90
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 组件生命周期事件
-- en: In a React application, components are created dynamically, according to the evolution
-    of the application at runtime. A user's interaction starts a component's creation,
-    its visualization, its updates on the screen, and its destruction.
-  id: totrans-91
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在React应用程序中，组件根据应用程序运行时的演变动态创建。用户的交互启动了组件的创建、屏幕上的可视化、更新和销毁。
-- en: 'So, components go through different phases during application execution: these
-    phases represent their lifecycles.'
-  id: totrans-92
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 因此，组件在应用程序执行期间经历不同的阶段：这些阶段代表了它们的生命周期。
-- en: React allows us to intercept and manage the phases of a component's lifecycle
-    in a customized way, thanks to a set of events that we can handle by implementing specific
-    methods.
-  id: totrans-93
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React允许我们以自定义的方式拦截和管理组件生命周期的各个阶段，这得益于我们可以通过实现特定方法来处理的一组事件。
-- en: Before analyzing a component's lifecycle events, we should highlight that the
-    first step in creating a component is the execution of its constructor. Although
-    it is not one of React's lifecycle phases, it is the first step of a component's
-    life. During the component's constructor execution, the DOM is not available,
-    and it is not possible to access any child component. The constructor execution
-    is the right time to perform the initializations that don't concern graphic rendering
-    or child manipulation.
-  id: totrans-94
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在分析组件的生命周期事件之前，我们应该强调，创建组件的第一步是执行其构造函数。虽然它不是React生命周期阶段的一部分，但它是组件生命的第一步。在组件构造函数执行期间，DOM不可用，也无法访问任何子组件。构造函数执行是执行不涉及图形渲染或子组件操作的初始化的正确时机。
-- en: 'After component creation, React will trigger a few events corresponding to
-    the respective phases of the component''s lifecycle. We can catch these events
-    and handle them by implementing a few methods in our component. Consider the following
-    method:'
-  id: totrans-95
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 组件创建后，React将触发几个对应于组件生命周期相应阶段的事件。我们可以捕获这些事件并通过在我们的组件中实现一些方法来处理它们。考虑以下方法：
-- en: '[PRE15]'
-  id: totrans-96
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE15]'
-- en: This method is executed when the component is about to be inserted into the
-    DOM. It is invoked once, just before the initial rendering occurs. Usually, this
-    method is used to perform any initialization of the component not involving the
-    DOM, such as initializing values for a component's properties or local variables.
-  id: totrans-97
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这种方法在组件即将被插入到DOM中时执行。它只被调用一次，就在初始渲染发生之前。通常，这个方法用于执行与DOM无关的组件初始化，例如初始化组件的属性或本地变量。
-- en: You can use the `setState()` method within `componentWillMount()`, but it will
-    not trigger a re-render of the component, so use it carefully.
-  id: totrans-98
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 你可以在`componentWillMount()`中使用`setState()`方法，但它不会触发组件的重新渲染，所以要谨慎使用。
-- en: '`componentWillReceiveProps` is the method invoked before rendering when a component
-    receives new values from the parent via `props`. This method receives the new
-    values as a parameter, and we can access the old values through `this.props`.'
-  id: totrans-99
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`componentWillReceiveProps`是在组件通过`props`从父组件接收到新值之前渲染时调用的方法。这个方法接收新值作为参数，我们可以通过`this.props`访问旧值。'
-- en: If we try to change the component state during the execution of this method,
-    we will not trigger any additional rendering. Additionally, `componentWillReceiveProps()`
-    is not to be invoked upon initial rendering.
-  id: totrans-100
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果我们尝试在这个方法执行期间改变组件状态，我们将不会触发任何额外的渲染。此外，`componentWillReceiveProps()`在初始渲染时不会被调用。
-- en: The `shouldComponentUpdate` method should return a Boolean that states whether the
-    component should be rendered (`true`) or not (`false`). If the method returns `false`,
-    the next methods will not be invoked, including `render()`.
-  id: totrans-101
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`shouldComponentUpdate`方法应该返回一个布尔值，表示组件是否应该被渲染（`true`）或不渲染（`false`）。如果该方法返回`false`，则不会调用下一个方法，包括`render()`。'
-- en: 'This has two parameters: `nextProps`, containing the new values for the `props`,
-    and `nextState`, containing the new value of the component''s state.'
-  id: totrans-102
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 它有两个参数：`nextProps`，包含`props`的新值，以及`nextState`，包含组件状态的新值。
-- en: '`componentWillUpdate` is invoked immediately before the `render()` method,
-    so it is the last opportunity to perform some processing before updating the component.'
-  id: totrans-103
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`componentWillUpdate`在`render()`方法之前立即被调用，因此它是更新组件之前执行某些处理的最后机会。'
-- en: You cannot use `setState()` within an implementation of `shouldComponentUpdate()`.
-  id: totrans-104
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在`shouldComponentUpdate()`的实现中不能使用`setState()`。
-- en: '`componentDidUpdate` is invoked immediately after rendering occurs, and during
-    its execution, we can access the new version of the component in the DOM. The
-    method has two parameters: the previous `props` and the previous state.'
-  id: totrans-105
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`componentDidUpdate`在渲染发生后立即调用，在其执行期间，我们可以访问DOM中组件的新版本。该方法有两个参数：之前的`props`和之前的状态。'
-- en: '`componentDidMount` is called after the component is inserted into the DOM,
-    and is invoked just once.'
-  id: totrans-106
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`componentDidMount`在组件被插入到DOM后调用，并且只调用一次。'
-- en: '`componentWillUnmount` is called immediately before the component is removed from
-    the DOM.'
-  id: totrans-107
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`componentWillUnmount`在组件从DOM中移除之前立即调用。'
-- en: You cannot use `setState()` during the execution of this method.
-  id: totrans-108
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在这个方法执行期间，你不能使用`setState()`。
-- en: 'We can group the component lifecycle events into three main areas:'
-  id: totrans-109
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以将组件生命周期事件分为三个主要区域：
-- en: '**Mounting**: This `props` group contains the events related to DOM manipulation:
-    `componentWillMount`, `componentDidMount`, and `componentWillUnmount`'
-  id: totrans-110
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '**挂载**：这个`props`组包含与DOM操作相关的事件：`componentWillMount`、`componentDidMount`和`componentWillUnmount`'
-- en: '**Updating via props**: This group contains the events that are triggered when
-    a component is updated via `props` passed by its parent, and it includes: `componentWillReceiveProps`,
-    `shouldComponentUpdate`, `componentWillUpdate`, and `componentDidUpdate`'
-  id: totrans-111
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '**通过props更新**：这个组包含当组件通过其父组件传递的`props`更新时触发的事件，包括：`componentWillReceiveProps`、`shouldComponentUpdate`、`componentWillUpdate`和`componentDidUpdate`。'
-- en: '**Updating via setState()**: In this group, we find the events triggered when a
-    component is updated via `setState()`: `shouldComponentUpdate`, `componentWillUpdate`,
-    and `componentDidUpdate`'
-  id: totrans-112
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '**通过setState()更新**：在这个组中，我们找到当组件通过`setState()`更新时触发的事件：`shouldComponentUpdate`、`componentWillUpdate`和`componentDidUpdate`。'
-- en: 'The following diagram illustrates the event flow and highlights, with different
-    colors, the three areas we just discussed:'
-  id: totrans-113
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 下面的图表说明了事件流，并使用不同的颜色突出了我们刚刚讨论的三个区域：
-- en: '![](Images/77905891-cf29-46ca-a169-f0453358e90b.png)'
-  id: totrans-114
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/77905891-cf29-46ca-a169-f0453358e90b.png)'
-- en: 'Activity: Showing the Quantity of Items Added to the Cart'
-  id: totrans-115
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：显示添加到购物车的商品数量
-- en: '**Scenario**'
-  id: totrans-116
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: 'We want to avoid multiple occurrences of the same product in the cart. Rather,
-    we want the cart to have a single occurrence of a product and its quantity, as
-    shown in the following screenshot:'
-  id: totrans-117
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们希望避免购物车中出现同一产品的多个实例。相反，我们希望购物车中只有单一产品及其数量的出现，如下面的截图所示：
-- en: '![](Images/c60ffc2b-daab-4b7b-be17-7fd2b6b772b0.png)'
-  id: totrans-118
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/c60ffc2b-daab-4b7b-be17-7fd2b6b772b0.png)'
-- en: '**Aim**'
-  id: totrans-119
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to exploit the lifecycle events of React components.
-  id: totrans-120
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这个活动的目的是利用React组件的生命周期事件。
-- en: '**Steps for Completion**'
-  id: totrans-121
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Utilize the project that was changed in the previous activity (or the existing project
-    in the `my-cart-02` folder).
-  id: totrans-122
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 利用在前一个活动中更改的项目（或在`my-cart-02`文件夹中的现有项目）。
-- en: Change the `Cart` component in order to show a list of non-duplicated products
-    and their related number of occurrences.
-  id: totrans-123
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 更改`Cart`组件以显示一个无重复产品的列表及其相关出现次数。
-- en: Handle the `componentWillReceiveProps` event to prepare data for the internal
-    state of the `Cart` component.
-  id: totrans-124
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 处理`componentWillReceiveProps`事件，为`Cart`组件的内部状态准备数据。
-- en: '**Solution**'
-  id: totrans-125
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-03` folder at `Code/Chapter-3`.
-  id: totrans-126
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一个可能的解决方案是在`Code/Chapter-3`中的`my-cart-03`文件夹中包含的解决方案。
-- en: Managing Routing
-  id: totrans-127
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 管理路由
-- en: Modern web applications, based on the Single-Page Application model, can't do without
-    the routing mechanism, a way to navigate among views while remaining on the same
-    HTML page.
-  id: totrans-128
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 基于单页应用程序模型的现代Web应用程序，不能没有路由机制，这是一种在同一HTML页面上浏览视图的方式。
-- en: We can consider a view as a placeholder in the UI where we can dynamically render one
-    component or another in an exclusive way. Let's try to clarify this concept with an
-    example.
-  id: totrans-129
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以将视图视为UI中的一个占位符，在其中我们可以动态地渲染一个组件或另一个组件，以独占的方式。让我们尝试用一个例子来澄清这个概念。
-- en: 'Suppose that we want to add a navigation bar to our *Wine Catalog* application.
-    In its simplest implementation, we want to alternatively show the Catalog and
-    an About section, providing some information about the application itself. The
-    new UI will look like the following screenshot:'
-  id: totrans-130
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 假设我们想在我们的*葡萄酒目录*应用程序中添加一个导航栏。在最简单的实现中，我们想交替显示目录和一个关于部分，提供一些关于应用程序本身的信息。新的UI将如下面的截图所示：
-- en: '![](Images/73e59b33-0f9c-4a43-9024-556c5bca4ea7.png)'
-  id: totrans-131
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/73e59b33-0f9c-4a43-9024-556c5bca4ea7.png)'
-- en: When clicking a menu item, we expect the main area to change, while the header remains
-    the same. In this case, the main area will be the view in which we display the
-    `Catalog` component or the `About` component, depending on the menu item we clicked
-    on.
-  id: totrans-132
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当点击菜单项时，我们希望主区域发生变化，而头部保持不变。在这种情况下，主区域将是我们显示`Catalog`组件或`About`组件的视图，具体取决于我们点击的菜单项。
-- en: How can we implement the routing mechanism in React?
-  id: totrans-133
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们如何在React中实现路由机制？
-- en: Installing React Router
-  id: totrans-134
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 安装React Router
-- en: We can enable routing in a React-based application by using **React Router**,
-    a package that provides us with specific React components that allow us to set
-    up a complete routing system.
-  id: totrans-135
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以通过使用**React Router**，一个为我们提供特定React组件的包，来启用基于React的应用程序的路由，这些组件允许我们设置一个完整的路由系统。
-- en: 'We install that package in our application by typing the following command
-    inside of the application''s folder:'
-  id: totrans-136
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们在应用程序的文件夹中输入以下命令来安装该包：
-- en: '[PRE16]'
-  id: totrans-137
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE16]'
-- en: 'React Router provides three packages:'
-  id: totrans-138
-  prefs: []
-  type: TYPE_NORMAL
-  zh: React Router提供了三个包：
-- en: '`react-router`'
-  id: totrans-139
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`react-router`'
-- en: '`react-router-dom`'
-  id: totrans-140
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`react-router-dom`'
-- en: '`react-router-native`'
-  id: totrans-141
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`react-router-native`'
-- en: The first package provides the core routing components and functionalities.
-    The second one provides specific components for the browser environment, and the
-    third one supports `react-native`, an environment that maps React components to
-    native mobile UI widgets. Both `react-router-dom` and `react-router-native` use `react-router`
-    functionalities.
-  id: totrans-142
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 第一个包提供了核心路由组件和功能。第二个包为浏览器环境提供了特定组件，第三个包支持`react-native`，这是一个将React组件映射到原生移动UI小部件的环境。`react-router-dom`和`react-router-native`都使用`react-router`功能。
-- en: Using the Router
-  id: totrans-143
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 使用路由器
-- en: Once we have installed the React Router package in our environment, we need
-    to use the provided components in our application.
-  id: totrans-144
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一旦我们在环境中安装了React Router包，我们需要在应用程序中使用提供的组件。
-- en: 'The first thing we need to do is add routing capabilities to our application.
-    We can do this by changing the code of the `index.js` file, as follows:'
-  id: totrans-145
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 首先，我们需要为应用程序添加路由功能。我们可以通过更改`index.js`文件的代码来实现这一点，如下所示：
-- en: '[PRE17]'
-  id: totrans-146
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE17]'
-- en: We highlighted the main differences, with respect to the previous version of
-    the code. As you can see, we imported the `BrowserRouter` component from the `react-router-dom`
-    module and wrapped the `App` component inside of it.
-  id: totrans-147
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们强调了与前一版本代码的主要区别。如您所见，我们从`react-router-dom`模块导入了`BrowserRouter`组件，并将其包裹在`App`组件内部。
-- en: By wrapping the `App` component, the `BrowserRouter` component enriches it with routing
-    capabilities.
-  id: totrans-148
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 通过包装`App`组件，`BrowserRouter`组件为其赋予了路由功能。
-- en: This is a component composition hence we have called this as component wrapping.
-  id: totrans-149
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这是一个组件组合，因此我们称之为组件包装。
-- en: Defining Views
-  id: totrans-150
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 定义视图
-- en: 'Now, we need to create a view to display the `Catalog` component or the About
-    page, as depicted in the following screenshot:'
-  id: totrans-151
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 现在，我们需要创建一个视图来显示`Catalog`组件或关于页面，如下所示：
-- en: '![](Images/9aded227-73da-4ec8-9c1d-a9109033be9b.png)'
-  id: totrans-152
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/9aded227-73da-4ec8-9c1d-a9109033be9b.png)'
-- en: 'We can accomplish this by changing the `App.js` code, which is shown as follows:'
-  id: totrans-153
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以通过更改`App.js`代码来实现这一点，如下所示：
-- en: '[PRE18]'
-  id: totrans-154
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE18]'
-- en: We imported the `Switch` and `Route` components from the `react-router-dom` module,
-    and used them in the JSX expression where the `Catalog` element once was.
-  id: totrans-155
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们从`react-router-dom`模块导入了`Switch`和`Route`组件，并在JSX表达式中使用了它们，该表达式曾经是`Catalog`元素所在的位置。
-- en: The `Switch` component allows us to define a view, that is, the area inside
-    of which we will toggle components. The `Route` components are used as child elements
-    of `Switch`, and they allow us to map URLs to components. In our example, we are mapping
-    the root URL (`/`) to the `Catalog` component and the `/about` URL to the `About`
-    component. This means that when the `BrowserRouter` intercepts the request to
-    move to one of these URLs, it will render the appropriate component inside of
-    the view.
-  id: totrans-156
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`Switch`组件允许我们定义一个视图，即我们将在其中切换组件的区域。`Route`组件用作`Switch`的子元素，它们允许我们将URL映射到组件。在我们的示例中，我们将根URL（`/`）映射到`Catalog`组件，将`/about`
-    URL映射到`About`组件。这意味着当`BrowserRouter`拦截到移动到这些URL之一的请求时，它将在视图中渲染适当的组件。'
-- en: 'The navigation bar that allows us to display the catalog or the information
-    about the application is implemented as follows:'
-  id: totrans-157
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 允许我们显示目录或应用程序信息的导航栏实现如下：
-- en: '[PRE19]'
-  id: totrans-158
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE19]'
-- en: Here, we added the import of a `Link` component and used it in the highlighted markup.
-    The `Link` component allows us to create a hyperlink element that will be caught
-    by the `BrowserRouter` component.
-  id: totrans-159
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在这里，我们添加了对`Link`组件的导入，并在突出显示的标记中使用了它。`Link`组件允许我们创建一个超链接元素，该元素将被`BrowserRouter`组件捕获。
-- en: These changes add a working navigation bar to our application. You can see the result
-    of these changes by performing the following steps.
-  id: totrans-160
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这些更改为我们的应用程序添加了一个可用的导航栏。您可以通过执行以下步骤来查看这些更改的结果。
-- en: 'We will open the existing project, `my-shop-04`, in order to show the results
-    of the previous code:'
-  id: totrans-161
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们将打开现有的项目`my-shop-04`，以展示前面代码的结果：
-- en: Open a console window
-  id: totrans-162
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口
-- en: Move to the `my-shop-04` folder
-  id: totrans-163
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-04`文件夹
-- en: Run `npm install`
-  id: totrans-164
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm install`
-- en: Run `npm start`
-  id: totrans-165
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`
-- en: Some Notes About the Route Component
-  id: totrans-166
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 关于路由组件的一些注意事项
-- en: 'Notice that the `Route` component has the `path` attribute (which allows us
-    to specify the URL to map) and the `component` attribute (which allows us to assign
-    the component to render in the current view):'
-  id: totrans-167
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 请注意，`Route`组件具有`path`属性（允许我们指定要映射的URL）和`component`属性（允许我们分配要在当前视图中渲染的组件）：
-- en: '[PRE20]'
-  id: totrans-168
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE20]'
-- en: The `path` attribute is used by React Router to detect the component to render,
-    as specified by the corresponding `component` attribute.
-  id: totrans-169
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`path`属性用于React Router来检测要渲染的组件，如相应的`component`属性所指定。'
-- en: In the previous route mapping, if we click on a `Link` component associated
-    with the `/about` URL, the route with the root (`/`) path will match the starting
-    part of `/about`, and the `Catalog` component will be rendered.
-  id: totrans-170
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在前面的路由映射中，如果我们点击与`/about` URL关联的`Link`组件，具有根路径（`/`）的路由将匹配`/about`的起始部分，并且`Catalog`组件将被渲染。
-- en: When the user requests a URL by clicking on the `Link` component, the list of
-    routes is scanned in order to find a path value that matches the starting part
-    of the URL. The first matching value determines the component to render.
-  id: totrans-171
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 当用户通过点击`Link`组件请求URL时，路由列表会按顺序扫描以找到与URL起始部分匹配的路径值。第一个匹配的值决定了要渲染的组件。
-- en: 'If we want a strict comparison between the `path` attribute''s value and the
-    URL, we need to specify the exact attribute, which is shown as follows:'
-  id: totrans-172
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如果我们想要在`path`属性的值和URL之间进行严格比较，我们需要指定`exact`属性，如下所示：
-- en: '[PRE21]'
-  id: totrans-173
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE21]'
-- en: This prevents any URL starting with `/` from being captured by the first route.
-  id: totrans-174
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这可以防止任何以`/`开头的URL被第一个路由捕获。
-- en: 'The `component` attribute of the `Route` component allows us to specify the
-    component to render. Alternatively, we can use the `render` attribute to specify
-    the invocation of a function returning a React element, as shown in the following
-    example:'
-  id: totrans-175
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`Route`组件的`component`属性允许我们指定要渲染的组件。或者，我们可以使用`render`属性来指定调用一个返回React元素的函数，如下例所示：'
-- en: '[PRE22]'
-  id: totrans-176
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE22]'
-- en: This approach is similar to using the `component` attribute, but it may be useful
-    for inline rendering and when we need to pass values to the element.
-  id: totrans-177
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这种方法类似于使用`component`属性，但它可能对于内联渲染和当我们需要向元素传递值时很有用。
-- en: The `Route` component also allows us to specify the `children` attribute. As
-    with `render`, we can assign a function to this attribute, but the elements returned
-    by that function will *always* be rendered, regardless of whether the path matches
-    or not.
-  id: totrans-178
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 路由组件还允许我们指定`children`属性。与`render`一样，我们可以将一个函数赋给这个属性，但该函数返回的元素将*始终*被渲染，无论路径是否匹配。
-- en: 'Consider the following example:'
-  id: totrans-179
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 考虑以下示例：
-- en: '[PRE23]'
-  id: totrans-180
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE23]'
-- en: The `Footer` component will always be rendered, even if the path `/footer` doesn't match.
-  id: totrans-181
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`Footer`组件将始终被渲染，即使路径`/footer`不匹配。'
-- en: Nested Views
-  id: totrans-182
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 嵌套视图
-- en: In the preceding examples, we implemented view navigation in the `App` component by
-    using the `Switch`, `Route`, and `Link` components provided by React Router. We can
-    use these routing components inside of any other component so that we can build
-    nested views and nested routes.
-  id: totrans-183
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在前面的示例中，我们通过使用React Router提供的`Switch`、`Route`和`Link`组件，在`App`组件中实现了视图导航。我们可以在任何其他组件中使用这些路由组件，以便我们可以构建嵌套视图和嵌套路由。
-- en: Let's try to illustrate this with an example. Suppose that we want to add a
-    list of winemakers to our application. We can add a new item to the navigation
-    bar that allows us to navigate to a page showing that list.
-  id: totrans-184
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们尝试用一个例子来说明这一点。假设我们想在我们的应用程序中添加一个酿酒师列表。我们可以在导航栏中添加一个新项，允许我们导航到一个显示该列表的页面。
-- en: 'The following screenshot shows how the new layout will appear:'
-  id: totrans-185
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 以下屏幕截图显示了新布局的外观：
-- en: '![](Images/27b9a00c-cc5f-4cf9-9130-728896366abe.png)'
-  id: totrans-186
-  prefs: []
-  type: TYPE_IMG
-  zh: '![](Images/27b9a00c-cc5f-4cf9-9130-728896366abe.png)'
-- en: 'So, let''s change the `App` component''s JSX markup, as follows:'
-  id: totrans-187
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 因此，让我们更改`App`组件的JSX标记，如下所示：
-- en: '[PRE24]'
-  id: totrans-188
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE24]'
-- en: We imported the `WineMakers` component, defined a route that maps the `/winemakers`
-    path to the new component, and added a link to navigate to it.
-  id: totrans-189
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们导入了`WineMakers`组件，定义了一个将`/winemakers`路径映射到新组件的路由，并添加了一个链接以导航到它。
-- en: 'We can implement the list of winemakers as follows:'
-  id: totrans-190
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以如下实现酿酒师列表：
-- en: '[PRE25]'
-  id: totrans-191
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE25]'
-- en: The `WineMakers` component has the `renderWineMakersList()` method that returns
-    the React element implementing a list of links to each winemaker. This method
-    is used as the value of the `render` attribute of the route matching the `/winemakers`
-    path in the `render()` method of the component. The other routes get the path
-    pointing to each specific winemaker and render the `WineMaker` component according
-    to the identifier code.
-  id: totrans-192
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`WineMakers`组件具有`renderWineMakersList()`方法，该方法返回实现每个酿酒师链接列表的React元素。此方法用作组件`render()`方法中与`/winemakers`路径匹配的路由的`render`属性的值。其他路由获取指向每个特定酿酒师的路径，并根据标识码渲染`WineMaker`组件。'
-- en: You may notice that we are implementing a view in the `WineMakers` component
-    that is shown inside of the view implemented in the `App` component. In other
-    words, we implement nested views by composing components that implement views.
-  id: totrans-193
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 您可能会注意到，我们正在`WineMakers`组件中实现一个视图，该视图显示在`App`组件中实现的视图内。换句话说，我们通过组合实现视图的组件来实现嵌套视图。
-- en: Path Parameters
-  id: totrans-194
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 路径参数
-- en: 'The `render()` method of the `WineMakers` component implements the resulting
-    view as follows:'
-  id: totrans-195
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '`WineMakers`组件的`render()`方法如下实现最终视图：'
-- en: '[PRE26]'
-  id: totrans-196
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE26]'
-- en: This code is straightforward, and it works, but it forces us to add a new route whenever
-    a new winemaker is added to our list.
-  id: totrans-197
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 这段代码很简单，而且有效，但它迫使我们每当在我们的列表中添加新的酿酒师时都要添加一个新的路由。
-- en: 'We can avoid this by using `path` parameters, as in the following code:'
-  id: totrans-198
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们可以通过使用`path`参数来避免这种情况，如下面的代码所示：
-- en: '[PRE27]'
-  id: totrans-199
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE27]'
-- en: As you can see, we can now use a single route pointing to a specific winemaker
-    by specifying a `:code` parameter. The colon in the path expression indicates
-    that the following portion of the URL is a variable value. You may also notice
-    that we used the `component` attribute instead of the `render` attribute. In fact,
-    in this case, we do not need to explicitly pass the winemaker's code to the `WineMaker`
-    component. React Router does it for us, by providing a special object in the `props`
-    property.
-  id: totrans-200
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 如您所见，我们现在可以通过指定`:code`参数来使用指向特定酿酒师的单个路由。路径表达式中的冒号表示URL的后续部分是变量值。您可能还会注意到，我们使用了`component`属性而不是`render`属性。实际上，在这种情况下，我们不需要将酿酒师的代码显式传递给`WineMaker`组件。React
-    Router为我们做到了这一点，通过在`props`属性中提供一个特殊对象。
-- en: 'Let''s take a look at the `WineMaker` component implementation:'
-  id: totrans-201
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 让我们看一下`WineMaker`组件的实现：
-- en: '[PRE28]'
-  id: totrans-202
-  prefs: []
-  type: TYPE_PRE
-  zh: '[PRE28]'
-- en: In the component's constructor, we define the list of winemakers as an array
-    of objects.
-  id: totrans-203
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在组件的构造函数中，我们将酿酒师列表定义为对象数组。
-- en: In the `render()` method, we look for the winemaker to display by comparing
-    the `code` property of each `winemaker` object in the array with the `match.params.code` property
-    provided by `this.props`.
-  id: totrans-204
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在`render()`方法中，我们通过将数组中每个`winemaker`对象的`code`属性与`match.params.code`属性（由`this.props`提供）进行比较来查找要显示的酿酒师。
-- en: We have implemented the `winemakers` list as a property of the `WineMaker` component,
-    and not as a property of the `state` object because since the list is embedded
-    into the code and shouldn't change, we do not need to implement it as a `state`
-    property. Remember that we only identify data that changes over time as a state.
-  id: totrans-205
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们将`winemakers`列表实现为`WineMaker`组件的属性，而不是`state`对象的属性，因为由于列表嵌入到代码中并且不应该更改，我们不需要将其实现为`state`属性。请记住，我们只将随时间变化，我们只将随时间变化的数据标识为状态。
-- en: The object we find is used to appropriately render the data about the `WineMaker`.
-  id: totrans-206
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们找到的对象用于适当地渲染有关`WineMaker`的数据。
-- en: 'Generally, a React component reached via a route receives the `match` object
-    in the `this.props` property. This object contains information about the matching
-    path in the `Route` definition. In particular, the following properties of the
-    `match` object are available:'
-  id: totrans-207
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 通常，通过路由到达的React组件在`this.props`属性中接收`match`对象。该对象包含有关`Route`定义中匹配路径的信息。特别是，`match`对象的以下属性可用：
-- en: '`params`: This is an object whose properties match the parameters in the path; that
-    is, the dynamic parts, preceded by colons'
-  id: totrans-208
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`params`：这是一个对象，其属性与路径中的参数匹配；也就是说，动态部分，前面有冒号'
-- en: '`isExact`: This is a Boolean indicating that the URL matches the path'
-  id: totrans-209
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`isExact`：这是一个布尔值，指示URL是否与路径匹配'
-- en: '`path`: This is the string assigned to the `path` attribute of the selected
-    route'
-  id: totrans-210
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`path`：这是分配给所选路由的`path`属性的字符串'
-- en: '`url`: This is the URL that matches the route''s path'
-  id: totrans-211
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: '`url`：这是与路由路径匹配的URL'
-- en: 'We can see the final result by performing the following steps. We open the
-    existing project, `my-shop-05`, in order to show the results of the previous code:'
-  id: totrans-212
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 通过执行以下步骤，我们可以看到最终结果。我们打开现有的项目`my-shop-05`，以展示之前代码的结果：
-- en: Open a console window
-  id: totrans-213
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 打开一个控制台窗口
-- en: Move to the `my-shop-05` folder
-  id: totrans-214
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 转到`my-shop-05`文件夹
-- en: Run `npm install`
-  id: totrans-215
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm install`
-- en: Run `npm start`
-  id: totrans-216
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 运行`npm start`
-- en: 'Activity: Adding a View About Shipping Methods'
-  id: totrans-217
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 活动：添加有关运输方法的视图
-- en: '**Scenario**'
-  id: totrans-218
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**场景**'
-- en: We want to add a section to our catalog app containing information about the available
-    shipping methods.
-  id: totrans-219
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 我们希望在我们的目录应用中添加一个包含有关可用运输方法信息的章节。
-- en: '**Aim**'
-  id: totrans-220
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**目标**'
-- en: The aim of this activity is to explore the components provided by React Routing.
-  id: totrans-221
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 本活动的目的是探索React路由提供的组件。
-- en: '**Steps for Completion**'
-  id: totrans-222
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**完成步骤**'
-- en: Consider the project that was changed in the previous activity (or the existing project
-    in the `my-cart-03` folder).
-  id: totrans-223
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 考虑在前一活动中更改的项目（或位于`my-cart-03`文件夹中的现有项目）。
-- en: Create a `ShippingMethods` component, showing a list of available shipping methods,
-    and a `ShippingMethod` component, showing the details of each shipping method,
-    according to a code passed via `props` (available shipping methods include **Economic
-    delivery** (**ECO**), **Standard delivery** (**STD**), and **Express delivery**
-    (**EXP**)).
-  id: totrans-224
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 创建一个`ShippingMethods`组件，显示可用运输方法的列表，以及一个`ShippingMethod`组件，根据通过`props`传递的代码显示每个运输方法的详细信息（可用的运输方法包括**经济配送**（**ECO**）、**标准配送**（**STD**）和**快递配送**（**EXP**））。
-- en: Create a navigation bar and a routing configuration that allow us to navigate through
-    the `Catalog` and `Shipping` method views.
-  id: totrans-225
-  prefs:
-  - PREF_OL
-  type: TYPE_NORMAL
-  zh: 创建一个导航栏和一个路由配置，允许我们在`Catalog`和`Shipping`方法视图之间导航。
-- en: '**Solution**'
-  id: totrans-226
-  prefs: []
-  type: TYPE_NORMAL
-  zh: '**解决方案**'
-- en: A possible solution is the one contained in the `my-cart-04` folder at `Code/Chapter-3`.
-  id: totrans-227
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 一个可能的解决方案是位于`Code/Chapter-3`中的`my-cart-04`文件夹中的那个。
-- en: Summary
-  id: totrans-228
-  prefs:
-  - PREF_H1
-  type: TYPE_NORMAL
-  zh: 总结
-- en: 'In this chapter, we learned how to manage user interaction. In particular,
-    we have covered the following things:'
-  id: totrans-229
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 在本章中，我们学习了如何管理用户交互。特别是，我们涵盖了以下内容：
-- en: Managed events that don't involve changes to a component's state
-  id: totrans-230
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 管理不涉及组件状态变化的事件
-- en: Handled events that involve changes to a component's state
-  id: totrans-231
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 处理涉及组件状态变化的事件
-- en: Explored the component lifecycle and learned how to customize each phase
-  id: totrans-232
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 探索了组件生命周期并学习了如何自定义每个阶段
-- en: Used React Router's components to configure navigation between components
-  id: totrans-233
-  prefs:
-  - PREF_UL
-  type: TYPE_NORMAL
-  zh: 使用React Router的组件来配置组件之间的导航
-- en: This chapter concludes the book. It provided the basics for understanding how
-    React works and how to build React-based applications. We started with an introduction
-    to React and then explored creating components in detail. We finished with a look
-    at how to manage user interactivity with React.
-  id: totrans-234
-  prefs: []
-  type: TYPE_NORMAL
-  zh: 本章为本书的结尾。它提供了理解React工作原理以及如何构建基于React的应用程序的基础知识。我们从React的简介开始，然后详细探讨了创建组件的过程。最后，我们研究了如何使用React管理用户交互。