update(cn): content/docs/add-react-to-a-website.md improve translation

seognil · seognil · commit e0d181caf7d1 · 2019-03-19T12:16:01.000+08:00
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
@@ -8,7 +8,7 @@ prev: getting-started.html
 next: create-a-new-react-app.html
 ---
 
-根据需要选择性使用 React。
+根据需要选择性地使用 React。
 
 React 从一开始就被设计为逐步采用，并且**你可以根据需要选择性地使用 React**。可能你只想在现有页面中“局部地添加交互性”。使用 React 组件是一种不错的方式。
 
@@ -21,7 +21,7 @@ React 从一开始就被设计为逐步采用，并且**你可以根据需要选
 
 ## 在一分钟内添加 React {#add-react-in-one-minute}
 
-在本小节中，我们将展示如何将 React 组件添加到现有的 HTML 页面中。你可以基于自己现有的网站，或创建一个空的 HTML 文件来练习。
+在本小节中，我们会展示如何将 React 组件添加到现有的 HTML 页面中。你可以基于自己现有的网站，或创建一个空的 HTML 文件来练习。
 
 不会涉及复杂的工具或安装需求 —— **完成这一节的内容，你只需要连接到网络，以及一分钟的时间。**
 
@@ -43,7 +43,7 @@ React 从一开始就被设计为逐步采用，并且**你可以根据需要选
 
 > 提示
 >
-> 你可以像这样在 `<body>` 标签内的**任意位置**放置一个“容器” `<div>`。根据需要，你可以在一个页面上放置多个独立的 DOM 容器。它们通常是空标签 —— React 将替换 DOM 容器内的任何现有内容。
+> 你可以像这样在 `<body>` 标签内的**任意位置**放置一个“容器” `<div>`。根据需要，你可以在一个页面上放置多个独立的 DOM 容器。它们通常是空标签 —— React 会替换 DOM 容器内的任何已有内容。
 
 ### 步骤 2：添加 Script 标签 {#step-2-add-the-script-tags}
 
@@ -69,13 +69,13 @@ React 从一开始就被设计为逐步采用，并且**你可以根据需要选
 
 在 HTML 页面文件的同级目录下创建一个名为 `like_button.js` 的文件。
 
