Merge branch 'source' into Fix-unclosed-tag

Author: mluukkai

src/content/1/zh/part1a.md

@@ -7,6 +7,7 @@ lang: zh
 
 <div class="content">
 <!-- We will now start getting familiar with probably the most important topic of this course, namely the [React](https://reactjs.org/)-library. Let's start off with making a simple React application as well as getting to know the core concepts of React.-->
+
  我们现在将开始入门的可能是本课程最重要的主题，即[React](https://reactjs.org/)-库。让我们从制作一个简单的React应用开始，同时了解React的核心概念。
 
 <!-- The easiest way to get started by far is by using a tool called [create-react-app](https://github.com/facebook/create-react-app). It is possible (but not necessary) to install <i>create-react-app</i> on your machine if the <i>npm</i> tool that was installed along with Node has a version number of at least <i>5.3</i>.-->

src/content/1/zh/part1d.md

@@ -1191,9 +1191,9 @@ const App = () => {
  你可能会发现下面的链接很有用。
 
 <!-- - The [official React documentation](https://reactjs.org/docs/hello-world.html) is worth checking out at some point, although most of it will become relevant only later on in the course. Also, everything related to class-based components is irrelevant to us;-->
- - [官方React文档](https://reactjs.org/docs/hello-world.html)值得在某些时候查看，尽管它的大部分内容在课程的后期才会变得相关。另外，与基于类的组件有关的一切都与我们无关。
+  - [官方React文档](https://reactjs.org/docs/hello-world.html)值得在某些时候查看，尽管它的大部分内容在课程的后期才会变得相关。另外，与基于类的组件有关的一切都与我们无关。
 <!-- - Some courses on [Egghead.io](https://egghead.io) like [Start learning React](https://egghead.io/courses/start-learning-react) are of high quality, and recently updated [The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) is also relatively good; both courses introduce concepts that will also be introduced later on in this course. **NB** The first one uses class components but the latter uses the new functional ones.-->
- - [Egghead.io](https://egghead.io)上的一些课程，如[开始学习React](https://egghead.io/courses/start-learning-react)质量很高，最近更新的[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)也比较好；这两个课程介绍的概念也将在本课程的后面介绍。**NB**前者使用类组件，但后者使用新的功能组件。
+  - [Egghead.io](https://egghead.io)上的一些课程，如[开始学习React](https://egghead.io/courses/start-learning-react)质量很高，最近更新的[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)也比较好；这两个课程介绍的概念也将在本课程的后面介绍。**NB**前者使用类组件，但后者使用新的功能组件。
 
 </div>
 

src/content/10/zh/part10b.md

@@ -763,7 +763,7 @@ const BodyMassIndexCalculator = () => {
  在这个例子中，我们在<em>BodyMassIndexCalculator</em>组件中定义了<em>Formik</em>上下文，并为它提供了初始值和一个提交回调。初始值是通过[initialValues](https://jaredpalmer.com/formik/docs/api/formik#initialvalues-values)prop提供的，是一个以字段名为键、以相应的初始值为值的对象。提交回调是通过[onSubmit](https://jaredpalmer.com/formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag--void--promiseany)prop提供的，它在<em>handleSubmit</em>函数被调用时被调用，条件是没有任何验证错误。<em>Formik</em>组件的子女是一个函数，它被调用的[props](https://jaredpalmer.com/formik/docs/api/formik#formik-render-methods-and-props)包括与状态有关的信息和行动，如<em>handleSubmit</em>函数。
 
 <!-- The <em>BodyMassIndexForm</em> component contains the state bindings between the context and text inputs. We use the [useField](https://jaredpalmer.com/formik/docs/api/useField) hook to get the value of a field and to change it. _useField_ hooks has one argument which is the name of the field and it returns an array with three values, <em>[field, meta, helpers]</em>. The [field object](https://jaredpalmer.com/formik/docs/api/useField#fieldinputpropsvalue) contains the value of the field, the [meta object](https://jaredpalmer.com/formik/docs/api/useField#fieldmetapropsvalue) contains field meta information such as a possible error message and the [helpers object](https://jaredpalmer.com/formik/docs/api/useField#fieldhelperprops) contains different actions for changing the state of field such as the <em>setValue</em> function. Note that the component that uses the <em>useField</em> hook has to be _within the Formik's context_. This means that the component has to be a descendant of the <em>Formik</em> component.-->
- <em>BodyMassIndexForm</em>组件包含上下文和文本输入之间的状态绑定。我们使用[useField](https://jaredpalmer.com/formik/docs/api/useField)钩子来获取一个字段的值并改变它。_useField_钩子有一个参数，是字段的名称，它返回一个有三个值的数组，<em>[field, meta, helpers]</em>。字段对象](https://jaredpalmer.com/formik/docs/api/useField#fieldinputpropsvalue)包含字段的值，[元对象](https://jaredpalmer.com/formik/docs/api/useField#fieldmetapropsvalue)包含字段的元信息，如可能的错误信息，[帮助者对象](https://jaredpalmer.com/formik/docs/api/useField#fieldhelperprops)包含改变字段状态的不同操作，如<em>setValue</em>函数。请注意，使用<em>useField</em>钩子的组件必须在Formik's context_之内。这意味着该组件必须是<em>Formik</em>组件的一个子嗣。
+ <em>BodyMassIndexForm</em>组件包含上下文和文本输入之间的状态绑定。我们使用[useField](https://jaredpalmer.com/formik/docs/api/useField)钩子来获取一个字段的值并改变它。_useField_钩子有一个参数，是字段的名称，它返回一个有三个值的数组，<em>[field, meta, helpers]</em>。[字段对象](https://jaredpalmer.com/formik/docs/api/useField#fieldinputpropsvalue)包含字段的值，[元对象](https://jaredpalmer.com/formik/docs/api/useField#fieldmetapropsvalue)包含字段的元信息，如可能的错误信息，[帮助者对象](https://jaredpalmer.com/formik/docs/api/useField#fieldhelperprops)包含改变字段状态的不同操作，如<em>setValue</em>函数。请注意，使用<em>useField</em>钩子的组件必须在Formik's context_之内。这意味着该组件必须是<em>Formik</em>组件的一个子嗣。
 
 <!-- Here is an interactive version of our previous example: [Formik example](https://snack.expo.io/@kalleilv/formik-example).-->
  这里是我们之前例子的互动版本。[Formik例子](https://snack.expo.io/@kalleilv/formik-example)。

src/content/10/zh/part10d.md

@@ -193,7 +193,7 @@ describe('Greeting', () => {
  React Native Testing Library's documentation有一些关于[如何查询不同种类的元素](https://callstack.github.io/react-native-testing-library/docs/how-should-i-query)的好提示。另一个值得阅读的指南是Kent C. Dodds的文章[Making your UI tests resilient to change](https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change)。
 
 <!-- The <em>render</em> function returns the queries and additional helpers, such as the <em>debug</em> function. The [debug](https://callstack.github.io/react-native-testing-library/docs/api#debug) function prints the rendered React tree in a user-friendly format. Use it if you are unsure what the React tree rendered by the <em>render</em> function looks like. We acquire the <em>Text</em> node containing certain text by using the <em>getByText</em> function. For all available queries, check the React Native Testing Library's [documentation](https://callstack.github.io/react-native-testing-library/docs/api-queries). The <em>toHaveTextContent</em> matcher is used to assert that the node's textual content is correct. The full list of available React Native specific matchers can be found in the [documentation](https://github.com/testing-library/jest-native#matchers) of the jest-native library. Jest's [documentation](https://jestjs.io/docs/en/expect) contains every universal Jest matcher.-->
- <em>render</em>函数返回查询和额外的辅助工具，例如<em>debug</em>函数。[debug](https://callstack.github.io/react-native-testing-library/docs/api#debug)函数以用户友好的格式打印出渲染的React树。如果你不确定<em>render</em>函数所渲染的React树是什么样子的，可以使用它。我们通过使用<em>getByText</em>函数获得包含某些文本的<em>Text</em>节点。关于所有可用的查询，请查看React Native Testing Library's [document](https://callstack.github.io/react-native-testing-library/docs/api-queries)。<em>toHaveTextContent</em>匹配器用于断定节点的文本内容是正确的。可用的React Native特定匹配器的完整列表可以在jest-native库的【文档】(https://github.com/testing-library/jest-native#matchers)中找到。Jest's [document](https://jestjs.io/docs/en/expect) 包含了所有通用的Jest匹配器。
+ <em>render</em>函数返回查询和额外的辅助工具，例如<em>debug</em>函数。[debug](https://callstack.github.io/react-native-testing-library/docs/api#debug)函数以用户友好的格式打印出渲染的React树。如果你不确定<em>render</em>函数所渲染的React树是什么样子的，可以使用它。我们通过使用<em>getByText</em>函数获得包含某些文本的<em>Text</em>节点。关于所有可用的查询，请查看React Native Testing Library's [document](https://callstack.github.io/react-native-testing-library/docs/api-queries)。<em>toHaveTextContent</em>匹配器用于断定节点的文本内容是正确的。可用的React Native特定匹配器的完整列表可以在jest-native库的[文档](https://github.com/testing-library/jest-native#matchers)中找到。Jest's [document](https://jestjs.io/docs/en/expect) 包含了所有通用的Jest匹配器。
 
 <!-- The second very important React Native Testing Library concept is firing events. We can fire an event in a provided node by using the [fireEvent](https://callstack.github.io/react-native-testing-library/docs/api#fireevent) object's methods. This is useful for example typing text into a text field or pressing a button. Here is an example of how to test submitting a simple form:-->
  第二个非常重要的React Native测试库概念是发射事件。我们可以通过使用[fireEvent](https://callstack.github.io/react-native-testing-library/docs/api#fireevent)对象的方法在所提供的节点中触发一个事件。这对于在文本字段中输入文本或按下按钮是很有用的。下面是一个如何测试提交一个简单表单的例子。

src/content/11/zh/part11a.md

@@ -183,7 +183,7 @@ lang: zh
  - 如何在点击按钮时进行部署，或者在一个分支合并到主分支时自动部署？
 
 <!-- There even exists scientific evidence on the numerous benefits the usage of CI/CD has. According to a large study reported in the book [Accelerate: The Science of Lean Software and DevOps: Building and Scaling High Performing Technology Organizations](https://itrevolution.com/book/accelerate/), the use of CI/CD correlate heavily with organizational success (e.g. improves profitability and product quality, increases market share, shortens the time to market). CI/CD even makes developers happier by reducing their burnout rate. The results summarized in the book are also reported in scientific articles such as [this](https://papers.ssrn.com/sol3/papers.cfm?abstract_id=2681909).-->
- 甚至有科学证据表明CI/CD的使用有很多好处。根据《加速》一书中报告的一项大型研究。The Science of Lean Software and DevOps: Building and Scaling High Performing Technology Organizations](https://itrevolution.com/book/accelerate/)，CI/CD的使用与组织的成功有很大关系（例如，提高利润率和产品质量，增加市场份额，缩短上市时间）。CI/CD甚至通过减少开发人员的倦怠率而使他们更快乐。书中总结的结果在科学文章中也有报道，如[这个](https://papers.ssrn.com/sol3/papers.cfm?abstract_id=2681909)。
+ 甚至有科学证据表明CI/CD的使用有很多好处。根据[《加速》](https://itrevolution.com/book/accelerate/)一书中报告的一项大型研究。，CI/CD的使用与组织的成功有很大关系（例如，提高利润率和产品质量，增加市场份额，缩短上市时间）。CI/CD甚至通过减少开发人员的倦怠率而使他们更快乐。书中总结的结果在科学文章中也有报道，如[这个](https://papers.ssrn.com/sol3/papers.cfm?abstract_id=2681909)。
 #### Documented behavior
 
 <!-- There's an old joke that a bug is just an "undocumented feature". We'd like to avoid that. We'd like to avoid any situations where we don't know the exact outcome. For example, if we depend on a label on a PR to define whether something is a "major", "minor" or "patch" release (we'll cover the meanings of those terms later), then it's important that we know what happens if a developer forgets to put a label on their PR. What if they put a label on after the build/test process has started? What happens if the developer changes the label mid-way through, which one is the one that actually releases?-->

src/content/11/zh/part11c.md

@@ -40,12 +40,12 @@ lang: zh
  - 如果一个用户在我们进行部署之前对我们的软件做了一个HTTP请求（我们没有时间向用户发送响应）会发生什么？
 
 <!-- These are just a small selection of what can go wrong during a deployment, or rather, things that we should plan for. Regardless of what happens, our deployment system should **never** leave our software in a broken state. We should also always know (or be easily able to find out) what state a deployment is in.-->
- 这些只是部署过程中可能出错的一小部分，或者说，我们应该计划的事情。无论发生什么，我们的部署系统都不应该***让我们的软件处于破碎状态。我们也应该总是知道（或者很容易找到）一个部署处于什么状态。
+ 这些只是部署过程中可能出错的一小部分，或者说，我们应该计划的事情。无论发生什么，我们的部署系统都**绝不应该**让我们的软件处于破碎状态。我们也应该总是知道（或者很容易找到）一个部署处于什么状态。
 
 <!-- Another important rule to remember when it comes to deployments (and CI in general) is:-->
  当涉及到部署（和一般的CI）时，要记住的另一个重要规则是。
 <!--   "Silent failures are **very** bad!"-->
- "无声的失败是***糟糕的！"
+ "无声的失败是**非常**糟糕的！"
 
 <!-- This doesn't mean that failures need to be shown to the users of the software, it means we need to be aware if anything goes wrong. If we are aware of a problem, we can fix it, if the deployment system doesn't give any errors but fails, we may end up in a state where we believe we have fixed a critical bug but the deployment failed, leaving the bug in our production environment and us unaware of the situation.-->
  这并不意味着故障需要显示给软件的用户，它意味着如果有什么问题，我们需要意识到。如果我们意识到一个问题，我们就可以修复它，如果部署系统没有给出任何错误，但却失败了，我们可能最终会陷入这样一种状态：我们认为我们已经修复了一个关键的错误，但部署却失败了，把这个错误留在了我们的生产环境中，而我们却没有意识到这种情况。
@@ -55,7 +55,7 @@ lang: zh
 <!-- Defining definitive rules or requirements for a deployment system is difficult, let's try anyway:-->
  为部署系统定义明确的规则或要求是困难的，无论如何让我们尝试一下。
 <!--  - Our deployment system should be able to fail gracefully at **any** step of the deployment.-->
- - 我们的部署系统应该能够在部署的***步骤中优雅地失败。
+ - 我们的部署系统应该能够在部署的**任何**步骤中优雅地失败。
 <!--  - Our deployment system should **never** leave our software in a broken state.-->
  - 我们的部署系统应该**永远不会**让我们的软件处于崩溃状态。
 <!--  - Our deployment system should let us know when a failure has happened. It's more important to notify about failure than about success.-->

src/content/11/zh/part11d.md

@@ -85,7 +85,7 @@ on:
  如果你以前没有使用过分支，可以查看[例如这个教程](https://www.atlassian.com/git/tutorials/using-branches)来开始。
 
 <!-- Note that when you open the pull request, make sure that you select here your <i>own</i> repository as the destination <i>base repository</i>. By default, the selection is the original repository by smartly and you **do not want** to do that:-->
- 注意，当你打开拉取请求时，确保在这里选择你的<i>自己的</i>仓库作为目标<i>基础仓库</i>。默认情况下，选择的是智能的原始仓库，你***不希望这样做。
+ 注意，当你打开拉取请求时，确保在这里选择你的<i>自己的</i>仓库作为目标<i>基础仓库</i>。默认情况下，选择的是智能的原始仓库，你**不希望**这样做。
 
 ![](../../images/11/15a.png)
 

src/content/12/zh/part12b.md

@@ -316,7 +316,7 @@ CMD npm start
  步骤1.通过创建一个<i>todo-app/todo-backend/Dockerfile</i>和构建一个镜像，将todo-backend容器化。
 
 <!-- Step 2. Run the todo-backend image with the correct ports open. Make sure the visit counter increases when used through a browser in http://localhost:3000/ (or some other port if you configure so)-->
- 第2步。在打开正确的端口的情况下运行todo-backend镜像。确保通过浏览器使用http://localhost:3000/（或其他端口，如果你这样配置）时，访问计数器会增加。
+ 第2步。在打开正确的端口的情况下运行todo-backend镜像。确保通过浏览器使用 http://localhost:3000/ （或其他端口，如果你这样配置）时，访问计数器会增加。
 
 <!-- Tip: Run the application outside of a container to examine it before starting to containerize.-->
  提示。在开始容器化之前，在容器外运行应用来检查它。
@@ -334,7 +334,7 @@ CMD npm start
  [Docker-compose](https://docs.docker.com/compose/)是另一个神奇的工具，它可以帮助我们管理容器。让我们开始使用docker-compose，因为它可以帮助我们节省一些配置的时间，当我们学习更多关于容器的知识。
 
 <!-- Install the docker-compose tool from this link: [https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/).-->
- 从这个链接安装docker-compose工具。[https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)。
+ 从这个链接安装docker-compose工具： [https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)
 
 <!-- Let's check that it works:-->
  让我们检查一下它是否工作。