From ddf1c3cca3361cb76e55e9701190119c47afdf71 Mon Sep 17 00:00:00 2001
From: x-cold <lxstart@outlook.com>
Date: Mon, 13 Dec 2021 00:49:46 +0800
Subject: [PATCH 01/39] feat: translate learn/index into Chinese

---
 beta/src/pages/learn/index.md | 175 +++++++++++++++++-----------------
 1 file changed, 85 insertions(+), 90 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 0df815d1a6..0defa4addc 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -1,27 +1,27 @@
 ---
-title: Quick Start
+title: 开始
 ---
 
 <Intro>
 
-Welcome to the React documentation! Here is an overview of what you can find on this site.
+欢迎阅读 React 文档! 此文档是您在本站点能找到的信息的概览。
 
 </Intro>
 
 <YouWillLearn>
 
-* [How to set up React](/learn/installation)
-* [How to think about building user interfaces with React](/learn/thinking-in-react)
-* [How to get something rendering on the screen](/learn/describing-the-ui)
-* [How to make your user interface respond to interactions](/learn/adding-interactivity)
-* [How to keep your logic maintainable as your app grows](/learn/managing-state)
-* [How to step outside React when necessary](/learn/escape-hatches)
+* [如何安装 React](/learn/installation)
+* [如何思考用 React 构建用户界面](/learn/thinking-in-react)
+* [如何在屏幕中渲染内容](/learn/describing-the-ui)
+* [如何让您的用户界面响应交互](/learn/adding-interactivity)
+* [随着您的应用的增长，如何保持逻辑的可维护性](/learn/managing-state)
+* [必要时如何使用安全舱逃离 React](/learn/escape-hatches)
 
 </YouWillLearn>
 
-## Introduction {/*introduction*/}
+## 介绍
 
-This is a tiny React app. To get your first taste of React, **edit the code below** and make it display your name:
+这是一个最基本的 React 应用。用于让您第一次品尝 React，**编辑下面的代码** 然后让它显示您的名字：
 
 <Sandpack>
 