-打开 **[这个入门代码](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 并粘贴到你创建的文件中。
+查看**[这段入门代码](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**并把它粘贴到你创建的文件中。
 
 > 提示
 >
-> 这段代码定义了一个名为 `LikeButton` 的 React 组件。如果你还不明白这段代码的意思，不用担心 —— 我们将在后面的 [入门教程](/tutorial/tutorial.html) 和 [核心概念](/docs/hello-world.html) 中介绍 React 的构建块。现在，让我们只是把它显示在屏幕上！
+> 这段代码定义了一个名为 `LikeButton` 的 React 组件。如果你还不明白这段代码的意思，不用担心 —— 我们将在后续的[入门教程](/tutorial/tutorial.html)和[核心概念](/docs/hello-world.html)中介绍 React 的构建块。现在，让我们只是把它显示在屏幕上！
 
-在 `like_button.js` 的底部，在 **[入门代码](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 之后，加入以下两行代码。
+在 `like_button.js` 的底部，在**[入门代码](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**之后，加入以下两行代码。
 
 ```js{3,4}
 // ... 你粘贴的入门代码 ...
@@ -84,7 +84,7 @@ const domContainer = document.querySelector('#like_button_container');
 ReactDOM.render(e(LikeButton), domContainer);
 ```
 
-这两行代码会找到我们在步骤 1 中添加到 HTML 里的 `<div>`，然后在它内部显示我们的 “Like” 按钮 React 组件。
+这两行代码会找到我们在步骤 1 中添加到 HTML 里的 `<div>`，然后在它内部显示我们的 React 组件 “Like” 按钮。
 
 ### 就是这么简单！ {#thats-it}
 
@@ -106,7 +106,7 @@ ReactDOM.render(e(LikeButton), domContainer);
 
 > 注意
 >
-> 当页面中以 React 驱动的不同部分是相互独立的时候，这种策略通常非常有用。在 React 代码中，使用 [组件组合（component composition）](/docs/components-and-props.html#composing-components)  来实现会更容易。
+> 当页面中以 React 驱动的不同部分是相互独立的时候，这种策略通常非常有用。在 React 代码中，使用[组件组合（component composition）](/docs/components-and-props.html#composing-components) 来实现会更容易。
 
 ### 提示：为生产环境压缩 JavaScript 代码 {#tip-minify-javascript-for-production}
 
@@ -136,7 +136,7 @@ return e(
 );
 ```
 
-但是，React 还提供了一种用 [JSX](/docs/introducing-jsx.html) 来代替实现的选项：
+但是，React 还提供了一种用 [JSX](/docs/introducing-jsx.html) 来代替实现的选择：
 
 ```js
 // 显示一个 "Like" <button>
@@ -149,7 +149,7 @@ return (
 
 这两段代码是等价的。虽然 **JSX [完全是可选的](/docs/react-without-jsx.html)**，但是很多人认为它有助于编写 UI 代码 —— 无论是使用 React 还是其它库。
 
-你可以用 [这个在线转换器](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=) 来试试 JSX。
+你可以用[这个在线转换器](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=)来试试 JSX。
 
 ### 快速尝试 JSX {#quickly-try-jsx}
 
@@ -159,27 +159,27 @@ return (
 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 ```
 
-现在，你可以在任何 `<script>` 标签内使用 JSX，方法是在为其添加 `type="text/babel"` 属性。这是 [一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html)，你可以下载并尝试使用。
+现在，你可以在任何 `<script>` 标签内使用 JSX，方法是在为其添加 `type="text/babel"` 属性。这是[一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html)，你可以下载并尝试使用。
 
 这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且**不适用于生产环境**。当你准备好更进一步时，删除你添加的这个新的 `<script>` 标签以及`type="text/babel"` 属性。取而代之的，在下一小节中，你将设置一个 JSX 预处理器来自动转换所有 `<script>` 标签的内容。
 
 ### 将 JSX 添加到项目 {#add-jsx-to-a-project}
 
 将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上，添加 JSX **就像添加 CSS 预处理器一样**。唯一的要求是你在计算机上安装了 [Node.js](https://nodejs.org/)。
 
-在终端跳转到你的项目文件夹，然后粘贴这两个命令：
+在终端上跳转到你的项目文件夹，然后粘贴这两个命令：
 
 1. **步骤 1：** 执行 `npm init -y` （如果失败，[这是修复办法](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d)）
 2. **步骤 2：** 执行 `npm install babel-cli@6 babel-preset-react-app@3`
 
 > 提示
 >
-> 我们 **在这里使用 npm 只是用来安装 JSX 预处理器**，之后你不再需要它。React 和应用程序代码都可以继续使用 `<script>` 标签而不做任何更改。
+> 我们**在这里使用 npm 只是用来安装 JSX 预处理器**，之后你不再需要它。React 和应用程序代码都可以继续使用 `<script>` 标签而不做任何更改。
 
-恭喜！ 你刚刚为你的项目加入了一个**生产就绪（production-ready）的 JSX 配置环境**。
+恭喜！你刚刚为你的项目加入了一个**生产就绪（production-ready）的 JSX 配置环境**。
 
 
-### 运行 JSX 预解析器 {#run-jsx-preprocessor}
+### 运行 JSX 预处理器 {#run-jsx-preprocessor}
 
 创建一个名为 `src` 的文件夹并执行这个终端命令：
 
@@ -191,12 +191,12 @@ npx babel --watch src --out-dir . --presets react-app/prod
 >
 > `npx` 不是拼写错误 —— 它是 [npm 5.2+ 附带的 package 运行工具](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)。
 >
-> 如果你看到一个错误消息显示为： "You have mistakenly installed the `babel` package"，你可能错过了 [上一步](#add-jsx-to-a-project)。在同一个文件夹中执行它，然后重试。
+> 如果你看到一个错误消息显示为："You have mistakenly installed the `babel` package"，你可能错过了[上一步](#add-jsx-to-a-project)。在同一个文件夹中执行它，然后重试。
 
 别等着它结束 —— 这个命令启动了一个对 JSX 的自动监听器。
 
-如果你用 **[JSX 入门代码](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)** 创建了一个 `src/like_button.js` 文件，监听器会创建一个预处理过的 `like_button.js` 文件，它包含了适用于浏览器的朴素的 JavaScript 代码。当你编辑带有 JSX 的源文件时，转换过程将自动重新执行。
+如果此时你用这段 **[JSX 入门代码](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**创建一个 `src/like_button.js` 文件，监听器会创建一个预处理过的 `like_button.js` 文件，它包含了适用于浏览器的朴素的 JavaScript 代码。当你编辑带有 JSX 的源文件时，转换过程将自动重新执行。
 
-还有一个福利，这也使你能使用现代 JavaScript 的语法特性，比如 class，而不用担心在旧浏览器上失效。我们刚才使用的工具叫 Babel，你可以从[其文档](http://babeljs.io/docs/en/babel-cli/)中了解更多。
+这样，在旧浏览器上也能够使用现代 JavaScript 的语法特性，比如 class。我们刚才使用的工具叫 Babel，你可以从[它的文档](https://babeljs.io/docs/en/babel-cli/)中了解更多。
 
-如果你认为你已经习惯了构建工具，并希望它们能为你做更多事，[下一章节](/docs/create-a-new-react-app.html)描述了一些最流行和易上手的工具链。如果不使用构建工具 —— 那些 script 标签也可以工作很好！
+如果你认为你已经习惯了构建工具，并希望它们能为你做更多事，[下一章节](/docs/create-a-new-react-app.html)描述了一些最流行和易上手的工具链。如果不使用构建工具 —— 那些 script 标签也可以很好地完成工作！