@@ -43,29 +43,29 @@ export default function App() {
 
 </Sandpack>
 
-### What is React? {/*what-is-react*/}
+### React 是什么？
 
-React is a JavaScript library for building user interfaces.
+React 是一个用于构建用户界面的 JavaScript 库
 
-React stands at the intersection of design and programming. **It lets you take a complex user interface, and break it down into nestable and reusable pieces called ["components"](/learn/your-first-component) that fit well together.** If you have a programming background, this might remind you of making a program out of functions. If you're a designer, this might remind you of composing a design out of layers. If you're new to both disciplines, that's okay! Many people get into them with React. Using React might also remind you of building a castle out of toy bricks. Sometimes, it's even fun.
+React 擅长交互设计和编程。**他让您创建复杂的用户界面，并且将其分解为[组件](/learn/your-first-component)，指的是可嵌套和可重用的部分，可以很好的进行组合。** 如果您已经有编程的背景，这可能会让您想起用函数来编程。如果您是一名设计师，它可能会让您联想到图层组合设计。如果您对这两门学科都是新手，那也没关系。很多人会通过 React 去掌握他们。使用 React 也许还会让您想起用玩具砖块来建造城堡。有时候，他甚至非常有趣。
 
-React does not prescribe how you build your entire application. It helps you define and compose components, but stays out of your way in other questions. This means that you will either pick one of the ecosystem solutions for problems like routing, styling, and data fetching, or [use a framework](/learn/start-a-new-react-project#building-with-react-and-a-framework) that provides great defaults.
+React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)
 
-### What can you do with React? {/*what-can-you-do-with-react*/}
+### 您可以用 React 做什么？
 
-Quite a lot, really! People use React to create all kinds of user interfaces--from small controls like buttons and dropdowns to entire apps. **These docs will teach you to use React on the web.** However, most of what you'll learn here applies equally for [React Native](https://reactnative.dev/) which lets you build apps for Android, iOS, and even [Windows and macOS](https://microsoft.github.io/react-native-windows/).
+实际上，大量开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教您在网络上使用 React。** 然而，您在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让您为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
 
-If you're curious which products you use everyday are built with React, you can install the [React Developer Tools](/learn/react-developer-tools). Whenever you visit an app or a website built with React (like this one!), its icon will light up in the toolbar.
+如果您好奇您日常使用的哪些产品是用 React 构建的，您可以安装 [React Developer Tools](/learn/react-developer-tools)。 每当您访问使用 React 构建的应用程序或网站时（就像这个文档网站！），它的图标会在工具栏中亮起。
 
-### React uses JavaScript {/*react-uses-javascript*/}
+### React 使用 JavaScript
 
-With React, you will describe your visual logic in JavaScript. This takes some practice. If you're learning JavaScript and React at the same time, you're not alone--but at times, it will be a little bit more challenging! On the upside, **much of learning React is really learning JavaScript,** which means you will take your learnings far beyond React.
+使用 React，您将在 JavaScript 中可视化地描述您的逻辑。这需要一些练习。如果您同时学习 JavaScript 和 React，很多人都这么干，但有时，它会更具挑战性！ 从好的方面来说，**大部分学习 React 都是在学习 JavaScript，** 这意味着您将学到的东西远远超出 React。
 
-Check your knowledge level with [this JavaScript overview](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). It will take you between 30 minutes and an hour but you will feel more confident learning React. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are two great resources to use as a reference.
+使用 [此 JavaScript 概述](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 检查您的知识水平。这将花费您 30 分钟到一个小时，但您会更有信心学习 React。 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 和 [javascript.info](https://javascript.info/) 是两个很好的参考资源。
 
-<DeepDive title="Installation (optional)">
+<DeepDive title="安装 (可选)">
 
-If you're just starting to learn React, you don't need to install anything. Instead, we recommend to follow along using the interactive sandboxes that appear throughout this site. They look like this:
+如果您刚开始学习 React，您不需要安装任何东西。相反，我们建议您继续使用本网站中出现的 CodeSandbox。 它们看起来像这样：
 
 <Sandpack>
 
@@ -81,23 +81,23 @@ export default function App() {
 
 </Sandpack>
 
-When you're ready to start a project, there are several options. You can write React code online and save your work in an environment like [CodeSandbox](https://react.new/). You can add React as a `<script>` tag to any HTML file to try it for a small part of your existing webpage. Or you can create a whole new React app, with or without a framework. **Use the [Installation](/learn/installation) page to pick what works best for you--but you can skip it for now.**
+当您准备好开始一个项目时，有多种选择。您可以在线编写 React 代码并将您的代码保存在类似 [CodeSandbox](https://react.new/) 的环境中。您也可以将 React 作为 `<script>` 标签添加到任何 HTML 文件中，以便于在现有网页的一小部分中试用它。或者您可以创建一个全新的 React 应用程序，有或没有框架都行。**使用 [安装](/learn/installation) 页面选择最适合您的方法——但您现在可以跳过它。**
 
 </DeepDive>
 
-## Learn React {/*learn-react*/}
+## 学习 React
 
-There are a few ways to get started:
+有几种方法可以开始：
 
-- If you're **feeling impatient and learn by example,** head straight to **[Thinking in React](/learn/thinking-in-react)**. This tutorial doesn't explain the syntax in detail, but it will give you an idea of what it feels like to build user interfaces with React.
-- If you're **familiar with the concepts and want to browse the available APIs**, check out **[the API reference](/reference)**.
-- The rest of this documentation is organized in chapters that **introduce each concept step by step**--with many interactive examples, detailed explanations, and challenges to check your understanding. You don't have to read them sequentially, but each next page assumes you're familiar with concepts from the previous pages.
+- 如果您**觉得迫不及待并通过例子学习**直接前往 **[React 哲学](/learn/thinking-in-react)**。 本教程不会详细解释语法，但它会让您了解使用 React 构建用户界面的感受。
+- 如果您**熟悉这些概念并希望浏览可用的 API**，请查看 **[API 参考](/reference)**。
+- 本文档的其余部分按章节组织，**逐步介绍每个概念**--带有许多交互式例子、详细说明和挑战以保证您的理解。 您不必按顺序阅读它们，但每个下一页都假设您熟悉前几页中的概念。
 
-To save you time, we provide **a brief overview of each chapter** below.
+为了节省您的时间，我们在下面提供**每章的简要概述**。 
 
-### Chapter 1 overview: Describing the UI {/*chapter-1-overview-describing-the-ui*/}
+### 第 1 章概述：描述 UI
 
-React applications are built from isolated pieces of UI called ["components"](/learn/your-first-component). A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here, a *parent* `Gallery` component renders three *child* `Profile` components:
+React 应用程序由称为 ["components"](/learn/your-first-component) 的独立 UI 部分构建。 React 组件是一个 JavaScript 函数，您可以在其中添加标记。 组件可以小到一个按钮，也可以大到整个页面。下面的例子中，一个*父*组件 `Gallery` 渲染了三个*子*组件 `Profile` ：
 
 <Sandpack>
 
@@ -115,7 +115,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -131,9 +131,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-The markup in the example above looks a lot like HTML. This syntax is called [JSX](/learn/writing-markup-with-jsx), and it is a bit stricter (for example, you have to close all the tags). Note that the CSS class is specified as `className` in JSX.
+上面例子中的标记看起来很像 HTML。 这种语法叫做 [JSX](/learn/writing-markup-with-jsx)，它更严格一些（例如，所有标签必须闭合）。请注意，CSS 类在 JSX 中指定为 `className`。
 
-Just like you can pass some information to the browser `<img>` tag, you can also pass information to your own components like `<Profile>`. Such information is called [_props_](/learn/passing-props-to-a-component). Here, three `<Profile>`s receive different props:
+就像你可以将一些信息传递给浏览器`<img>` 标签一样，你也可以将信息传递给你自己的组件，比如`<Profile>`。 此类信息称为 [_props_](/learn/passing-props-to-a-component)。 下面的例子中，三个 `<Profile>` 接收不同的 props：
 
 <Sandpack>
 
@@ -151,7 +151,7 @@ function Profile({ name, imageUrl }) {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家</h1>
       <Profile
         name="Lin Lanying"
         imageUrl="https://i.imgur.com/1bX5QH6.jpg"
@@ -176,9 +176,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-You might wonder why `className="avatar"` uses quotes but `src={imageUrl}` uses curly braces. In JSX, curly braces are like a ["window into JavaScript"](/learn/javascript-in-jsx-with-curly-braces). They let you run a bit of JavaScript right in your markup! So `src={imageUrl}` reads the `imageUrl` prop declared on the first line and passed from the parent `Gallery` component.
+你可能想知道为什么 `className="avatar"` 使用引号，而 `src={imageUrl}` 使用花括号。在 JSX 中，花括号就像一个 ["进入 JavaScript 的窗口"](/learn/javascript-in-jsx-with-curly-braces)。 它们让您可以在标记中直接运行一些 JavaScript！所以 `src={imageUrl}` 读取第一行声明的 `imageUrl` prop，并从父组件 `Gallery` 传递过来。
 
-In the above example, all the data was written directly in markup. However, you'll often want to keep it separately. Here, the data is kept in an array. In React, you use JavaScript functions like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to [render lists](/learn/rendering-lists) of things.
+在上面的例子中，所有的数据都是直接写在标记中的。但是，您通常希望将其单独保存。下面的例子，数据保存在一个数组中。在 React 中，你使用 JavaScript 函数，如 [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 来[渲染列表](/learn/rendering-lists) 的东西。 
 
 <Sandpack>
 
@@ -189,7 +189,7 @@ import Profile from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家</h1>
       {people.map(person => (
         <Profile
           key={person.id}
@@ -252,24 +252,24 @@ img { margin: 0 10px 10px 0; }
 
 <LearnMore path="/learn/describing-the-ui">
 
-Read **[Describing the UI](/learn/describing-the-ui)** to learn how to make things appear on the screen, including declaring components, importing them, writing JSX with the curly braces, and writing conditions and lists.
+阅读**[描述 UI](/learn/describing-the-ui)** 了解如何让东西出现在屏幕上，包括声明组件、导入它们、用大括号编写 JSX 以及编写条件和列表。
 
 </LearnMore>
 
-### Chapter 2 overview: Adding interactivity {/*chapter-2-overview-adding-interactivity*/}
+### 第 2 章概述：添加交互性
 
-Components often need to change what’s on the screen as a result of an interaction. Typing into the form should update the input field, clicking “next” on an image carousel should change which image is displayed, clicking “buy” puts a product in the shopping cart. Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called [*state*](/learn/state-a-components-memory).
+作为交互的结果，组件通常需要更改屏幕上的内容。输入表单应该更新输入字段，单击图像轮播上的“下一步”应该更改显示的图像，单击“购买”将产品放入购物车。组件需要“记住”一些东西：当前输入值、当前图像、购物车。在 React 中，这种特定于组件的内存称为 [*state*](/learn/state-a-components-memory)。
 
-You can add state to a component with a [`useState`](/reference/usestate) Hook. Hooks are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+您可以使用 [`useState`](/reference/usestate) Hook 向组件添加 state。 Hooks 是一种特殊的函数，可以让你的组件使用 React 特性（state 是这些特性之一）。`useState` Hook 允许你声明一个 state 变量。它接受初始 state 并返回一对值：当前 state 和一个允许您更新它的 state 设置器函数。
 
-This `Gallery` component needs to remember two things: the current image index (initially, `0`), and whether the user has toggled "Show details" (initially, `false`):
+这个 `Gallery` 组件需要记住两件事：当前图像索引（默认值为 `0`），以及用户是否切换了“显示详细信息”（默认值为 `false`）： 
 
 ```js
 const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-Notice how clicking the buttons updates the screen:
+请注意单击按钮如何更新屏幕：
 
 <Sandpack>
 
@@ -293,17 +293,16 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleNextClick}>
-        Next
+        下一个
       </button>
       <h2>
-        <i>{sculpture.name} </i>
-        by {sculpture.artist}
+        {sculpture.artist} 的 <i>{sculpture.name} </i>
       </h2>
       <h3>
-        ({index + 1} of {sculptureList.length})
+        ({index + 1} / {sculptureList.length})
       </h3>
       <button onClick={handleMoreClick}>
-        {showMore ? 'Hide' : 'Show'} details
+        {showMore ? '隐藏' : '显示'} 详情
       </button>
       {showMore && <p>{sculpture.description}</p>}
       <img
@@ -367,7 +366,7 @@ export const sculptureList = [{
 }, {
   name: 'Terracotta Army',
   artist: 'Unknown Artist',
-  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consited of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
   url: 'https://i.imgur.com/HMFmH6m.jpg',
   alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
 }, {
@@ -408,7 +407,7 @@ button {
 
 </Sandpack>
 
-State can hold complex values, too. For example, if you're implementing a form, you can keep an object in state with different fields. The `...` syntax in the below example lets you [create new objects based on existing ones](/learn/updating-objects-in-state).
+State 也可以保存复杂的值。例如，如果您正在实现一个表单，您可以在 state 中保持一个具有不同字段的对象。 下面示例中的 `...` 语法允许您[基于现有对象创建新对象](/learn/updating-objects-in-state)。
 
 <Sandpack>
 
@@ -446,14 +445,14 @@ export default function Form() {
   return (
     <>
       <label>
-        First name:
+        名：
         <input
           value={person.firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:
+        姓：
         <input
           value={person.lastName}
           onChange={handleLastNameChange}
@@ -483,7 +482,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
 
 </Sandpack>
 
-You can also hold arrays in state. This lets you add, remove, or change things in a list in response to user interactions. Depending on what you want to do, there are [different ways to make new arrays from existing ones](/learn/updating-arrays-in-state).
+您还可以将数组保持在 state。 这允许您添加、删除或更改列表中的内容以响应用户交互。根据您想要做什么，这里有[从现有数组创建新数组的不同方法](/learn/updating-arrays-in-state)。
 
 <Sandpack>
 
@@ -498,7 +497,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>鼓舞人心的雕塑家：</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -509,7 +508,7 @@ export default function List() {
           ...artists,
           { id: nextId++, name: name }
         ]);
-      }}>Add</button>
+      }}>添加</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -524,15 +523,15 @@ export default function List() {
 
 <LearnMore path="/learn/adding-interactivity">
 
-Read **[Adding Interactivity](/learn/adding-interactivity)** to learn how to update the screen on interaction, including adding event handlers, declaring and updating state, and the different ways to update objects and arrays in state.
+阅读**[添加交互性](/learn/adding-interactivity)** 了解如何在交互时更新屏幕，包括添加事件处理程序、声明和更新 state，以及在 state 中更新对象和数组的不同方法。
 
 </LearnMore>
 
-### Chapter 3 overview: Managing state {/*chapter-3-overview-managing-state*/}
+### 第 3 章概述： 管理 State
 
-You'll often face a choice of _what exactly_ to put into state. Should you use one state variable or many? An object or an array? How should you [structure your state](/learn/choosing-the-state-structure)? The most important principle is to **avoid redundant state**. If some information never changes, it shouldn't be in state. If some information is received from parent by props, it shouldn't be in state. And if you can compute something from other props or state, it shouldn't be in state either!
+您经常会面临选择_究竟_要放入 state 的问题。 您应该使用一个 state 变量还是多个 state 变量？ 对象还是数组？ 你应该如何[构建你的 state](/learn/choosing-the-state-structure)？ 最重要的原则是**避免冗余 state**。 如果某些信息永远不会改变，它就不应该处于 state。 如果通过 props 从父组件收到一些信息，它不应该处于 state 中。 如果你可以从其他 props 或 state 计算出一些东西，它也不应该处于 state 中！
 
-For example, this form has a **redundant** `fullName` state variable:
+例如，这个表单有一个多余的 `fullName` state 变量：
 
 <Sandpack>
 
@@ -556,24 +555,23 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
       <label>
-        First name:{' '}
+        名：{' '}
         <input
           value={firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:{' '}
+        姓：{' '}
         <input
           value={lastName}
           onChange={handleLastNameChange}
         />
       </label>
-      <p>
-        Your ticket will be issued to: <b>{fullName}</b>
-      </p>
+      <h3>
+        您的姓名是：{fullName}
+      </h3>
     </>
   );
 }
@@ -585,7 +583,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-You can remove it and simplify the code by calculating `fullName` while the component is rendering:
+您可以通过在组件渲染时计算 `fullName` 来删除它并简化代码：
 
 <Sandpack>
 
@@ -608,24 +606,23 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
       <label>
-        First name:{' '}
+        名：{' '}
         <input
           value={firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:{' '}
+        姓：{' '}
         <input
           value={lastName}
           onChange={handleLastNameChange}
         />
       </label>
-      <p>
-        Your ticket will be issued to: <b>{fullName}</b>
-      </p>
+      <h3>
+        您的姓名是：{fullName}
+      </h3>
     </>
   );
 }
@@ -637,9 +634,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-This might seem like a small change, but many bugs in React apps are fixed this way!
-
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as ["lifting state up"](/learn/sharing-state-between-components), and it's one of the most common things you will do writing React code. For example, in an accordion like below, only one panel should be active at a time. Instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
+有时，您希望两个组件的 state 始终一起更改。要做到这一点，在它们两个中都删除该 state，将它移动到它们最近的公共父节点，然后通过 props 将它传递给它们。 这被称为["提升 state"](/learn/sharing-state-between-components)，这是编写 React 代码时最常见的事情之一。 例如，在像下面这样的手风琴中，一次应该只有一个面板处于激活状态。父组件不应该将激活 state 保存在每个单独的面板内，而是保存在父组件的 state 中并通过 props 指定给子组件。
 
 <Sandpack>
 
@@ -650,20 +645,20 @@ export default function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
     <>
-      <h2>Almaty, Kazakhstan</h2>
       <Panel
-        title="About"
+        title="配料"
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
-        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+        牛奶，茶包和肉桂棒。
       </Panel>
       <Panel
-        title="Etymology"
+        title="食谱"
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+        加热牛奶，将茶包放入锅中。
+        加入肉桂棒。
       </Panel>
     </>
   );
@@ -682,7 +677,7 @@ function Panel({
         <p>{children}</p>
       ) : (
         <button onClick={onShow}>
-          Show
+          展示
         </button>
       )}
     </section>
@@ -702,18 +697,18 @@ h3, p { margin: 5px 0px; }
 
 <LearnMore path="/learn/managing-state">
 
-Read **[Managing State](/learn/managing-state)** to learn how to keep your components maintainable, including how to structure state well, how to share it between components, and how to pass it deep into the tree.
+阅读 **[管理 State](/learn/managing-state)** 了解如何保持组件的可维护性，包括如何很好地构建 state，如何在组件之间共享 state，以及如何将 state 传递到树的深处。
 
 </LearnMore>
 
-## Next steps {/*next-steps*/}
+## 下一步
 
-This page was fast-paced! If you've read this far, you have already seen 80% of React you will use on a daily basis.
+这个页面是快节奏的！如果读到这里，您已经看到了日常使用 React 的 80%。
 
-Your next steps depend on what you'd like to do:
+您接下来的步骤取决于您想做什么：
 
-* Go to [Installation](/learn/installation) if you'd like to set up a React project locally.
-* Read [Thinking in React](/learn/thinking-in-react) if you'd like to see what building a UI in React feels like in practice.
-* Or, start with [Describing the UI](/learn/describing-the-ui) to get a closer look at the first chapter.
+* 如果您想在本地设置 React 项目，请转到 [安装](/learn/installation)。
+* 如果您想了解在 React 中构建 UI 在实践中是什么感觉，请阅读 [React 哲学](/learn/thinking-in-react)。
+* 或者，从 [描述 UI](/learn/describing-the-ui) 开始，仔细阅读第一章。
 
-And don't forget to check the [API Reference](/reference) when you need the API without the fluff!
+当您需要了解 API 必要的细节时，不要忘记阅读 [API 参考](/reference)！

From 9f9be5ce9103ec218bf36eb57be36bce603d38da Mon Sep 17 00:00:00 2001
From: x-cold <lxstart@outlook.com>
Date: Mon, 13 Dec 2021 00:52:50 +0800
Subject: [PATCH 02/39] fix: some details from pr comments

---
 beta/src/pages/learn/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 0defa4addc..4170cb8818 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -11,7 +11,7 @@ title: 开始
 <YouWillLearn>
 
 * [如何安装 React](/learn/installation)
-* [如何思考用 React 构建用户界面](/learn/thinking-in-react)
+* [如何用 React 的思考方式构建用户界面](/learn/thinking-in-react)
 * [如何在屏幕中渲染内容](/learn/describing-the-ui)
 * [如何让您的用户界面响应交互](/learn/adding-interactivity)
 * [随着您的应用的增长，如何保持逻辑的可维护性](/learn/managing-state)
@@ -47,13 +47,13 @@ export default function App() {
 
 React 是一个用于构建用户界面的 JavaScript 库
 
-React 擅长交互设计和编程。**他让您创建复杂的用户界面，并且将其分解为[组件](/learn/your-first-component)，指的是可嵌套和可重用的部分，可以很好的进行组合。** 如果您已经有编程的背景，这可能会让您想起用函数来编程。如果您是一名设计师，它可能会让您联想到图层组合设计。如果您对这两门学科都是新手，那也没关系。很多人会通过 React 去掌握他们。使用 React 也许还会让您想起用玩具砖块来建造城堡。有时候，他甚至非常有趣。
+React 擅长交互设计和编程。**它让您可以将一个复杂的用户界面，分解为可嵌套和可重用的片段，我们称之为[组件](/learn/your-first-component)，它们可以很好的进行组合。** 如果您已经有编程的背景，这可能会让您想起用函数来编程。如果您是一名设计师，它可能会让您联想到图层组合设计。如果您对这两门学科都是新手，那也没关系。很多人都是在接触 React 的过程中才熟悉它们的。使用 React 也许还会让您想起用玩具砖块来建造城堡。有时候，它甚至非常有趣。
 
 React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)
 
 ### 您可以用 React 做什么？
 
-实际上，大量开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教您在网络上使用 React。** 然而，您在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让您为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
+实际上，大量开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教您在 web 平台上使用 React。** 然而，您在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让您为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
 
 如果您好奇您日常使用的哪些产品是用 React 构建的，您可以安装 [React Developer Tools](/learn/react-developer-tools)。 每当您访问使用 React 构建的应用程序或网站时（就像这个文档网站！），它的图标会在工具栏中亮起。
 
@@ -529,7 +529,7 @@ export default function List() {
 
 ### 第 3 章概述： 管理 State
 
-您经常会面临选择_究竟_要放入 state 的问题。 您应该使用一个 state 变量还是多个 state 变量？ 对象还是数组？ 你应该如何[构建你的 state](/learn/choosing-the-state-structure)？ 最重要的原则是**避免冗余 state**。 如果某些信息永远不会改变，它就不应该处于 state。 如果通过 props 从父组件收到一些信息，它不应该处于 state 中。 如果你可以从其他 props 或 state 计算出一些东西，它也不应该处于 state 中！
+您经常会面临选择_究竟要把什么_放进 state 的问题。 您应该使用一个 state 变量还是多个 state 变量？ 对象还是数组？ 你应该如何[构建你的 state](/learn/choosing-the-state-structure)？ 最重要的原则是**避免冗余 state**。 如果某些信息永远不会改变，它就不应该处于 state。 如果某些信息是通过 props 从父组件收到的，它不应该处于 state 中。 如果某些信息可以从其他 props 或 state 计算得出，它也不应该处于 state 中！
 
 例如，这个表单有一个多余的 `fullName` state 变量：
 
@@ -634,7 +634,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-有时，您希望两个组件的 state 始终一起更改。要做到这一点，在它们两个中都删除该 state，将它移动到它们最近的公共父节点，然后通过 props 将它传递给它们。 这被称为["提升 state"](/learn/sharing-state-between-components)，这是编写 React 代码时最常见的事情之一。 例如，在像下面这样的手风琴中，一次应该只有一个面板处于激活状态。父组件不应该将激活 state 保存在每个单独的面板内，而是保存在父组件的 state 中并通过 props 指定给子组件。
+有时，您希望两个组件的 state 始终一起更改。要做到这一点，在它们两个中都删除该 state，将它移动到它们最近的公共父节点，然后通过 props 将它传递给它们。 这被称为["提升 state"](/learn/sharing-state-between-components)，这是编写 React 代码时最常见的事情之一。 例如，在像下面这样的手风琴组件中，一次应该只有一个面板处于激活状态。父组件不应该将激活 state 保存在每个单独的面板内，而是保存在父组件的 state 中并通过 props 指定给子组件。
 
 <Sandpack>
 
@@ -707,7 +707,7 @@ h3, p { margin: 5px 0px; }
 
 您接下来的步骤取决于您想做什么：
 
-* 如果您想在本地设置 React 项目，请转到 [安装](/learn/installation)。
+* 如果您想在本地创建一个 React 项目，请转到 [安装](/learn/installation)。
 * 如果您想了解在 React 中构建 UI 在实践中是什么感觉，请阅读 [React 哲学](/learn/thinking-in-react)。
 * 或者，从 [描述 UI](/learn/describing-the-ui) 开始，仔细阅读第一章。
 

From e164a2f05fc217963e29558c309f92a2f604c5e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Mon, 13 Dec 2021 22:55:20 +0800
Subject: [PATCH 03/39] Apply suggestions from code review

Co-authored-by: sooia <plus@outlook.at>
---
 beta/src/pages/learn/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 4170cb8818..8b89dbb974 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -12,16 +12,16 @@ title: 开始
 
 * [如何安装 React](/learn/installation)
 * [如何用 React 的思考方式构建用户界面](/learn/thinking-in-react)
-* [如何在屏幕中渲染内容](/learn/describing-the-ui)
+* [如何在屏幕上渲染内容](/learn/describing-the-ui)
 * [如何让您的用户界面响应交互](/learn/adding-interactivity)
 * [随着您的应用的增长，如何保持逻辑的可维护性](/learn/managing-state)
-* [必要时如何使用安全舱逃离 React](/learn/escape-hatches)
+* [必要时如何退出 React](/learn/escape-hatches)
 
 </YouWillLearn>
 
 ## 介绍
 
-这是一个最基本的 React 应用。用于让您第一次品尝 React，**编辑下面的代码** 然后让它显示您的名字：
+这是一个最基本的 React 应用。要获得React的初体验，**编辑下面的代码** 然后让它显示您的名字：
 
 <Sandpack>
 
@@ -45,11 +45,11 @@ export default function App() {
 
 ### React 是什么？
 
-React 是一个用于构建用户界面的 JavaScript 库
+React 是一个用于构建用户界面的 JavaScript 库。
 
 React 擅长交互设计和编程。**它让您可以将一个复杂的用户界面，分解为可嵌套和可重用的片段，我们称之为[组件](/learn/your-first-component)，它们可以很好的进行组合。** 如果您已经有编程的背景，这可能会让您想起用函数来编程。如果您是一名设计师，它可能会让您联想到图层组合设计。如果您对这两门学科都是新手，那也没关系。很多人都是在接触 React 的过程中才熟悉它们的。使用 React 也许还会让您想起用玩具砖块来建造城堡。有时候，它甚至非常有趣。
 
-React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)
+React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)。
 
 ### 您可以用 React 做什么？
 
@@ -61,7 +61,7 @@ React 没有规定要如何构建整个应用程序。它能帮助您定义和
 
 使用 React，您将在 JavaScript 中可视化地描述您的逻辑。这需要一些练习。如果您同时学习 JavaScript 和 React，很多人都这么干，但有时，它会更具挑战性！ 从好的方面来说，**大部分学习 React 都是在学习 JavaScript，** 这意味着您将学到的东西远远超出 React。
 
-使用 [此 JavaScript 概述](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 检查您的知识水平。这将花费您 30 分钟到一个小时，但您会更有信心学习 React。 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 和 [javascript.info](https://javascript.info/) 是两个很好的参考资源。
+使用 [此 JavaScript 概述](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 检查您的知识水平。这将花费您 30 分钟到一个小时，但您会更有信心学习 React。 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 和 [javascript.info](https://zh.javascript.info/) 是两个很好的参考资源。
 
 <DeepDive title="安装 (可选)">
 

From 2db5210e026864a02d639b96ea2f3f6f5fae5f4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Mon, 13 Dec 2021 22:56:32 +0800
Subject: [PATCH 04/39] Apply suggestions from code review

Co-authored-by: sooia <plus@outlook.at>
---
 beta/src/pages/learn/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 8b89dbb974..a5d32b5f93 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -89,7 +89,7 @@ export default function App() {
 
 有几种方法可以开始：
 
-- 如果您**觉得迫不及待并通过例子学习**直接前往 **[React 哲学](/learn/thinking-in-react)**。 本教程不会详细解释语法，但它会让您了解使用 React 构建用户界面的感受。
+- 如果您**觉得迫不及待并通过例子学习**，直接前往 **[React 哲学](/learn/thinking-in-react)**。 该教程不会详细解释语法，但它会让您了解使用 React 构建用户界面的感受。
 - 如果您**熟悉这些概念并希望浏览可用的 API**，请查看 **[API 参考](/reference)**。
 - 本文档的其余部分按章节组织，**逐步介绍每个概念**--带有许多交互式例子、详细说明和挑战以保证您的理解。 您不必按顺序阅读它们，但每个下一页都假设您熟悉前几页中的概念。
 
@@ -97,7 +97,7 @@ export default function App() {
 
 ### 第 1 章概述：描述 UI
 
-React 应用程序由称为 ["components"](/learn/your-first-component) 的独立 UI 部分构建。 React 组件是一个 JavaScript 函数，您可以在其中添加标记。 组件可以小到一个按钮，也可以大到整个页面。下面的例子中，一个*父*组件 `Gallery` 渲染了三个*子*组件 `Profile` ：
+React 应用程序由被称为 ["components"](/learn/your-first-component) 的独立 UI 部分构建。 React 组件是一个 JavaScript 函数，您可以在其中添加标记。 组件可以小到一个按钮，也可以大到整个页面。下面的例子中，一个*父*组件 `Gallery` 渲染了三个*子*组件 `Profile` ：
 
 <Sandpack>
 

From cba1db7985df883be9141028d9b2806b1128c8ef Mon Sep 17 00:00:00 2001
From: x-cold <lxstart@outlook.com>
Date: Mon, 13 Dec 2021 23:01:07 +0800
Subject: [PATCH 05/39] fix: anchors

---
 beta/src/pages/learn/index.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index a5d32b5f93..a20e2bc244 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -19,7 +19,7 @@ title: 开始
 
 </YouWillLearn>
 
-## 介绍
+## 介绍 {/*introduction*/}
 
 这是一个最基本的 React 应用。要获得React的初体验，**编辑下面的代码** 然后让它显示您的名字：
 
@@ -43,7 +43,7 @@ export default function App() {
 
 </Sandpack>
 
-### React 是什么？
+### React 是什么？{/*what-is-react*/}
 
 React 是一个用于构建用户界面的 JavaScript 库。
 
@@ -51,13 +51,13 @@ React 擅长交互设计和编程。**它让您可以将一个复杂的用户界
 
 React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)。
 
-### 您可以用 React 做什么？
+### 您可以用 React 做什么？{/*what-can-you-do-with-react*/}
 
 实际上，大量开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教您在 web 平台上使用 React。** 然而，您在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让您为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
 
 如果您好奇您日常使用的哪些产品是用 React 构建的，您可以安装 [React Developer Tools](/learn/react-developer-tools)。 每当您访问使用 React 构建的应用程序或网站时（就像这个文档网站！），它的图标会在工具栏中亮起。
 
-### React 使用 JavaScript
+### React 使用 JavaScript {/*react-uses-javascript*/}
 
 使用 React，您将在 JavaScript 中可视化地描述您的逻辑。这需要一些练习。如果您同时学习 JavaScript 和 React，很多人都这么干，但有时，它会更具挑战性！ 从好的方面来说，**大部分学习 React 都是在学习 JavaScript，** 这意味着您将学到的东西远远超出 React。
 
@@ -85,7 +85,7 @@ export default function App() {
 
 </DeepDive>
 
-## 学习 React
+## 学习 React {/*learn-react*/}
 
 有几种方法可以开始：
 
@@ -95,7 +95,7 @@ export default function App() {
 
 为了节省您的时间，我们在下面提供**每章的简要概述**。 
 
-### 第 1 章概述：描述 UI
+### 第 1 章概述：描述 UI {/*chapter-1-overview-describing-the-ui*/}
 
 React 应用程序由被称为 ["components"](/learn/your-first-component) 的独立 UI 部分构建。 React 组件是一个 JavaScript 函数，您可以在其中添加标记。 组件可以小到一个按钮，也可以大到整个页面。下面的例子中，一个*父*组件 `Gallery` 渲染了三个*子*组件 `Profile` ：
 
@@ -256,7 +256,7 @@ img { margin: 0 10px 10px 0; }
 
 </LearnMore>
 
-### 第 2 章概述：添加交互性
+### 第 2 章概述：添加交互性 {/*chapter-2-overview-adding-interactivity*/}
 
 作为交互的结果，组件通常需要更改屏幕上的内容。输入表单应该更新输入字段，单击图像轮播上的“下一步”应该更改显示的图像，单击“购买”将产品放入购物车。组件需要“记住”一些东西：当前输入值、当前图像、购物车。在 React 中，这种特定于组件的内存称为 [*state*](/learn/state-a-components-memory)。
 
@@ -527,7 +527,7 @@ export default function List() {
 
 </LearnMore>
 
-### 第 3 章概述： 管理 State
+### 第 3 章概述： 管理 State {/*chapter-3-overview-managing-state*/}
 
 您经常会面临选择_究竟要把什么_放进 state 的问题。 您应该使用一个 state 变量还是多个 state 变量？ 对象还是数组？ 你应该如何[构建你的 state](/learn/choosing-the-state-structure)？ 最重要的原则是**避免冗余 state**。 如果某些信息永远不会改变，它就不应该处于 state。 如果某些信息是通过 props 从父组件收到的，它不应该处于 state 中。 如果某些信息可以从其他 props 或 state 计算得出，它也不应该处于 state 中！
 
@@ -701,7 +701,7 @@ h3, p { margin: 5px 0px; }
 
 </LearnMore>
 
-## 下一步
+## 下一步 {/*next-steps*/}
 
 这个页面是快节奏的！如果读到这里，您已经看到了日常使用 React 的 80%。
 

From 61e9567656d9cdb06bbdf7ae03f9006bba536de1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Sat, 18 Dec 2021 21:24:25 +0800
Subject: [PATCH 06/39] Update beta/src/pages/learn/index.md

Co-authored-by: sooia <plus@outlook.at>
---
 beta/src/pages/learn/index.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index a20e2bc244..09f1e5ae92 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -1,6 +1,8 @@
 ---
 title: 开始
----
+translator:
+ - x-cold
+ - sooia（刘俊）
 
 <Intro>
 

From 0d6e80775402fd123c6ea954671705e3f111fe0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Mon, 20 Dec 2021 10:43:37 +0800
Subject: [PATCH 07/39] Update beta/src/pages/learn/index.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 09f1e5ae92..de7ad5d3c0 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -2,7 +2,7 @@
 title: 开始
 translator:
  - x-cold
- - sooia（刘俊）
+ - sooia
 
 <Intro>
 

From 31a9adfa6885286ab61946bc67fa33b2ed9797da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Thu, 23 Dec 2021 23:07:23 +0800
Subject: [PATCH 08/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index de7ad5d3c0..fa75b66935 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -298,6 +298,7 @@ export default function Gallery() {
         下一个
       </button>
       <h2>
+        <i>{sculpture.name} </i>
         {sculpture.artist} 的 <i>{sculpture.name} </i>
       </h2>
       <h3>

From 614e3c24ed92e027468e0a2a2356b18f917b7ba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Thu, 23 Dec 2021 23:08:41 +0800
Subject: [PATCH 09/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index fa75b66935..d9ebb63494 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -558,6 +558,7 @@ export default function Form() {
 
   return (
     <>
+      <h2>Let’s check you in</h2>
       <label>
         名：{' '}
         <input

From dc3d00c1206d6ea3382c3f227b6532f0e7a5c231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Thu, 23 Dec 2021 23:09:16 +0800
Subject: [PATCH 10/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index d9ebb63494..222d5eb8e1 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -610,6 +610,7 @@ export default function Form() {
 
   return (
     <>
+      <h2>Let’s check you in</h2>
       <label>
         名：{' '}
         <input

From 2e6fafe02f6540167cfde3240f77fd59b20cf74a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Thu, 23 Dec 2021 23:11:15 +0800
Subject: [PATCH 11/39] Apply suggestions from code review

---
 beta/src/pages/learn/index.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 222d5eb8e1..723fa6cde0 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -573,9 +573,9 @@ export default function Form() {
           onChange={handleLastNameChange}
         />
       </label>
-      <h3>
+      <p>
         您的姓名是：{fullName}
-      </h3>
+      </p>
     </>
   );
 }
@@ -625,9 +625,9 @@ export default function Form() {
           onChange={handleLastNameChange}
         />
       </label>
-      <h3>
+      <p>
         您的姓名是：{fullName}
-      </h3>
+      </p>
     </>
   );
 }

From 741b7bc885b4133bbc79c01f11e2bfd42f43c5b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Thu, 23 Dec 2021 23:16:54 +0800
Subject: [PATCH 12/39] Apply suggestions from code review

---
 beta/src/pages/learn/index.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 723fa6cde0..2d9252793e 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -639,6 +639,8 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
+这可能看起来像一个小变化，但在 React 应用中很多 bug 都是这么修复的。
+
 有时，您希望两个组件的 state 始终一起更改。要做到这一点，在它们两个中都删除该 state，将它移动到它们最近的公共父节点，然后通过 props 将它传递给它们。 这被称为["提升 state"](/learn/sharing-state-between-components)，这是编写 React 代码时最常见的事情之一。 例如，在像下面这样的手风琴组件中，一次应该只有一个面板处于激活状态。父组件不应该将激活 state 保存在每个单独的面板内，而是保存在父组件的 state 中并通过 props 指定给子组件。
 
 <Sandpack>

From 22141a06e97fdceba428ca93df8d4b000a671eed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:08:00 +0800
Subject: [PATCH 13/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 2d9252793e..a50d46ed90 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -6,7 +6,7 @@ translator:
 
 <Intro>
 
-欢迎阅读 React 文档! 此文档是您在本站点能找到的信息的概览。
+欢迎阅读 React 文档！本文档是你在本站点能找到的信息的概览。
 
 </Intro>
 

From 82f3173e8b815d7589b0b00d781f6835a3bf5471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:08:27 +0800
Subject: [PATCH 14/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index a50d46ed90..34b6b89243 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -23,7 +23,7 @@ translator:
 
 ## 介绍 {/*introduction*/}
 
-这是一个最基本的 React 应用。要获得React的初体验，**编辑下面的代码** 然后让它显示您的名字：
+这是一个最基本的 React 应用。可以 **编辑下面的代码** 并让它显示你的名字，以获得 React 的初体验：
 
 <Sandpack>
 

From 415e35f971523c9d18ad7e3f0d579bfcea1653c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:08:37 +0800
Subject: [PATCH 15/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 34b6b89243..427c6b6391 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -16,7 +16,7 @@ translator:
 * [如何用 React 的思考方式构建用户界面](/learn/thinking-in-react)
 * [如何在屏幕上渲染内容](/learn/describing-the-ui)
 * [如何让您的用户界面响应交互](/learn/adding-interactivity)
-* [随着您的应用的增长，如何保持逻辑的可维护性](/learn/managing-state)
+* [随着应用的增长，如何保持逻辑的可维护性](/learn/managing-state)
 * [必要时如何退出 React](/learn/escape-hatches)
 
 </YouWillLearn>

From 969926f82d1bb636129b398ae91fe12522e6cbc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:08:43 +0800
Subject: [PATCH 16/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 427c6b6391..d317e51ddb 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -15,7 +15,7 @@ translator:
 * [如何安装 React](/learn/installation)
 * [如何用 React 的思考方式构建用户界面](/learn/thinking-in-react)
 * [如何在屏幕上渲染内容](/learn/describing-the-ui)
-* [如何让您的用户界面响应交互](/learn/adding-interactivity)
+* [如何让你的用户界面响应交互](/learn/adding-interactivity)
 * [随着应用的增长，如何保持逻辑的可维护性](/learn/managing-state)
 * [必要时如何退出 React](/learn/escape-hatches)
 

From 110417d722016ec55b8344af7fd030897148eba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:08:58 +0800
Subject: [PATCH 17/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index d317e51ddb..5fa3abed56 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -49,7 +49,7 @@ export default function App() {
 
 React 是一个用于构建用户界面的 JavaScript 库。
 
-React 擅长交互设计和编程。**它让您可以将一个复杂的用户界面，分解为可嵌套和可重用的片段，我们称之为[组件](/learn/your-first-component)，它们可以很好的进行组合。** 如果您已经有编程的背景，这可能会让您想起用函数来编程。如果您是一名设计师，它可能会让您联想到图层组合设计。如果您对这两门学科都是新手，那也没关系。很多人都是在接触 React 的过程中才熟悉它们的。使用 React 也许还会让您想起用玩具砖块来建造城堡。有时候，它甚至非常有趣。
+React 擅长交互设计和编程。**它让你可以将一个复杂的用户界面，分解为我们称之为 [组件](/learn/your-first-component) 的可嵌套和可重用的片段，而这些组件可以很好的进行组合。** 如果你已经有编程的背景，这可能会让你想起用函数来编程。而如果你是一名设计师，它可能会让你联想到图层组合设计。如果你对这两个领域都不熟悉，那也没关系。很多人都是在接触 React 的过程中才熟悉它们的。使用 React 也许还会让你想起用玩具砖块来建造城堡。有时候，它甚至非常有趣。
 
 React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)。
 

From ed00ab99ab917cb10afe962631d73e51d4b83ae1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:07 +0800
Subject: [PATCH 18/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 5fa3abed56..b39fd83311 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -53,7 +53,7 @@ React 擅长交互设计和编程。**它让你可以将一个复杂的用户界
 
 React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)。
 
-### 您可以用 React 做什么？{/*what-can-you-do-with-react*/}
+### 你可以用 React 做什么？{/*what-can-you-do-with-react*/}
 
 实际上，大量开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教您在 web 平台上使用 React。** 然而，您在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让您为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
 

From 73974f9d61ab60419e763fb59b28dee4f0f0e058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:15 +0800
Subject: [PATCH 19/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index b39fd83311..004b427160 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -51,7 +51,7 @@ React 是一个用于构建用户界面的 JavaScript 库。
 
 React 擅长交互设计和编程。**它让你可以将一个复杂的用户界面，分解为我们称之为 [组件](/learn/your-first-component) 的可嵌套和可重用的片段，而这些组件可以很好的进行组合。** 如果你已经有编程的背景，这可能会让你想起用函数来编程。而如果你是一名设计师，它可能会让你联想到图层组合设计。如果你对这两个领域都不熟悉，那也没关系。很多人都是在接触 React 的过程中才熟悉它们的。使用 React 也许还会让你想起用玩具砖块来建造城堡。有时候，它甚至非常有趣。
 
-React 没有规定要如何构建整个应用程序。它能帮助您定义和组合组件，但在其他问题中不会妨碍您。这意味您可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者您也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)。
+React 没有规定要如何构建整个应用程序。它能帮助你定义和组合组件，但在其他问题中不会妨碍你。这意味你可以选择一个生态系统解决方案来解决路由、样式和数据获取等问题，或者你也可以 [使用一个提供了很多内置功能的框架](/learn/start-a-new-react-project#building-with-react-and-a-framework)。
 
 ### 你可以用 React 做什么？{/*what-can-you-do-with-react*/}
 

From 2da9b054b0c09b81edf7858ba9cb6fa9aa74d360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:22 +0800
Subject: [PATCH 20/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 004b427160..9b9a1234d8 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -55,7 +55,7 @@ React 没有规定要如何构建整个应用程序。它能帮助你定义和
 
 ### 你可以用 React 做什么？{/*what-can-you-do-with-react*/}
 
-实际上，大量开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教您在 web 平台上使用 React。** 然而，您在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让您为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
+应用场景很广泛！开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教你在 web 平台上使用 React。** 然而，你在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让你为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
 
 如果您好奇您日常使用的哪些产品是用 React 构建的，您可以安装 [React Developer Tools](/learn/react-developer-tools)。 每当您访问使用 React 构建的应用程序或网站时（就像这个文档网站！），它的图标会在工具栏中亮起。
 

From 02a834ba08a3bc6a09cd917967f0b29628ff9a8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:29 +0800
Subject: [PATCH 21/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 9b9a1234d8..4455a8a2e4 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -61,7 +61,7 @@ React 没有规定要如何构建整个应用程序。它能帮助你定义和
 
 ### React 使用 JavaScript {/*react-uses-javascript*/}
 
-使用 React，您将在 JavaScript 中可视化地描述您的逻辑。这需要一些练习。如果您同时学习 JavaScript 和 React，很多人都这么干，但有时，它会更具挑战性！ 从好的方面来说，**大部分学习 React 都是在学习 JavaScript，** 这意味着您将学到的东西远远超出 React。
+在 React 中，你会用 JavaScript 来可视化地描述你的逻辑。这需要一定的练习。如果你同时学习 JavaScript 和 React——很多人都这么干——但有时，它会更具挑战！不过还好，**大部分 React 的学习其实都是 JavaScript 的学习，** 也就是说你将学到远远超出 React 的内容。
 
 使用 [此 JavaScript 概述](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 检查您的知识水平。这将花费您 30 分钟到一个小时，但您会更有信心学习 React。 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 和 [javascript.info](https://zh.javascript.info/) 是两个很好的参考资源。
 

From d1b38a5c8cb7b801cf3d9da465d2fa7593a6aaf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:40 +0800
Subject: [PATCH 22/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 4455a8a2e4..9e148c403b 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -63,7 +63,7 @@ React 没有规定要如何构建整个应用程序。它能帮助你定义和
 
 在 React 中，你会用 JavaScript 来可视化地描述你的逻辑。这需要一定的练习。如果你同时学习 JavaScript 和 React——很多人都这么干——但有时，它会更具挑战！不过还好，**大部分 React 的学习其实都是 JavaScript 的学习，** 也就是说你将学到远远超出 React 的内容。
 
-使用 [此 JavaScript 概述](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 检查您的知识水平。这将花费您 30 分钟到一个小时，但您会更有信心学习 React。 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 和 [javascript.info](https://zh.javascript.info/) 是两个很好的参考资源。
+使用 [此 JavaScript 概述](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 检查你的知识水平。这将花费你 30 分钟到一个小时，但你会更有信心学习 React。 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 和 [javascript.info](https://zh.javascript.info/) 是两个很好的参考资源。
 
 <DeepDive title="安装 (可选)">
 

From 0420ea805d59b8b324b117fcf71987b4818c03d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:45 +0800
Subject: [PATCH 23/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 9e148c403b..501c0cbaf9 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -83,7 +83,7 @@ export default function App() {
 
 </Sandpack>
 
-当您准备好开始一个项目时，有多种选择。您可以在线编写 React 代码并将您的代码保存在类似 [CodeSandbox](https://react.new/) 的环境中。您也可以将 React 作为 `<script>` 标签添加到任何 HTML 文件中，以便于在现有网页的一小部分中试用它。或者您可以创建一个全新的 React 应用程序，有或没有框架都行。**使用 [安装](/learn/installation) 页面选择最适合您的方法——但您现在可以跳过它。**
+当你准备好开始一个项目时，有多种选择。你可以在线编写 React 代码并将你的代码保存在类似 [CodeSandbox](https://react.new/) 的环境中。你也可以将 React 作为 `<script>` 标签添加到任何 HTML 文件中，以便于在现有网页的一小部分中试用它。或者你可以创建一个全新的 React 应用程序，有或没有框架都行。**请查阅 [安装](/learn/installation) 页面选择最适合你的方法——但现在你可以跳过它。**
 
 </DeepDive>
 

From 092cc06ac0478afa013d93737e00b6877ec5b560 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:09:55 +0800
Subject: [PATCH 24/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 501c0cbaf9..1b7be66932 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -135,7 +135,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 上面例子中的标记看起来很像 HTML。 这种语法叫做 [JSX](/learn/writing-markup-with-jsx)，它更严格一些（例如，所有标签必须闭合）。请注意，CSS 类在 JSX 中指定为 `className`。
 
-就像你可以将一些信息传递给浏览器`<img>` 标签一样，你也可以将信息传递给你自己的组件，比如`<Profile>`。 此类信息称为 [_props_](/learn/passing-props-to-a-component)。 下面的例子中，三个 `<Profile>` 接收不同的 props：
+就像你可以将一些信息传递给浏览器`<img>` 标签一样，你也可以将信息传递给你自己的组件，比如`<Profile>`。 此类信息称为 [_props_](/learn/passing-props-to-a-component)。下面的例子中，三个 `<Profile>` 接收不同的 props：
 
 <Sandpack>
 

From e09dae7db1e3dc8c83ce72a75fc74d4ab3726439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:10:03 +0800
Subject: [PATCH 25/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 1b7be66932..8881624d5e 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -133,7 +133,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-上面例子中的标记看起来很像 HTML。 这种语法叫做 [JSX](/learn/writing-markup-with-jsx)，它更严格一些（例如，所有标签必须闭合）。请注意，CSS 类在 JSX 中指定为 `className`。
+上面例子中的标记看起来很像 HTML。这种语法叫做 [JSX](/learn/writing-markup-with-jsx)，它更严格一些（例如，所有标签必须闭合）。请注意，CSS 类在 JSX 中指定为 `className`。
 
 就像你可以将一些信息传递给浏览器`<img>` 标签一样，你也可以将信息传递给你自己的组件，比如`<Profile>`。 此类信息称为 [_props_](/learn/passing-props-to-a-component)。下面的例子中，三个 `<Profile>` 接收不同的 props：
 

From ab75144c13657c6276153b5357dbaa20750ebca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:11:45 +0800
Subject: [PATCH 26/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 8881624d5e..d9196c31ea 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -3,6 +3,7 @@ title: 开始
 translator:
  - x-cold
  - sooia
+---
 
 <Intro>
 

From ccc12f94fcbfaaf0835135a5626c445ec4530439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:12:34 +0800
Subject: [PATCH 27/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index d9196c31ea..dbf91897d2 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -4,6 +4,7 @@ translator:
  - x-cold
  - sooia
 ---
+---
 
 <Intro>
 

From e9e0a68278f886e094dc0a2e249e5f3c88d05027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:13:12 +0800
Subject: [PATCH 28/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index dbf91897d2..cf9cd38ed5 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -5,6 +5,7 @@ translator:
  - sooia
 ---
 ---
+---
 
 <Intro>
 

From 2a6ed9897ffa6366a1d388bef9e81f47a53be3e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:13:45 +0800
Subject: [PATCH 29/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index cf9cd38ed5..dbf91897d2 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -5,7 +5,6 @@ translator:
  - sooia
 ---
 ---
----
 
 <Intro>
 

From 608ecbb207ce043dabd80094c4d18060af4a7d2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:14:20 +0800
Subject: [PATCH 30/39] Update beta/src/pages/learn/index.md

---
 beta/src/pages/learn/index.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index dbf91897d2..d9196c31ea 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -4,7 +4,6 @@ translator:
  - x-cold
  - sooia
 ---
----
 
 <Intro>
 

From e3c77d87baa6c6e9d9683ad5c9e580fb47441fa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:14:42 +0800
Subject: [PATCH 31/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index d9196c31ea..49a56e14c3 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -58,7 +58,7 @@ React 没有规定要如何构建整个应用程序。它能帮助你定义和
 
 应用场景很广泛！开发者们使用 React 来创建各种用户界面——从像按钮和下拉菜单这样的小控件到整个应用程序。 **这些文档将教你在 web 平台上使用 React。** 然而，你在这里学到的大部分内容同样适用于 [React Native](https://reactnative.dev/)，它可以让你为 Android、iOS，甚至 [Windows 和 macOS](https://microsoft.github.io/react-native-windows/) 构建应用程序。
 
-如果您好奇您日常使用的哪些产品是用 React 构建的，您可以安装 [React Developer Tools](/learn/react-developer-tools)。 每当您访问使用 React 构建的应用程序或网站时（就像这个文档网站！），它的图标会在工具栏中亮起。
+如果你好奇你日常使用的哪些产品是用 React 构建的，你可以安装 [React Developer Tools](/learn/react-developer-tools)。 每当你访问使用 React 构建的应用程序或网站时（比如说这个文档！），它的图标就会在工具栏中亮起来。
 
 ### React 使用 JavaScript {/*react-uses-javascript*/}
 

From e9dcabbeec020b0f03208a9e4e9bb5fcc8661315 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:14:53 +0800
Subject: [PATCH 32/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 49a56e14c3..325f538f2a 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -68,7 +68,7 @@ React 没有规定要如何构建整个应用程序。它能帮助你定义和
 
 <DeepDive title="安装 (可选)">
 
-如果您刚开始学习 React，您不需要安装任何东西。相反，我们建议您继续使用本网站中出现的 CodeSandbox。 它们看起来像这样：
+如果你刚开始学习 React，你不需要安装任何东西。相反，我们建议你继续使用本网站中出现的 CodeSandbox。 它们看起来像这样：
 
 <Sandpack>
 

From 0bd9beac2a8ba68dd567d921b940b7f761f735be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:15:26 +0800
Subject: [PATCH 33/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 325f538f2a..b64047c38e 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -93,7 +93,7 @@ export default function App() {
 有几种方法可以开始：
 
 - 如果您**觉得迫不及待并通过例子学习**，直接前往 **[React 哲学](/learn/thinking-in-react)**。 该教程不会详细解释语法，但它会让您了解使用 React 构建用户界面的感受。
-- 如果您**熟悉这些概念并希望浏览可用的 API**，请查看 **[API 参考](/reference)**。
+- 如果你 **熟悉这些概念并希望浏览可用的 API**，请查看 **[API 参考](/reference)**。
 - 本文档的其余部分按章节组织，**逐步介绍每个概念**--带有许多交互式例子、详细说明和挑战以保证您的理解。 您不必按顺序阅读它们，但每个下一页都假设您熟悉前几页中的概念。
 
 为了节省您的时间，我们在下面提供**每章的简要概述**。 

From 2a0431d5b156a5ea7074992559dec9bb795f8d69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Fri, 24 Dec 2021 10:15:36 +0800
Subject: [PATCH 34/39] Update beta/src/pages/learn/index.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index b64047c38e..37b6e40be2 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -92,7 +92,7 @@ export default function App() {
 
 有几种方法可以开始：
 
-- 如果您**觉得迫不及待并通过例子学习**，直接前往 **[React 哲学](/learn/thinking-in-react)**。 该教程不会详细解释语法，但它会让您了解使用 React 构建用户界面的感受。
+- 如果你 **迫不及待并适合通过例子学习**，直接前往 **[React 哲学](/learn/thinking-in-react)**。该教程不会详细解释语法，但它会让你了解使用 React 构建用户界面的感受。
 - 如果你 **熟悉这些概念并希望浏览可用的 API**，请查看 **[API 参考](/reference)**。
 - 本文档的其余部分按章节组织，**逐步介绍每个概念**--带有许多交互式例子、详细说明和挑战以保证您的理解。 您不必按顺序阅读它们，但每个下一页都假设您熟悉前几页中的概念。
 

From 326f81a932213bbaacd74e462a09554c2a052dbc Mon Sep 17 00:00:00 2001
From: x-cold <lxstart@outlook.com>
Date: Wed, 29 Dec 2021 23:09:52 +0800
Subject: [PATCH 35/39] fix: code translation

---
 beta/src/pages/learn/index.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 37b6e40be2..9939ade4d4 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -559,7 +559,7 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
+      <h2>让我帮您登记</h2>
       <label>
         名：{' '}
         <input
@@ -611,7 +611,7 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
+      <h2>让我帮您登记</h2>
       <label>
         名：{' '}
         <input
@@ -653,20 +653,20 @@ export default function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
     <>
+      <h2>阿拉木图, 哈萨克斯坦</h2>
       <Panel
-        title="配料"
+        title="关于"
         isActive={activeIndex === 0}
         onShow={() => setActiveIndex(0)}
       >
-        牛奶，茶包和肉桂棒。
+        阿拉木图有大约 200 万人口，是哈萨克斯坦最大的城市。从 1929 年到 1997 年，它是哈萨克斯坦的首都。
       </Panel>
       <Panel
-        title="食谱"
+        title="词源"
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        加热牛奶，将茶包放入锅中。
-        加入肉桂棒。
+        这个名字源自 <span lang="kk-KZ">алма</span>，哈萨克语中的“苹果”一词，通常被翻译为“苹果之城”。 事实上，阿拉木图周边地区被认为是苹果的祖先家园，而野生<i lang="la">Malus Siversii (天山野苹果)</i> 可能是现代家养苹果祖先。
       </Panel>
     </>
   );

From 30956bef63580d17bf58eaf4574383c558070a2d Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Sun, 13 Feb 2022 11:10:55 +0800
Subject: [PATCH 36/39] Apply suggestions from code review

---
 beta/src/pages/learn/index.md | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 9939ade4d4..c4c08c5a92 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -3,6 +3,7 @@ title: 开始
 translator:
  - x-cold
  - sooia
+ - KnowsCount
 ---
 
 <Intro>
@@ -94,13 +95,13 @@ export default function App() {
 
 - 如果你 **迫不及待并适合通过例子学习**，直接前往 **[React 哲学](/learn/thinking-in-react)**。该教程不会详细解释语法，但它会让你了解使用 React 构建用户界面的感受。
 - 如果你 **熟悉这些概念并希望浏览可用的 API**，请查看 **[API 参考](/reference)**。
-- 本文档的其余部分按章节组织，**逐步介绍每个概念**--带有许多交互式例子、详细说明和挑战以保证您的理解。 您不必按顺序阅读它们，但每个下一页都假设您熟悉前几页中的概念。
+- 本文档的其余部分按章节组织，**逐步介绍每个概念** —— 带有许多交互式例子、详细说明和挑战以保证你的理解。 你不一定要按顺序阅读它们，但是每个主题都需要你熟悉前几页中的概念。
 
-为了节省您的时间，我们在下面提供**每章的简要概述**。 
+为了节省您的时间，我们在下面提供 **每章的简要概述**。 
 
 ### 第 1 章概述：描述 UI {/*chapter-1-overview-describing-the-ui*/}
 
-React 应用程序由被称为 ["components"](/learn/your-first-component) 的独立 UI 部分构建。 React 组件是一个 JavaScript 函数，您可以在其中添加标记。 组件可以小到一个按钮，也可以大到整个页面。下面的例子中，一个*父*组件 `Gallery` 渲染了三个*子*组件 `Profile` ：
+React 应用程序由被称为 ["组件"](/learn/your-first-component) 的独立 UI 部分构建。 React 组件是一个 JavaScript 函数，您可以在其中添加标记。 组件可以小到一个按钮，也可以大到整个页面。下面的例子中，一个 *父* 组件 `Gallery` 渲染了三个 *子* 组件 `Profile` ：
 
 <Sandpack>
 
@@ -179,9 +180,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-你可能想知道为什么 `className="avatar"` 使用引号，而 `src={imageUrl}` 使用花括号。在 JSX 中，花括号就像一个 ["进入 JavaScript 的窗口"](/learn/javascript-in-jsx-with-curly-braces)。 它们让您可以在标记中直接运行一些 JavaScript！所以 `src={imageUrl}` 读取第一行声明的 `imageUrl` prop，并从父组件 `Gallery` 传递过来。
+你可能想知道为什么 `className="avatar"` 使用引号，而 `src={imageUrl}` 就使用花括号。在 JSX 中，花括号就像一个 ["进入 JavaScript 的窗口"](/learn/javascript-in-jsx-with-curly-braces)。 它们让你可以在标记中直接运行一些 JavaScript！所以 `src={imageUrl}` 读取第一行声明的 `imageUrl` prop，并从父组件 `Gallery` 传递过来。
 
-在上面的例子中，所有的数据都是直接写在标记中的。但是，您通常希望将其单独保存。下面的例子，数据保存在一个数组中。在 React 中，你使用 JavaScript 函数，如 [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 来[渲染列表](/learn/rendering-lists) 的东西。 
+在上面的例子中，所有的数据都是直接写在标记中的。但是，很多情况下我们想将其分开存储。下面的例子，数据保存在一个数组中。在 React 中，一般使用例如 [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  的 JavaScript 函数，来 [渲染一个列表](/learn/rendering-lists) 的东西。 
 
 <Sandpack>
 
@@ -255,7 +256,7 @@ img { margin: 0 10px 10px 0; }
 
 <LearnMore path="/learn/describing-the-ui">
 
-阅读**[描述 UI](/learn/describing-the-ui)** 了解如何让东西出现在屏幕上，包括声明组件、导入它们、用大括号编写 JSX 以及编写条件和列表。
+阅读 **[描述 UI](/learn/describing-the-ui)** 了解如何让东西出现在屏幕上，引用声明组件、导入它们、用大括号编写 JSX 以及编写条件和列表。
 
 </LearnMore>
 
@@ -263,7 +264,7 @@ img { margin: 0 10px 10px 0; }
 
 作为交互的结果，组件通常需要更改屏幕上的内容。输入表单应该更新输入字段，单击图像轮播上的“下一步”应该更改显示的图像，单击“购买”将产品放入购物车。组件需要“记住”一些东西：当前输入值、当前图像、购物车。在 React 中，这种特定于组件的内存称为 [*state*](/learn/state-a-components-memory)。
 
-您可以使用 [`useState`](/reference/usestate) Hook 向组件添加 state。 Hooks 是一种特殊的函数，可以让你的组件使用 React 特性（state 是这些特性之一）。`useState` Hook 允许你声明一个 state 变量。它接受初始 state 并返回一对值：当前 state 和一个允许您更新它的 state 设置器函数。
+你可以使用 [`useState`](/reference/usestate) Hook 向组件添加 state。 Hooks 是一种特殊的函数，可以让你的组件使用 React 特性（state 是这些特性之一）。`useState` Hook 允许你声明一个 state 变量。它接受初始 state 并返回一对值：当前 state 以及一个允许你更新它的 state 设置器函数。
 
 这个 `Gallery` 组件需要记住两件事：当前图像索引（默认值为 `0`），以及用户是否切换了“显示详细信息”（默认值为 `false`）： 
 
@@ -411,7 +412,7 @@ button {
 
 </Sandpack>
 
-State 也可以保存复杂的值。例如，如果您正在实现一个表单，您可以在 state 中保持一个具有不同字段的对象。 下面示例中的 `...` 语法允许您[基于现有对象创建新对象](/learn/updating-objects-in-state)。
+State 也可以保存复杂的值。例如，如果你正在实现一个表单，你就可以在 state 中保持一个具有不同字段的对象。 下面示例中的 `...` 语法允许你 [基于现有对象创建新对象](/learn/updating-objects-in-state)。
 
 <Sandpack>
 
@@ -486,7 +487,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
 
 </Sandpack>
 
-您还可以将数组保持在 state。 这允许您添加、删除或更改列表中的内容以响应用户交互。根据您想要做什么，这里有[从现有数组创建新数组的不同方法](/learn/updating-arrays-in-state)。
+你还可以将数组保持在 state。 这允许你添加、删除或更改列表中的内容以响应用户交互。按照你的需求，有不同的 [从现有数组创建新数组的方法](/learn/updating-arrays-in-state)。
 
 <Sandpack>
 
@@ -527,7 +528,7 @@ export default function List() {
 
 <LearnMore path="/learn/adding-interactivity">
 
-阅读**[添加交互性](/learn/adding-interactivity)** 了解如何在交互时更新屏幕，包括添加事件处理程序、声明和更新 state，以及在 state 中更新对象和数组的不同方法。
+阅读 **[添加交互性](/learn/adding-interactivity)** 了解如何在交互时更新屏幕，包括添加事件处理程序、声明和更新 state，以及在 state 中更新对象和数组的不同方法。
 
 </LearnMore>
 
@@ -642,7 +643,7 @@ label { display: block; margin-bottom: 5px; }
 
 这可能看起来像一个小变化，但在 React 应用中很多 bug 都是这么修复的。
 
-有时，您希望两个组件的 state 始终一起更改。要做到这一点，在它们两个中都删除该 state，将它移动到它们最近的公共父节点，然后通过 props 将它传递给它们。 这被称为["提升 state"](/learn/sharing-state-between-components)，这是编写 React 代码时最常见的事情之一。 例如，在像下面这样的手风琴组件中，一次应该只有一个面板处于激活状态。父组件不应该将激活 state 保存在每个单独的面板内，而是保存在父组件的 state 中并通过 props 指定给子组件。
+你有的时候可能需要两个组件的 state 同时更改。要做到这一点，在它们两个中都删除该 state，将它移动到它们最近的公共父节点，然后通过 props 将它传递给它们。这被称为 ["提升 state"](/learn/sharing-state-between-components)，这是编写 React 代码时最常见的事情之一。例如，在像下面这样的手风琴组件中，一次应该只有一个面板处于激活状态。父组件不应该将激活 state 保存在每个单独的面板内，而是保存在父组件的 state 中并通过 props 指定给子组件。
 
 <Sandpack>
 
@@ -711,12 +712,12 @@ h3, p { margin: 5px 0px; }
 
 ## 下一步 {/*next-steps*/}
 
-这个页面是快节奏的！如果读到这里，您已经看到了日常使用 React 的 80%。
+这一章节奏很快！如果已经读到这里，你就已经读了 React 80% 的日常使用内容。
 
-您接下来的步骤取决于您想做什么：
+接下来的步骤取决于你：
 
-* 如果您想在本地创建一个 React 项目，请转到 [安装](/learn/installation)。
-* 如果您想了解在 React 中构建 UI 在实践中是什么感觉，请阅读 [React 哲学](/learn/thinking-in-react)。
+* 如果你想在本地创建一个 React 项目，请参考 [安装](/learn/installation)。
+* 如果你想了解在 React 中构建 UI 在实践中是什么感觉，请阅读 [React 哲学](/learn/thinking-in-react)。
 * 或者，从 [描述 UI](/learn/describing-the-ui) 开始，仔细阅读第一章。
 
-当您需要了解 API 必要的细节时，不要忘记阅读 [API 参考](/reference)！
+当你需要了解 API 必要的细节时，不要忘记阅读 [API 参考](/reference)！

From 2b9e5ee1fe9b46b9ce3c1dc1219e80529e858f5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E6=8C=9A?= <lxstart@outlook.com>
Date: Sun, 13 Feb 2022 13:31:30 +0800
Subject: [PATCH 37/39] Apply suggestions from code review

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index c4c08c5a92..862f91c2f6 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -534,7 +534,7 @@ export default function List() {
 
 ### 第 3 章概述： 管理 State {/*chapter-3-overview-managing-state*/}
 
-您经常会面临选择_究竟要把什么_放进 state 的问题。 您应该使用一个 state 变量还是多个 state 变量？ 对象还是数组？ 你应该如何[构建你的 state](/learn/choosing-the-state-structure)？ 最重要的原则是**避免冗余 state**。 如果某些信息永远不会改变，它就不应该处于 state。 如果某些信息是通过 props 从父组件收到的，它不应该处于 state 中。 如果某些信息可以从其他 props 或 state 计算得出，它也不应该处于 state 中！
+你经常会面临选择 _究竟要把什么_ 放进 state 的问题。你应该使用一个 state 变量还是多个 state 变量？对象还是数组？你应该如何 [构建你的 state](/learn/choosing-the-state-structure)？最重要的原则是 **避免冗余 state**。如果某些信息永远不会改变，它就不应该处于 state。如果某些信息是通过 props 从父组件收到的，它不应该处于 state 中。如果某些信息可以从其他 props 或 state 计算得出，它也不应该处于 state 中！
 
 例如，这个表单有一个多余的 `fullName` state 变量：
 
@@ -589,7 +589,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-您可以通过在组件渲染时计算 `fullName` 来删除它并简化代码：
+你可以通过在组件渲染时计算 `fullName` 来删除它并简化代码：
 
 <Sandpack>
 

From 55d9ae53a83dc138a8f72352d9b0a301659904a3 Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Tue, 5 Apr 2022 14:32:22 +0800
Subject: [PATCH 38/39] fix: translation errors

---
 beta/src/pages/learn/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 862f91c2f6..8acdcd46c7 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -371,7 +371,7 @@ export const sculptureList = [{
 }, {
   name: 'Terracotta Army',
   artist: 'Unknown Artist',
-  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consited of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
   url: 'https://i.imgur.com/HMFmH6m.jpg',
   alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
 }, {
@@ -667,7 +667,7 @@ export default function Accordion() {
         isActive={activeIndex === 1}
         onShow={() => setActiveIndex(1)}
       >
-        这个名字源自 <span lang="kk-KZ">алма</span>，哈萨克语中的“苹果”一词，通常被翻译为“苹果之城”。 事实上，阿拉木图周边地区被认为是苹果的祖先家园，而野生<i lang="la">Malus Siversii (天山野苹果)</i> 可能是现代家养苹果祖先。
+        这个名字源自 <span lang="kk-KZ">алма</span>，哈萨克语中的“苹果”一词，通常被翻译为“苹果之城”。事实上，阿拉木图周边地区被认为是苹果的祖先家园，而野生<i lang="la">Malus Siversii (天山野苹果)</i> 可能是现代家养苹果祖先。
       </Panel>
     </>
   );

From 63923618bf9df830bd23f3e3b0dd92ff619779e3 Mon Sep 17 00:00:00 2001
From: QC-L <github@liqichang.com>
Date: Thu, 26 May 2022 23:54:55 +0800
Subject: [PATCH 39/39] docs(cn): retranslate learn/index.md

---
 beta/src/pages/learn/index.md | 145 +++++++++++++++++-----------------
 1 file changed, 73 insertions(+), 72 deletions(-)

diff --git a/beta/src/pages/learn/index.md b/beta/src/pages/learn/index.md
index 1227d8be16..ca1b23f174 100644
--- a/beta/src/pages/learn/index.md
+++ b/beta/src/pages/learn/index.md
@@ -1,33 +1,34 @@
 ---
-title: 开始
+title: 快速入门
 translator:
  - x-cold
  - sooia
  - KnowsCount
+ - QC-L
 ---
 
 <Intro>
 
-Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
+欢迎来到 React 文档！本章节将为你介绍，你每天都会使用的 80% 的 React 概念。
 
 </Intro>
 
 <YouWillLearn>
 
-- How to create and nest components
-- How to add markup and styles
-- How to display data
-- How to render conditions and lists
-- How to respond to events and update the screen
-- How to share data between components
+- 如何创建和嵌套组件
+- 如图添加标记和样式
+- 如何显示数据
+- 如何渲染条件和列表
+- 如何对事件做出响应并更新界面
+- 如何在组件间共享数据
 
 </YouWillLearn>
 
-## Creating and nesting components {/*components*/}
+## 创建和嵌套组件 {/*components*/}
 
-React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
+React 应用程序是由 **组件** 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
 
-React components are JavaScript functions that return markup:
+React 组件是返回标记的 JavaScript 函数：
 
 ```js
 function MyButton() {
@@ -37,7 +38,7 @@ function MyButton() {
 }
 ```
 
-Now that you've declared `MyButton`, you can nest it into another component:
+至此，你已经声明了 `MyButton`，你可以把它嵌套到另一个组件中：
 
 ```js {5}
 export default function MyApp() {
@@ -50,9 +51,9 @@ export default function MyApp() {
 }
 ```
 
-Notice that `<MyButton />` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
+你可能已经注意到 `<MyButton />` 是以大写字母开头的。你可以根据此来区分 React 组件。React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。
 
-Have a look at the result:
+来看下效果：
 
 <Sandpack>
 
@@ -77,13 +78,13 @@ export default function MyApp() {
 
 </Sandpack>
 
-The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references.
+`export default` 关键字指定了文件中的主要组件。如果你对 JavaScript 某些语法不熟悉，可以参考 [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) 以及 [javascript.info](https://javascript.info/import-export)，可能会对你有所帮助。
 
-## Writing markup with JSX {/*writing-markup-with-jsx*/}
+## 使用 JSX 编写标记 {/*writing-markup-with-jsx*/}
 
-The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box.
+上面所使用的标记语法被称为 *JSX*。它是可选的，但大多数 React 项目会使用 JSX，主要是它很方便。所有 [我们推荐的本地开发工具](/learn/installation) 都支持 JSX，开箱即用。
 
-JSX is stricter than HTML. You have to close tags like `<br />`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `<div>...</div>` or an empty `<>...</>` wrapper:
+JSX 比 HTML 更加严格。你必须闭合标签，如 `<br />`。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 `<div>...</div>` 或使用空的 `<>...</>` 包裹：
 
 ```js {3,6}
 function AboutPage() {
@@ -96,17 +97,17 @@ function AboutPage() {
 }
 ```
 
-If you have a lot of HTML to port to JSX, you can use an [online converter](https://transform.tools/html-to-jsx).
+如果你有大量的 HTML 需要移植到 JSX 中，你可以使用 [在线转换器](https://transform.tools/html-to-jsx)。
 
-## Adding styles {/*adding-styles*/}
+## 添加样式 {/*adding-styles*/}
 
-In React, you specify a CSS class with `className`. It works the same way as HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute:
+在 React 中，你可以使用 `className` 来指定一个 CSS 的 class。它与 HTML 的 [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) 属性的工作方式相同：
 
 ```js
 <img className="avatar" />
 ```
 
-Then you write the CSS rules for it in a separate CSS file:
+然后，你可以在一个单独的 CSS 文件中为它编写 CSS 规则：
 
 ```css
 /* In your CSS */
@@ -115,11 +116,11 @@ Then you write the CSS rules for it in a separate CSS file:
 }
 ```
 
-React does not prescribe how you add CSS files. In the simplest case, you'll add a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+React 并没有规定你如何添加 CSS 文件。最简单的方式，你可以在你的 HTML 中添加一个 [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 标签。如果你使用了构建工具或框架，请阅读其文档，以了解如何将 CSS 文件添加到你的项目中。
 
-## Displaying data {/*displaying-data*/}
+## 显示数据 {/*displaying-data*/}
 
-JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`:
+JSX 会让你把标记放到 JavaScript 中。而大括号会让你 "回到" JavaScript 中，这样你就可以从你的代码中嵌入一些变量并展示给用户。例如，这将显示 `user.name`：
 
 ```js {3}
 return (
@@ -129,7 +130,7 @@ return (
 );
 ```
 
-You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute:
+你还可以将 JSX 属性 "转义到 JavaScript"，但你必须使用大括号 **而非** 引号。例如，`className="avatar"` 是将 `"avatar"` 字符串传递给 `className`，作为 CSS 的 class。但 `src={user.imageUrl}` 会读取 JavaScript 的 `user.imageUrl` 变量，然后将该值作为 `src` 属性传递：
 
 ```js {3,4}
 return (
@@ -140,7 +141,7 @@ return (
 );
 ```
 
-You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary):
+你也可以把更为复杂的表达式放入 JSX 的大括号内，例如 [字符串拼接](https://javascript.info/operators#string-concatenation-with-binary)：
 
 <Sandpack>
 
@@ -181,11 +182,11 @@ export default function Profile() {
 
 </Sandpack>
 
-In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables.
+在上面示例中，`style={{}}` 并不是一个特殊的语法，而是 `style={ }` JSX 大括号内的一个普通 `{}` 对象。当你的样式依赖于 JavaScript 变量时，你可以使用 `style` 属性。
 
-## Conditional rendering {/*conditional-rendering*/}
+## 条件渲染 {/*conditional-rendering*/}
 
-In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX:
+在 React 中，没有特殊的语法来编写条件。因此，你将使用与编写常规 JavaScript 代码时相同的技术。例如，你可以使用 [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) 语句根据条件引入 JSX：
 
 ```js
 let content;
@@ -201,7 +202,7 @@ return (
 );
 ```
 
-If you prefer more compact code, you can use the [conditional `?` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). Unlike `if`, it works inside JSX:
+如果你喜欢更为紧凑的代码，你可以使用 [条件 `?` 运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)。与 `if` 不同的是，它工作于 JSX 内部：
 
 ```js
 <div>
@@ -213,7 +214,7 @@ If you prefer more compact code, you can use the [conditional `?` operator](http
 </div>
 ```
 
-When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
+当你不需要 `else` 分支时，你还可以使用 [逻辑 `&&` 语法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation)：
 
 ```js
 <div>
@@ -221,13 +222,13 @@ When you don't need the `else` branch, you can also use a shorter [logical `&&`
 </div>
 ```
 
-All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`.
+所有这些方法也适用于有条件地指定属性。如果你对 JavaScript 语法不熟悉，你可以从一直使用 `if...else` 开始。
 
-## Rendering lists {/*rendering-lists*/}
+## 渲染列表 {/*rendering-lists*/}
 
-You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components.
+你将依赖 JavaScript 的特性，例如 [`for` 循环](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) 和 [array 的 `map()` 函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 来渲染组件列表。
 
-For example, let's say you have an array of products:
+例如，假设你有一个产品数组：
 
 ```js
 const products = [
@@ -237,7 +238,7 @@ const products = [
 ];
 ```
 
-Inside your component, use the `map()` function to transform an array of products into an array of `<li>` items:
+在你的组件中，使用 `map()` 函数将一个产品数组，转换为 `<li>` 标签的元素列表:
 
 ```js
 const listItems = products.map(product =>
@@ -251,7 +252,7 @@ return (
 );
 ```
 
-Notice how `<li>` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React will rely on your keys to understand what happened if you later insert, delete, or reorder the items.
+注意， `<li>` 有一个 `key` 属性。对于列表中的每一个元素，你应该传递一个字符串或者数字给 `key`，用于在其兄弟节点中唯一标识该元素。通常，key 应该来自你的数据，比如，数据库中的 ID。如果你在后续插入、删除或重新排序这些项目，React 将依靠你提供的 key 来思考发生了什么。
 
 <Sandpack>
 
@@ -282,9 +283,9 @@ export default function ShoppingList() {
 
 </Sandpack>
 
-## Responding to events {/*responding-to-events*/}
+## 响应事件 {/*responding-to-events*/}
 
-You can respond to events by declaring *event handler* functions inside your components:
+你可以通过在组件中声明 **事件处理** 函数来响应事件：
 
 ```js {2-4,7}
 function MyButton() {
@@ -300,28 +301,28 @@ function MyButton() {
 }
 ```
 
-Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button.
+注意，`onClick={handleClick}` 的结尾没有小括号！不要 **调用** 事件处理函数：你只需 **传递给事件** 即可。当用户点击按钮时，React 会调用你的事件处理函数。
 
-## Updating the screen {/*updating-the-screen*/}
+## 更新界面 {/*updating-the-screen*/}
 
-Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component.
+通常，你会希望你的组件 "记住" 一些信息并展示出来。例如，也许你想计算一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 **state**。
 
-First, import [`useState`](/apis/usestate) from React:
+首先，从 React 引入 [`useState`](/apis/usestate)：
 
 ```js {1,4}
 import { useState } from 'react';
 ```
 
-Now you can declare a *state variable* inside your component:
+现在你可以在你的组件中声明一个 **state 变量**：
 
 ```js
 function MyButton() {
   const [count, setCount] = useState(0);
 ```
 
-You will get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to call them like `[something, setSomething]`.
+你将从 `useState` 中获得两样东西：当前的 state（`count`），以及用于更新它的函数（`setCount`）。你可以给它们起任何名字，但按照惯例，需要像这样 `[something, setSomething]` 为它们命名。
 
-The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter:
+第一次显示按钮时，`count` 的值为 `0`，因为你把 `0` 传给了 `useState()`。当你想改变 state 时，调用 `setCount()` 并将新的值传递给它。点击该按钮计数器将递增：
 
 ```js {5}
 function MyButton() {
@@ -339,9 +340,9 @@ function MyButton() {
 }
 ```
 
-React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on.
+React 将再次调用你的组件函数。这次，`count` 会变成 `1`。接着，变成 `2`。以此类推。
 
-If you render the same component multiple times, each will get its own state. Try clicking each button separately:
+如果你多次渲染同一个组件，每个组件都会拥有自己的 state。你可以尝试点击不同的按钮：
 
 <Sandpack>
 
@@ -382,59 +383,59 @@ button {
 
 </Sandpack>
 
-Notice how each button "remembers" its own `count` state and doesn't affect other buttons.
+注意，每个按钮会 "记住" 自己的 `count`，而不影响其他按钮。
 
-## Using Hooks {/*using-hooks*/}
+## 使用 Hook {/*using-hooks*/}
 
-Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [React API reference](/apis). You can also write your own Hooks by combining the existing ones.
+以 `use` 开头的函数被称为 **Hook**。`useState` 是 React 提供的一个内置 Hook。你可以在 [React API 参考](/apis) 中找到其他内置的 Hook。你也可以通过组合现有的 Hook 来编写属于你自己的 Hook。
 
-Hooks are more restrictive than regular functions. You can only call Hooks *at the top level* of your components (or other Hooks). If you want to `useState` in a condition or a loop, extract a new component and put it there.
+Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的 **顶层** 调用 Hook。如果你想在一个条件或循环中调用 `useState`，请提取一个新的组件并在组件内部使用它。
 
-## Sharing data between components {/*sharing-data-between-components*/}
+## 组件间共享数据 {/*sharing-data-between-components*/}
 
-In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed:
+在前面的示例中，每个 `MyButton` 都有自己独立的 `count`，当每个按钮被点击时，只有被点击按钮的 `count` 才会发生改变：
 
 <DiagramGroup>
 
 <Diagram name="sharing_data_child" height={367} width={407} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.">
 
-Initially, each `MyButton`'s `count` state is `0`
+起初，每个 `MyButton` 的 `count` state 均为 `0`
 
 </Diagram>
 
 <Diagram name="sharing_data_child_clicked" height={367} width={407} alt="The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero." >
 
-The first `MyButton` updates its `count` to `1`
+第一个 `MyButton` 会将 `count` 更新为 `1`
 
 </Diagram>
 
 </DiagramGroup>
 
-However, often you'll need components to *share data and always update together*.
+然而，你经常需要组件 **共享数据并一起更新**。
 
-To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them.
+为了使得 `MyButton` 组件显示相同的 `count` 并一起更新，你需要将各个按钮的 state "向上" 移动到最接近包含所有按钮的组件之中。
 
-In this example, it is `MyApp`:
+在这个示例中，它是 `MyApp`：
 
 <DiagramGroup>
 
 <Diagram name="sharing_data_parent" height={385} width={410} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero." >
 
-Initially, `MyApp`'s `count` state is `0` and is passed down to both children
+起初，`MyApp` 的 `count` state 为 `0` 并传递给了两个子组件
 
 </Diagram>
 
 <Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >
 
-On click, `MyApp` updates its `count` state to `1` and passes it down to both children
+点击后，`MyApp` 将 `count` state 更新为 `1`，并将其传递给两个子组件
 
 </Diagram>
 
 </DiagramGroup>
 
-Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code.
+此刻，当你点击任何一个按钮时，`MyApp` 中的 `count` 都将改变，同时会改变 `MyButton` 中的两个 count。具体代码如下：
 
-First, *move the state up* from `MyButton` into `MyApp`:
+首先，将 `MyButton` 的 **state 上移到** `MyApp` 中：
 
 ```js {2,6-10}
 function MyButton() {
@@ -458,7 +459,7 @@ export default function MyApp() {
 }
 ```
 
-Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like `<img>`:
+接着，将 `MyApp` 中的点击事件处理函数以及 **state 一同向下传递到** 每个 `MyButton` 中。你可以使用 JSX 的大括号向 `MyButton` 传递信息。就像之前向 `<img>` 等内置标签所做的那样:
 
 ```js {11-12}
 export default function MyApp() {
@@ -478,9 +479,9 @@ export default function MyApp() {
 }
 ```
 
-The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons.
+按这种方式传递下来的信息被称作 **prop**。此时，`MyApp` 组件包含了 `count` state 以及 `handleClick` 事件处理函数，并将它们作为 **prop 传递给** 了每个按钮。
 
-Finally, change `MyButton` to *read* the props you have passed from its parent component:
+最后，改变 `MyButton` 以 **读取** 从父组件传递来的 prop：
 
 ```js {1,3}
 function MyButton({ count, onClick }) {
@@ -492,9 +493,9 @@ function MyButton({ count, onClick }) {
 }
 ```
 
-When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value.
+当你点击按钮时，`onClick` 处理程序会启动。每个按钮的 `onClick` prop 会被设置为 `MyApp` 内的 `handleClick` 函数，所以函数内的代码会被执行。该代码会调用 `setCount(count + 1)`，使得 state 变量 `count` 递增。新的 `count` 值会被作为 prop 传递给每个按钮，因此它们每次展示的都是最新的值。
 
-This is called "lifting state up". By moving state up, we've shared it between components.
+这被称为 "状态提升"。通过向上移动 state，我们实现了在组件间共享它。
 
 <Sandpack>
 
@@ -535,8 +536,8 @@ button {
 
 </Sandpack>
 
-## Next Steps {/*next-steps*/}
+## 下一节 {/*next-steps*/}
 
-By now, you know the basics of how to write React code!
+至此，你已经了解了如何编写 React 代码的基本知识。
 
-Head to [Thinking in React](/learn/thinking-in-react) to see how it feels to build a UI with React in practice.
+前往 [React 哲学](/learn/thinking-in-react) 章节，了解使用 React 构建 UI 的实际感受。