From 19d9529684603b568f9e4c53746a2108cb213468 Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Fri, 1 Feb 2019 18:50:47 -0600
Subject: [PATCH 01/23] translate up to embedding-expressions-in-jsx

---
 content/docs/introducing-jsx.md | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index edc5c868c4..33ffb379cc 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,36 +1,38 @@
 ---
 id: introducing-jsx
-title: Introducing JSX
+title: JSX 简介
 permalink: docs/introducing-jsx.html
 prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Consider this variable declaration:
+我们来观察一下声明的这个变量：
 
 ```js
 const element = <h1>Hello, world!</h1>;
 ```
 
-This funny tag syntax is neither a string nor HTML.
+这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
 
-It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
+它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描写用户界面。JSX 可能乍一看像模版语言，但它具有JavaScript 的全部功能。
 
-JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
+JSX 生成 React "元素"。We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
 
-### Why JSX?
+我们将在[下一章节]（/ docs / rendering-elements.html）中探索如何将这些元素渲染到DOM里去。 下面，我们来看一看JSX的基本使用方法，以帮助您入门。
 
-React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
+### 为什么使用JSX？
 
-Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
+React 认为渲染逻辑本质上与其他UI逻辑一脉相通，比如，如何处理事件，状态如何随时间变化，以及如何把数据展示出来。
 
-React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
+React 并没有把标记语言 (markup) 和逻辑这两个东西区分放在不同的文件里，而是使用松散耦合的单元分离“关注点” (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节]（/docs /components-and-props.html）里重新回到“组件”，但如果你还不熟悉在JS里使用标记 (markup)，[这个视频解说]（https://www.youtube .com / watch？v = x7cQ3mrcKaY）可能会说服你。
 
-With that out of the way, let's get started!
+React 也可以不要求使用 JSX (/docs /react-without-jsx.html)，但大多数人觉得在 JavaScript 代码中处理UI时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也帮助 React 显示更多有用的错误和警告消息。
 
-### Embedding Expressions in JSX
+明白了这个，让我们开始吧！
 
-In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
+### 在JSX中嵌入表达式
+
+在下面的例子中，我们声明了一个名为`name`的变量，然后在JSX中使用它，并将它包装在花括号中：
 
 ```js{1,2}
 const name = 'Josh Perez';
@@ -42,9 +44,9 @@ ReactDOM.render(
 );
 ```
 
-You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
+你可以在 JSX 中的花括号内放置任何有效的[JavaScript表达式]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions）。 例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的JavaScript表达式。
 
-In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
+在下面的示例中，我们将调用JavaScript函数`formatName（user）`的结果， 并将结果嵌入到`<h1>`元素中。
 
 ```js{12}
 function formatName(user) {

From 3fce1866596af4e98011b16919e94833273f6c53 Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Fri, 1 Feb 2019 19:36:49 -0600
Subject: [PATCH 02/23] translate up until jsx-injection-attack

---
 content/docs/introducing-jsx.md | 56 ++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 33ffb379cc..fc2fb98263 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,15 +14,15 @@ const element = <h1>Hello, world!</h1>;
 
 这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
 
-它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描写用户界面。JSX 可能乍一看像模版语言，但它具有JavaScript 的全部功能。
+它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 可能乍一看像模版语言，但它具有JavaScript 的全部功能。
 
 JSX 生成 React "元素"。We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
 
-我们将在[下一章节]（/ docs / rendering-elements.html）中探索如何将这些元素渲染到DOM里去。 下面，我们来看一看JSX的基本使用方法，以帮助您入门。
+我们将在 [下一章节]（/ docs / rendering-elements.html）中探索如何将这些元素渲染到DOM里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
 
-### 为什么使用JSX？
+### 为什么使用 JSX？
 
-React 认为渲染逻辑本质上与其他UI逻辑一脉相通，比如，如何处理事件，状态如何随时间变化，以及如何把数据展示出来。
+React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件，状态如何随时间变化，以及如何把数据展示出来。
 
 React 并没有把标记语言 (markup) 和逻辑这两个东西区分放在不同的文件里，而是使用松散耦合的单元分离“关注点” (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节]（/docs /components-and-props.html）里重新回到“组件”，但如果你还不熟悉在JS里使用标记 (markup)，[这个视频解说]（https://www.youtube .com / watch？v = x7cQ3mrcKaY）可能会说服你。
 
@@ -30,9 +30,9 @@ React 也可以不要求使用 JSX (/docs /react-without-jsx.html)，但大多
 
 明白了这个，让我们开始吧！
 
-### 在JSX中嵌入表达式
+### 在 JSX 中嵌入表达式
 
-在下面的例子中，我们声明了一个名为`name`的变量，然后在JSX中使用它，并将它包装在花括号中：
+在下面的例子中，我们声明了一个名为 `name` 的变量，然后在JSX中使用它，并将它包装在花括号中：
 
 ```js{1,2}
 const name = 'Josh Perez';
@@ -44,9 +44,9 @@ ReactDOM.render(
 );
 ```
 
-你可以在 JSX 中的花括号内放置任何有效的[JavaScript表达式]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions）。 例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的JavaScript表达式。
+你可以在 JSX 中的花括号内放置任何有效的 [JavaScript 表达式]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions）。 例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的 JavaScript 表达式。
 
-在下面的示例中，我们将调用JavaScript函数`formatName（user）`的结果， 并将结果嵌入到`<h1>`元素中。
+在下面的示例中，我们将调用 JavaScript 函数 `formatName（user）` 的结果， 并将结果嵌入到 `<h1>` 元素中。
 
 ```js{12}
 function formatName(user) {
@@ -70,15 +70,16 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://introducing-jsx)
+[在codepen上运行](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
+为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们建议将其包装在括号中，以避免 [分号自动插入] 的问题发生（http://stackoverflow.com/q/2846283）。
 
-### JSX is an Expression Too
+### JSX 本身也是一种表达式
 
-After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
+在编译之后呢，JSX 会被转化为普通的 JavaScript 函数调用， 变成 JavaScript 对象。
 
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
+
+也就是说，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值：
 
 ```js{3,5}
 function getGreeting(user) {
@@ -89,37 +90,38 @@ function getGreeting(user) {
 }
 ```
 
-### Specifying Attributes with JSX
+### JSX 属性
 
-You may use quotes to specify string literals as attributes:
+你可以使用引号来定义以字符串为值的属性：
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-You may also use curly braces to embed a JavaScript expression in an attribute:
+也可以使用大括号来定义以 JavaScript 表达式为值的属性：
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+切记，如果把 JavaScript 表达式镶嵌在大括号里，大括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。要么，你只使用用引号（对象是字符串），要么使用大阔号 （对象是表达式），但这两个不能在同一个属性出现。
 
->**Warning:**
+>**警告：**
 >
->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
+>因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase （小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
 >
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
+>例如，JSX 里的 class 变成了 className (https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 tabindex 则对应着 tabIndex (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
 
-### Specifying Children with JSX
+### 使用 JSX 指定子项
 
 If a tag is empty, you may close it immediately with `/>`, like XML:
+假如某个标签里面没有内容，你可以把它当作 XML  ，在末尾加上 `/>` 来关上它。
 
 ```js
 const element = <img src={user.avatarUrl} />;
 ```
 
-JSX tags may contain children:
+JSX 标签里能够包含很多子项:
 
 ```js
 const element = (
@@ -130,17 +132,19 @@ const element = (
 );
 ```
 
-### JSX Prevents Injection Attacks
+### JSX 防止注入攻击
 
-It is safe to embed user input in JSX:
+你可以放心地在 JSX 当中使用用户输入：
 
 ```js
 const title = response.potentiallyMaliciousInput;
-// This is safe:
+// 直接使用是安全的：
 const element = <h1>{title}</h1>;
 ```
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them.  Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+
+React DOM 在渲染之前默认会 过滤(http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
 
 ### JSX Represents Objects
 

From faa60d3f1200b74bf914940b03c07132ed12eb53 Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Fri, 1 Feb 2019 19:51:14 -0600
Subject: [PATCH 03/23] translate rest of intro jsx page

---
 content/docs/introducing-jsx.md | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index fc2fb98263..205536a5b1 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -146,11 +146,12 @@ By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which
 
 React DOM 在渲染之前默认会 过滤(http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
 
-### JSX Represents Objects
+### JSX 代表着对象（Objects）
 
-Babel compiles JSX down to `React.createElement()` calls.
+Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
+
+下面两种代码的作用是完全相同的：
 
-These two examples are identical:
 
 ```js
 const element = (
@@ -168,7 +169,7 @@ const element = React.createElement(
 );
 ```
 
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
+React.createElement() 这个方法首先会进行一些避免bug的检查，但更主要的是会返回一个类似下面例子的对象：
 
 ```js
 // Note: this structure is simplified
@@ -181,10 +182,13 @@ const element = {
 };
 ```
 
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
-
-We will explore rendering React elements to the DOM in the next section.
+这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
 
+我们将在下一节中探索将如何React元素呈现给DOM。
 >**Tip:**
 >
 >We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+
+Tip:
+
+我们建议您使用 [“Babel”语言定义] 工具（http://babeljs.io/docs/editors）作为您选择的编辑器的辅助，以便正确突出显示ES6和JSX代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。

From 3fe4e349d1b74f722241ecbcf59a63d304a5e014 Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Fri, 1 Feb 2019 20:10:10 -0600
Subject: [PATCH 04/23] modify some word translations

---
 content/docs/introducing-jsx.md | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 205536a5b1..b604473ca8 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,11 +14,9 @@ const element = <h1>Hello, world!</h1>;
 
 这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
 
-它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 可能乍一看像模版语言，但它具有JavaScript 的全部功能。
+它被称为 JSX， 是基于JavaScript 语法的一种扩展。 我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有JavaScript 的全部功能。
 
-JSX 生成 React "元素"。We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
-
-我们将在 [下一章节]（/ docs / rendering-elements.html）中探索如何将这些元素渲染到DOM里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
+JSX 生成 React "元素"。我们将在 [下一章节]（/ docs / rendering-elements.html）中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
 
 ### 为什么使用 JSX？
 
@@ -26,13 +24,13 @@ React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如
 
 React 并没有把标记语言 (markup) 和逻辑这两个东西区分放在不同的文件里，而是使用松散耦合的单元分离“关注点” (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节]（/docs /components-and-props.html）里重新回到“组件”，但如果你还不熟悉在JS里使用标记 (markup)，[这个视频解说]（https://www.youtube .com / watch？v = x7cQ3mrcKaY）可能会说服你。
 
-React 也可以不要求使用 JSX (/docs /react-without-jsx.html)，但大多数人觉得在 JavaScript 代码中处理UI时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也帮助 React 显示更多有用的错误和警告消息。
+React 里也可以不要求使用 JSX (/docs /react-without-jsx.html)，但大多数人觉得，淡定在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
 
-明白了这个，让我们开始吧！
+明白了这个，让我们开始写代码吧！
 
 ### 在 JSX 中嵌入表达式
 
-在下面的例子中，我们声明了一个名为 `name` 的变量，然后在JSX中使用它，并将它包装在花括号中：
+在下面的例子中，我们声明了一个名为 `name` 的变量，然后在 JSX 中使用它，并将它包装在大括号中：
 
 ```js{1,2}
 const name = 'Josh Perez';
@@ -72,14 +70,13 @@ ReactDOM.render(
 
 [在codepen上运行](codepen://introducing-jsx)
 
-为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们建议将其包装在括号中，以避免 [分号自动插入] 的问题发生（http://stackoverflow.com/q/2846283）。
+为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们还是建议将其包装在括号中，以避免 [分号自动插入] 的问题发生（http://stackoverflow.com/q/2846283）。
 
 ### JSX 本身也是一种表达式
 
-在编译之后呢，JSX 会被转化为普通的 JavaScript 函数调用， 变成 JavaScript 对象。
-
+在编译之后，JSX 会被转化为普通的 JavaScript 函数调用， 变成 JavaScript 对象。
 
-也就是说，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值：
+也就是说，你可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，并作为返回值：
 
 ```js{3,5}
 function getGreeting(user) {
@@ -114,7 +111,6 @@ const element = <img src={user.avatarUrl}></img>;
 
 ### 使用 JSX 指定子项
 
-If a tag is empty, you may close it immediately with `/>`, like XML:
 假如某个标签里面没有内容，你可以把它当作 XML  ，在末尾加上 `/>` 来关上它。
 
 ```js

From 22ee44f6d5d7a46b69925b3a4f4d4a8be15da09b Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Sun, 3 Feb 2019 06:43:37 -0600
Subject: [PATCH 05/23] Reformatting sentences

---
 content/docs/introducing-jsx.md | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index b604473ca8..68cc877a11 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,17 +14,17 @@ const element = <h1>Hello, world!</h1>;
 
 这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
 
-它被称为 JSX， 是基于JavaScript 语法的一种扩展。 我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有JavaScript 的全部功能。
+它被称为 JSX， 是基于 JavaScript 语法的一种扩展。 我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有 JavaScript 的全部功能。
 
-JSX 生成 React "元素"。我们将在 [下一章节]（/ docs / rendering-elements.html）中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
+JSX 生成 React "元素"。我们将在[下一章节] (/docs /rendering-elements.html) 中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
 
 ### 为什么使用 JSX？
 
 React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件，状态如何随时间变化，以及如何把数据展示出来。
 
-React 并没有把标记语言 (markup) 和逻辑这两个东西区分放在不同的文件里，而是使用松散耦合的单元分离“关注点” (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节]（/docs /components-and-props.html）里重新回到“组件”，但如果你还不熟悉在JS里使用标记 (markup)，[这个视频解说]（https://www.youtube .com / watch？v = x7cQ3mrcKaY）可能会说服你。
+React 并没有把标记语言和逻辑这两个东西区分放在不同的文件里，而是使用松散耦合的单元把“关注点”分离 (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节] (/docs /components-and-props.html) 里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说] (https://www.youtube.com/watchv = x7cQ3mrcKaY) 可能会说服你。
 
-React 里也可以不要求使用 JSX (/docs /react-without-jsx.html)，但大多数人觉得，淡定在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
+React 里也可以不要求使用 JSX (/docs/react-without-jsx.html)，但大多数人觉得，淡定在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
 
 明白了这个，让我们开始写代码吧！
 
@@ -42,7 +42,7 @@ ReactDOM.render(
 );
 ```
 
-你可以在 JSX 中的花括号内放置任何有效的 [JavaScript 表达式]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions）。 例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的 JavaScript 表达式。
+你可以在 JSX 中的大括号内放置任何有效的[JavaScript 表达式] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的 JavaScript 表达式。
 
 在下面的示例中，我们将调用 JavaScript 函数 `formatName（user）` 的结果， 并将结果嵌入到 `<h1>` 元素中。
 
@@ -70,7 +70,7 @@ ReactDOM.render(
 
 [在codepen上运行](codepen://introducing-jsx)
 
-为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们还是建议将其包装在括号中，以避免 [分号自动插入] 的问题发生（http://stackoverflow.com/q/2846283）。
+为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们还是建议将其包装在括号中，以避免[分号自动插入]的问题发生 (http://stackoverflow.com/q/2846283)。
 
 ### JSX 本身也是一种表达式
 
@@ -101,7 +101,7 @@ const element = <div tabIndex="0"></div>;
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-切记，如果把 JavaScript 表达式镶嵌在大括号里，大括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。要么，你只使用用引号（对象是字符串），要么使用大阔号 （对象是表达式），但这两个不能在同一个属性出现。
+切记，如果把 JavaScript 表达式镶嵌在大括号里，大括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。你可以只使用引号 （当对象是字符串），或者使用大阔号（当对象是表达式），但这两个不能在同一个属性里出现。
 
 >**警告：**
 >
@@ -111,7 +111,7 @@ const element = <img src={user.avatarUrl}></img>;
 
 ### 使用 JSX 指定子项
 
-假如某个标签里面没有内容，你可以把它当作 XML  ，在末尾加上 `/>` 来关上它。
+假如一个标签里面没有内容，你可以把它当作 XML ，在末尾加上 `/>` 来关上它。
 
 ```js
 const element = <img src={user.avatarUrl} />;
@@ -138,11 +138,9 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them.  Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+React DOM 在渲染之前默认会过滤 (http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
 
-React DOM 在渲染之前默认会 过滤(http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
-
-### JSX 代表着对象（Objects）
+### JSX 代表对象（Objects）
 
 Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
 
@@ -165,7 +163,7 @@ const element = React.createElement(
 );
 ```
 
-React.createElement() 这个方法首先会进行一些避免bug的检查，但更主要的是会返回一个类似下面例子的对象：
+React.createElement() 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
 
 ```js
 // Note: this structure is simplified
@@ -180,11 +178,8 @@ const element = {
 
 这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
 
-我们将在下一节中探索将如何React元素呈现给DOM。
->**Tip:**
->
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+我们将在下一节中探索如何将 React 元素渲染到 DOM。
 
 Tip:
 
-我们建议您使用 [“Babel”语言定义] 工具（http://babeljs.io/docs/editors）作为您选择的编辑器的辅助，以便正确突出显示ES6和JSX代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。
+我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。

From 6079c7f4c0d8ec6897d278050fafac860163647b Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Sun, 3 Feb 2019 16:24:44 -0600
Subject: [PATCH 06/23] fix errors on translation and delete spaces

---
 content/docs/introducing-jsx.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 68cc877a11..13b573dc9c 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,17 +14,17 @@ const element = <h1>Hello, world!</h1>;
 
 这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
 
-它被称为 JSX， 是基于 JavaScript 语法的一种扩展。 我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有 JavaScript 的全部功能。
+它被称为 JSX， 是基于 JavaScript 语法的一种扩展。我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有 JavaScript 的全部功能。
 
-JSX 生成 React "元素"。我们将在[下一章节] (/docs /rendering-elements.html) 中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
+JSX 生成 React "元素"。我们将在[下一章节] (/docs/rendering-elements.html) 中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
 
 ### 为什么使用 JSX？
 
-React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件，状态如何随时间变化，以及如何把数据展示出来。
+React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件、状态如何随时间变化，以及如何把数据展示出来。
 
-React 并没有把标记语言和逻辑这两个东西区分放在不同的文件里，而是使用松散耦合的单元把“关注点”分离 (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节] (/docs /components-and-props.html) 里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说] (https://www.youtube.com/watchv = x7cQ3mrcKaY) 可能会说服你。
+React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行“关注点”分离 (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节] (/docs /components-and-props.html) 里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说] (https://www.youtube.com/watchv = x7cQ3mrcKaY) 可能会说服你。
 
-React 里也可以不要求使用 JSX (/docs/react-without-jsx.html)，但大多数人觉得，淡定在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
+React 里并非一定要使用 JSX (/docs/react-without-jsx.html)，但大多数人觉得，在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
 
 明白了这个，让我们开始写代码吧！
 

From 4f6b4692b883038358b1d5ffdc3b0723ca848d30 Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Wed, 6 Feb 2019 19:39:57 +0800
Subject: [PATCH 07/23] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/introducing-jsx.md | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 13b573dc9c..631db528a9 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,17 +14,17 @@ const element = <h1>Hello, world!</h1>;
 
 这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
 
-它被称为 JSX， 是基于 JavaScript 语法的一种扩展。我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有 JavaScript 的全部功能。
+它被称为 JSX，是基于 JavaScript 语法的一种扩展。我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有 JavaScript 的全部功能。
 
-JSX 生成 React "元素"。我们将在[下一章节] (/docs/rendering-elements.html) 中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
+JSX 生成 React "元素"。我们将在[下一章节](/docs/rendering-elements.html) 中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
 
 ### 为什么使用 JSX？
 
 React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件、状态如何随时间变化，以及如何把数据展示出来。
 
-React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行“关注点”分离 (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节] (/docs /components-and-props.html) 里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说] (https://www.youtube.com/watchv = x7cQ3mrcKaY) 可能会说服你。
+React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行 [*关注点*分离](https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节](/docs/components-and-props.html)里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说](https://www.youtube.com/watch?v=x7cQ3mrcKaY) 可能会说服你。
 
-React 里并非一定要使用 JSX (/docs/react-without-jsx.html)，但大多数人觉得，在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
+React 里[并非一定要使用 JSX](/docs/react-without-jsx.html)，但大多数人觉得，在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
 
 明白了这个，让我们开始写代码吧！
 
@@ -42,9 +42,9 @@ ReactDOM.render(
 );
 ```
 
-你可以在 JSX 中的大括号内放置任何有效的[JavaScript 表达式] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的 JavaScript 表达式。
+你可以在 JSX 中的大括号内放置任何有效的[JavaScript 表达式] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName`或 `formatName(user)` 都是有效的 JavaScript 表达式。
 
-在下面的示例中，我们将调用 JavaScript 函数 `formatName（user）` 的结果， 并将结果嵌入到 `<h1>` 元素中。
+在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果， 并将结果嵌入到 `<h1>` 元素中。
 
 ```js{12}
 function formatName(user) {
@@ -68,15 +68,15 @@ ReactDOM.render(
 );
 ```
 
-[在codepen上运行](codepen://introducing-jsx)
+[](codepen://introducing-jsx)
 
-为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们还是建议将其包装在括号中，以避免[分号自动插入]的问题发生 (http://stackoverflow.com/q/2846283)。
+为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们还是建议将其包装在括号中，以避免[分号自动插入](http://stackoverflow.com/q/2846283)的问题发生 。
 
 ### JSX 本身也是一种表达式
 
 在编译之后，JSX 会被转化为普通的 JavaScript 函数调用， 变成 JavaScript 对象。
 
-也就是说，你可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，并作为返回值：
+也就是说，你可以在 `if` 或者 `for` 语句里使用 JSX，将它赋值给变量，当作参数传入，并作为返回值：
 
 ```js{3,5}
 function getGreeting(user) {
@@ -105,9 +105,9 @@ const element = <img src={user.avatarUrl}></img>;
 
 >**警告：**
 >
->因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase （小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
+>因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
 >
->例如，JSX 里的 class 变成了 className (https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 tabindex 则对应着 tabIndex (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
+>例如，JSX 里的 `class` 变成了 [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 `tabindex` 则对应着 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
 
 ### 使用 JSX 指定子项
 
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM 在渲染之前默认会过滤 (http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
+React DOM 在渲染之前默认会 [过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS (跨站脚本)](https://en.wikipedia.org/wiki/Cross-site_scripting) 攻击。
 
 ### JSX 代表对象（Objects）
 
@@ -146,7 +146,6 @@ Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法
 
 下面两种代码的作用是完全相同的：
 
-
 ```js
 const element = (
   <h1 className="greeting">
@@ -163,7 +162,7 @@ const element = React.createElement(
 );
 ```
 
-React.createElement() 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
+`React.createElement()` 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
 
 ```js
 // Note: this structure is simplified
@@ -180,6 +179,6 @@ const element = {
 
 我们将在下一节中探索如何将 React 元素渲染到 DOM。
 
-Tip:
-
-我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。
+>**Tip:**
+>
+>我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。

From 5bdde965ffce1eb58abd45bf2c29d657489961a6 Mon Sep 17 00:00:00 2001
From: Haimeng Zhang <hzhang1@macalester.edu>
Date: Fri, 8 Feb 2019 02:23:40 -0600
Subject: [PATCH 08/23] modifying translations

---
 content/docs/introducing-jsx.md | 104 ++++++++++++++++----------------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 631db528a9..6a902af1a6 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -6,27 +6,27 @@ prev: hello-world.html
 next: rendering-elements.html
 ---
 
-我们来观察一下声明的这个变量：
+考虑如下声明变量：
 
 ```js
 const element = <h1>Hello, world!</h1>;
 ```
 
-这个语法标记看起来很奇怪，因为它既不是字符串也不是 HTML。
+这个有趣的标签语法既不是字符串也不是 HTML。
 
-它被称为 JSX，是基于 JavaScript 语法的一种扩展。我们推荐大家用它来描述用户界面。JSX 可能乍一看像模版语言，但它具有 JavaScript 的全部功能。
+它被称为 JSX， 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX ， JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能使人想起模版语言，但它具有 JavaScript 的全部功能。
 
-JSX 生成 React "元素"。我们将在[下一章节](/docs/rendering-elements.html) 中探索如何将这些元素渲染到 DOM 里。 下面，我们来看一看 JSX 的基本使用方法，以帮助您入门。
+JSX 生成 React "元素"。我们将在[下一章节] (/docs/rendering-elements.html) 中探讨如何将这些元素渲染到 DOM 里。 下面，我们来看一下开始学习 JSX 的所需的基础知识。
 
 ### 为什么使用 JSX？
 
 React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件、状态如何随时间变化，以及如何把数据展示出来。
 
-React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行 [*关注点*分离](https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节](/docs/components-and-props.html)里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说](https://www.youtube.com/watch?v=x7cQ3mrcKaY) 可能会说服你。
+React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行“关注点”分离 (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节] (/docs /components-and-props.html) 里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说] (https://www.youtube.com/watchv = x7cQ3mrcKaY) 可能会说服你。
 
-React 里[并非一定要使用 JSX](/docs/react-without-jsx.html)，但大多数人觉得，在 JavaScript 代码中与 UI 打交道时，JSX 是一种有用的视觉辅助工具。除此之外，JSX 也能帮助 React 显示更多有用的错误和警告消息。
+React 不一定要使用 JSX (/docs/react-without-jsx.html)，但是大多数人发现在JavaScript 代码中使用 UI 时它是一种有用的视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
 
-明白了这个，让我们开始写代码吧！
+弄清楚这个，让我们开始吧！
 
 ### 在 JSX 中嵌入表达式
 
@@ -37,53 +37,53 @@ const name = 'Josh Perez';
 const element = <h1>Hello, {name}</h1>;
 
 ReactDOM.render(
-  element,
-  document.getElementById('root')
+element,
+document.getElementById('root')
 );
 ```
 
-你可以在 JSX 中的大括号内放置任何有效的[JavaScript 表达式] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName`或 `formatName(user)` 都是有效的 JavaScript 表达式。
+你可以在 JSX 中的大括号内放置任何有效的[JavaScript 表达式] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的 JavaScript 表达式。
 
-在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果， 并将结果嵌入到 `<h1>` 元素中。
+在下面的示例中，我们将调用 JavaScript 函数 `formatName（user）` 的结果， 并将结果嵌入到 `<h1>` 元素中。
 
 ```js{12}
 function formatName(user) {
-  return user.firstName + ' ' + user.lastName;
+return user.firstName + ' ' + user.lastName;
 }
 
 const user = {
-  firstName: 'Harper',
-  lastName: 'Perez'
+firstName: 'Harper',
+lastName: 'Perez'
 };
 
 const element = (
-  <h1>
-    Hello, {formatName(user)}!
-  </h1>
+<h1>
+Hello, {formatName(user)}!
+</h1>
 );
 
 ReactDOM.render(
-  element,
-  document.getElementById('root')
+element,
+document.getElementById('root')
 );
 ```
 
-[](codepen://introducing-jsx)
+[在codepen上运行](codepen://introducing-jsx)
 
-为了便于阅读，我们一般分多行来书写 JSX 代码。 虽然不一定要拆分它，但如果要分行书写，我们还是建议将其包装在括号中，以避免[分号自动插入](http://stackoverflow.com/q/2846283)的问题发生 。
+为了便于阅读，我们将 JSX 拆分为多行。 虽然不需要这样，但在执行此操作时，我们还是建议将其包装在括号中，以避免掉入[分号自动插入]的陷阱 (http://stackoverflow.com/q/2846283)。
 
 ### JSX 本身也是一种表达式
 
-在编译之后，JSX 会被转化为普通的 JavaScript 函数调用， 变成 JavaScript 对象。
+编译之后，JSX 表达式成为常规 JavaScript 函数调用， 并评估为 JavaScript 对象。
 
-也就是说，你可以在 `if` 或者 `for` 语句里使用 JSX，将它赋值给变量，当作参数传入，并作为返回值：
+这意味着你可以在 if 语句和 for 循环中使用 JSX，将其赋值给变量，当作参数传入，并从函数返回它：
 
 ```js{3,5}
 function getGreeting(user) {
-  if (user) {
-    return <h1>Hello, {formatName(user)}!</h1>;
-  }
-  return <h1>Hello, Stranger.</h1>;
+if (user) {
+return <h1>Hello, {formatName(user)}!</h1>;
+}
+return <h1>Hello, Stranger.</h1>;
 }
 ```
 
@@ -105,9 +105,9 @@ const element = <img src={user.avatarUrl}></img>;
 
 >**警告：**
 >
->因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
+>因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase （小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
 >
->例如，JSX 里的 `class` 变成了 [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 `tabindex` 则对应着 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
+>例如，JSX 里的 class 变成了 className (https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 tabindex 则对应着 tabIndex (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
 
 ### 使用 JSX 指定子项
 
@@ -121,10 +121,10 @@ JSX 标签里能够包含很多子项:
 
 ```js
 const element = (
-  <div>
-    <h1>Hello!</h1>
-    <h2>Good to see you here.</h2>
-  </div>
+<div>
+<h1>Hello!</h1>
+<h2>Good to see you here.</h2>
+</div>
 );
 ```
 
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM 在渲染之前默认会 [过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS (跨站脚本)](https://en.wikipedia.org/wiki/Cross-site_scripting) 攻击。
+React DOM 在渲染之前默认会过滤 (http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
 
 ### JSX 代表对象（Objects）
 
@@ -146,39 +146,41 @@ Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法
 
 下面两种代码的作用是完全相同的：
 
+
 ```js
 const element = (
-  <h1 className="greeting">
-    Hello, world!
-  </h1>
+<h1 className="greeting">
+Hello, world!
+</h1>
 );
 ```
 
 ```js
 const element = React.createElement(
-  'h1',
-  {className: 'greeting'},
-  'Hello, world!'
+'h1',
+{className: 'greeting'},
+'Hello, world!'
 );
 ```
 
-`React.createElement()` 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
+React.createElement() 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
 
 ```js
 // Note: this structure is simplified
 const element = {
-  type: 'h1',
-  props: {
-    className: 'greeting',
-    children: 'Hello, world!'
-  }
+type: 'h1',
+props: {
+className: 'greeting',
+children: 'Hello, world!'
+}
 };
 ```
 
-这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
+这样的对象被称为“React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
 
-我们将在下一节中探索如何将 React 元素渲染到 DOM。
+我们将在下一节中探讨如何将 React 元素渲染到 DOM。
+
+Tip:
+
+我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。
 
->**Tip:**
->
->我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。

From 961a8c5d1c31d3a4590e7bca8f37939c7583b4e6 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:37:02 -0600
Subject: [PATCH 09/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 6a902af1a6..9e7d87029b 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -76,7 +76,7 @@ document.getElementById('root')
 
 编译之后，JSX 表达式成为常规 JavaScript 函数调用， 并评估为 JavaScript 对象。
 
-这意味着你可以在 if 语句和 for 循环中使用 JSX，将其赋值给变量，当作参数传入，并从函数返回它：
+这意味着你可以在 `if` 语句和 `for` 循环中使用 JSX，将其赋值给变量，当作参数传入，并从函数返回它：
 
 ```js{3,5}
 function getGreeting(user) {

From befa7189b2b08c5f79284cd54e70ffb250724bd6 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:38:03 -0600
Subject: [PATCH 10/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 9e7d87029b..18dbb56a93 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -16,7 +16,7 @@ const element = <h1>Hello, world!</h1>;
 
 它被称为 JSX， 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX ， JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能使人想起模版语言，但它具有 JavaScript 的全部功能。
 
-JSX 生成 React "元素"。我们将在[下一章节] (/docs/rendering-elements.html) 中探讨如何将这些元素渲染到 DOM 里。 下面，我们来看一下开始学习 JSX 的所需的基础知识。
+JSX 生成 React “元素”。我们将在[下一章节](/docs/rendering-elements.html)中探讨如何将这些元素渲染到 DOM 里。下面，我们来看一下开始学习 JSX 的所需的基础知识。
 
 ### 为什么使用 JSX？
 

From b3c52d3681daf962bc226187f5b60c39e3112505 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:38:40 -0600
Subject: [PATCH 11/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 18dbb56a93..518d06c29a 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -22,7 +22,7 @@ JSX 生成 React “元素”。我们将在[下一章节](/docs/rendering-eleme
 
 React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件、状态如何随时间变化，以及如何把数据展示出来。
 
-React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行“关注点”分离 (https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节] (/docs /components-and-props.html) 里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说] (https://www.youtube.com/watchv = x7cQ3mrcKaY) 可能会说服你。
+React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行[关注点*分离*](https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节](/docs/components-and-props.html)里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说](https://www.youtube.com/watch?v=x7cQ3mrcKaY)可能会说服你。
 
 React 不一定要使用 JSX (/docs/react-without-jsx.html)，但是大多数人发现在JavaScript 代码中使用 UI 时它是一种有用的视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
 

From d261720b5e0507a253d4a4b1d7c27ee1216f89e5 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:38:56 -0600
Subject: [PATCH 12/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 518d06c29a..ed5a1e78a9 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -158,7 +158,7 @@ Hello, world!
 ```js
 const element = React.createElement(
 'h1',
-{className: 'greeting'},
+  {className: 'greeting'},
 'Hello, world!'
 );
 ```

From 9052b9146d9dd01866a7a0306657e50471cac15d Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:39:06 -0600
Subject: [PATCH 13/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index ed5a1e78a9..5d39d169fc 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM 在渲染之前默认会过滤 (http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)  所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS (跨站脚本) 攻击。
+React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS (跨站脚本)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
 
 ### JSX 代表对象（Objects）
 

From 4facd3b772cab089d89b6df3c1108275ba4ab658 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:39:16 -0600
Subject: [PATCH 14/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 5d39d169fc..32bb2460c7 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -159,7 +159,7 @@ Hello, world!
 const element = React.createElement(
 'h1',
   {className: 'greeting'},
-'Hello, world!'
+  'Hello, world!'
 );
 ```
 

From d98852e2c5cf71375ed14706f0b05f5f02769e88 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:39:42 -0600
Subject: [PATCH 15/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 32bb2460c7..a55b1d1778 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,7 +14,7 @@ const element = <h1>Hello, world!</h1>;
 
 这个有趣的标签语法既不是字符串也不是 HTML。
 
-它被称为 JSX， 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX ， JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能使人想起模版语言，但它具有 JavaScript 的全部功能。
+它被称为 JSX， 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能使人想起模版语言，但它具有 JavaScript 的全部功能。
 
 JSX 生成 React “元素”。我们将在[下一章节](/docs/rendering-elements.html)中探讨如何将这些元素渲染到 DOM 里。下面，我们来看一下开始学习 JSX 的所需的基础知识。
 

From b43afbf2b8d6b19df8ccb4d665b7536b3190a14e Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:39:50 -0600
Subject: [PATCH 16/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index a55b1d1778..b38cffbf89 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -157,7 +157,7 @@ Hello, world!
 
 ```js
 const element = React.createElement(
-'h1',
+  'h1',
   {className: 'greeting'},
   'Hello, world!'
 );

From 93e2441897a88647d295b78ae5750767723756f8 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:40:05 -0600
Subject: [PATCH 17/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index b38cffbf89..6677be0b00 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -37,7 +37,7 @@ const name = 'Josh Perez';
 const element = <h1>Hello, {name}</h1>;
 
 ReactDOM.render(
-element,
+ element,
 document.getElementById('root')
 );
 ```

From a6a0592f4b2e80d3e7b05b583d84747788fe1849 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Fri, 1 Mar 2019 16:40:14 -0600
Subject: [PATCH 18/23] Update content/docs/introducing-jsx.md

Co-Authored-By: haimengzhang <hzhang1@macalester.edu>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 6677be0b00..f1dc45fdb1 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -24,7 +24,7 @@ React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如
 
 React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行[关注点*分离*](https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节](/docs/components-and-props.html)里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说](https://www.youtube.com/watch?v=x7cQ3mrcKaY)可能会说服你。
 
-React 不一定要使用 JSX (/docs/react-without-jsx.html)，但是大多数人发现在JavaScript 代码中使用 UI 时它是一种有用的视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
+React [不一定要使用 JSX ](/docs/react-without-jsx.html)，但是大多数人发现在 JavaScript 代码中使用 UI 时它是一种有用的视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
 
 弄清楚这个，让我们开始吧！
 

From 5675cae1460a06eae76639aeef85add33c9f19e2 Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Sat, 2 Mar 2019 15:26:17 +0800
Subject: [PATCH 19/23] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/introducing-jsx.md | 62 ++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index f1dc45fdb1..74dc9ae4a7 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -37,8 +37,8 @@ const name = 'Josh Perez';
 const element = <h1>Hello, {name}</h1>;
 
 ReactDOM.render(
- element,
-document.getElementById('root')
+  element,
+  document.getElementById('root')
 );
 ```
 
@@ -48,27 +48,27 @@ document.getElementById('root')
 
 ```js{12}
 function formatName(user) {
-return user.firstName + ' ' + user.lastName;
+  return user.firstName + ' ' + user.lastName;
 }
 
 const user = {
-firstName: 'Harper',
-lastName: 'Perez'
+  firstName: 'Harper',
+  lastName: 'Perez'
 };
 
 const element = (
-<h1>
-Hello, {formatName(user)}!
-</h1>
+  <h1>
+    Hello, {formatName(user)}!
+  </h1>
 );
 
 ReactDOM.render(
-element,
-document.getElementById('root')
+  element,
+  document.getElementById('root')
 );
 ```
 
-[在codepen上运行](codepen://introducing-jsx)
+[在 codepen 上运行](codepen://introducing-jsx)
 
 为了便于阅读，我们将 JSX 拆分为多行。 虽然不需要这样，但在执行此操作时，我们还是建议将其包装在括号中，以避免掉入[分号自动插入]的陷阱 (http://stackoverflow.com/q/2846283)。
 
@@ -80,10 +80,10 @@ document.getElementById('root')
 
 ```js{3,5}
 function getGreeting(user) {
-if (user) {
-return <h1>Hello, {formatName(user)}!</h1>;
-}
-return <h1>Hello, Stranger.</h1>;
+  if (user) {
+    return <h1>Hello, {formatName(user)}!</h1>;
+  }
+  return <h1>Hello, Stranger.</h1>;
 }
 ```
 
@@ -121,10 +121,10 @@ JSX 标签里能够包含很多子项:
 
 ```js
 const element = (
-<div>
-<h1>Hello!</h1>
-<h2>Good to see you here.</h2>
-</div>
+  <div>
+    <h1>Hello!</h1>
+    <h2>Good to see you here.</h2>
+  </div>
 );
 ```
 
@@ -146,12 +146,11 @@ Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法
 
 下面两种代码的作用是完全相同的：
 
-
 ```js
 const element = (
-<h1 className="greeting">
-Hello, world!
-</h1>
+  <h1 className="greeting">
+    Hello, world!
+  </h1>
 );
 ```
 
@@ -168,11 +167,11 @@ React.createElement() 这个方法首先会进行一些避免 bug 的检查，
 ```js
 // Note: this structure is simplified
 const element = {
-type: 'h1',
-props: {
-className: 'greeting',
-children: 'Hello, world!'
-}
+  type: 'h1',
+  props: {
+    className: 'greeting',
+    children: 'Hello, world!'
+  }
 };
 ```
 
@@ -180,7 +179,6 @@ children: 'Hello, world!'
 
 我们将在下一节中探讨如何将 React 元素渲染到 DOM。
 
-Tip:
-
-我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。
-
+>**Tip:**
+>
+>我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。

From d90378b319b5bb2c4a29b520bdc3b1e74a9702d4 Mon Sep 17 00:00:00 2001
From: lizhihua <275091674@qq.com>
Date: Sat, 2 Mar 2019 15:33:20 +0800
Subject: [PATCH 20/23] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20markdown=20=E5=92=8C?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/introducing-jsx.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 74dc9ae4a7..1f4882da2f 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -30,7 +30,7 @@ React [不一定要使用 JSX ](/docs/react-without-jsx.html)，但是大多数
 
 ### 在 JSX 中嵌入表达式
 
-在下面的例子中，我们声明了一个名为 `name` 的变量，然后在 JSX 中使用它，并将它包装在大括号中：
+在下面的例子中，我们声明了一个名为 `name` 的变量，然后在 JSX 中使用它，并将它包装在花括号中：
 
 ```js{1,2}
 const name = 'Josh Perez';
@@ -42,9 +42,9 @@ ReactDOM.render(
 );
 ```
 
-你可以在 JSX 中的大括号内放置任何有效的[JavaScript 表达式] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName`或`formatName（user）`都是有效的 JavaScript 表达式。
+你可以在 JSX 中的花括号内放置任何有效的 [JavaScript 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName` 或 `formatName(user)`都是有效的 JavaScript 表达式。
 
-在下面的示例中，我们将调用 JavaScript 函数 `formatName（user）` 的结果， 并将结果嵌入到 `<h1>` 元素中。
+在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果， 并将结果嵌入到 `<h1>` 元素中。
 
 ```js{12}
 function formatName(user) {
@@ -70,7 +70,7 @@ ReactDOM.render(
 
 [在 codepen 上运行](codepen://introducing-jsx)
 
-为了便于阅读，我们将 JSX 拆分为多行。 虽然不需要这样，但在执行此操作时，我们还是建议将其包装在括号中，以避免掉入[分号自动插入]的陷阱 (http://stackoverflow.com/q/2846283)。
+为了便于阅读，我们将 JSX 拆分为多行。 虽然不需要这样，但在执行此操作时，我们还是建议将其包裹在括号中，以避免掉入[分号自动插入](http://stackoverflow.com/q/2846283)的陷阱。
 
 ### JSX 本身也是一种表达式
 
@@ -95,23 +95,23 @@ function getGreeting(user) {
 const element = <div tabIndex="0"></div>;
 ```
 
-也可以使用大括号来定义以 JavaScript 表达式为值的属性：
+也可以使用花括号来定义以 JavaScript 表达式为值的属性：
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-切记，如果把 JavaScript 表达式镶嵌在大括号里，大括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。你可以只使用引号 （当对象是字符串），或者使用大阔号（当对象是表达式），但这两个不能在同一个属性里出现。
+切记，如果把 JavaScript 表达式镶嵌在花括号里，花括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。你可以只使用引号 （当对象是字符串），或者使用花括号（当对象是表达式），但这两个不能在同一个属性里出现。
 
 >**警告：**
 >
->因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase （小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
+>因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
 >
->例如，JSX 里的 class 变成了 className (https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 tabindex 则对应着 tabIndex (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
+>例如，JSX 里的 class 变成了 [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 tabindex 则对应着 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
 
 ### 使用 JSX 指定子项
 
-假如一个标签里面没有内容，你可以把它当作 XML ，在末尾加上 `/>` 来关上它。
+假如一个标签里面没有内容，你可以把它当作 XML，在末尾加上 `/>` 来关上它。
 
 ```js
 const element = <img src={user.avatarUrl} />;
@@ -138,11 +138,11 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS (跨站脚本)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
+React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS （cross-site-scripting, 跨站脚本）](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
 
 ### JSX 代表对象（Objects）
 
-Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
+Babel 转译器会把 JSX 转换成一个名为 `React.createElement()` 的方法调用。
 
 下面两种代码的作用是完全相同的：
 
@@ -162,7 +162,7 @@ const element = React.createElement(
 );
 ```
 
-React.createElement() 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
+`React.createElement()` 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
 
 ```js
 // Note: this structure is simplified
@@ -181,4 +181,4 @@ const element = {
 
 >**Tip:**
 >
->我们建议您使用[“Babel”语言定义]工具 (http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next]（https://labs.voronianski.com/oceanic-next-color-scheme/）配色方案。
+>我们建议您使用 [“Babel” 语言定义工具](http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。

From fb4cab59c1a3cc5d21f29d5d961502240aa91d90 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Sat, 2 Mar 2019 16:50:43 +0800
Subject: [PATCH 21/23] Update introducing-jsx.md

---
 content/docs/introducing-jsx.md | 46 ++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 1f4882da2f..7e4f027434 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,23 +14,23 @@ const element = <h1>Hello, world!</h1>;
 
 这个有趣的标签语法既不是字符串也不是 HTML。
 
-它被称为 JSX， 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能使人想起模版语言，但它具有 JavaScript 的全部功能。
+它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。
 
-JSX 生成 React “元素”。我们将在[下一章节](/docs/rendering-elements.html)中探讨如何将这些元素渲染到 DOM 里。下面，我们来看一下开始学习 JSX 的所需的基础知识。
+JSX 可以生成 React “元素”。我们将在[下一章节](/docs/rendering-elements.html)中探讨如何将这些元素渲染到 DOM 里。下面，我们来看一下开始学习 JSX 的所需的基础知识。
 
 ### 为什么使用 JSX？
 
-React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件、状态如何随时间变化，以及如何把数据展示出来。
+React 认为渲染逻辑本质上与其他 UI 逻辑一脉相通，比如，如何处理事件、状态如何变化以及如何把数据展示出来。
 
-React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行[关注点*分离*](https://en.wikipedia.org/wiki/Separation_of_concerns)，这些单元称为包含两者的“组件”。我们会在[延伸章节](/docs/components-and-props.html)里重新回到“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，[这个视频解说](https://www.youtube.com/watch?v=x7cQ3mrcKaY)可能会说服你。
+React 并没有把标记语言和逻辑这两个东西分开放在不同的文件里，而是使用松散耦合的单元进行[关注点*分离*](https://en.wikipedia.org/wiki/Separation_of_concerns)，我们将包含两者的单元称为“组件”。我们会在[延伸章节](/docs/components-and-props.html)里重新探讨“组件”，但如果你还不熟悉怎么在 JS 里使用标记语言，请查看[视频讲解](https://www.youtube.com/watch?v=x7cQ3mrcKaY)。
 
-React [不一定要使用 JSX ](/docs/react-without-jsx.html)，但是大多数人发现在 JavaScript 代码中使用 UI 时它是一种有用的视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
+React [不一定要使用 JSX ](/docs/react-without-jsx.html)，但是大多数人在 JavaScript 代码中编写 UI 时，发现它是一种非常好的视觉辅助工具。它还允许 React 显示更多有用的错误和警告消息。
 
 弄清楚这个，让我们开始吧！
 
 ### 在 JSX 中嵌入表达式
 
-在下面的例子中，我们声明了一个名为 `name` 的变量，然后在 JSX 中使用它，并将它包装在花括号中：
+在下面的例子中，我们声明了一个名为 `name` 的变量，然后在 JSX 中使用它，并将它包装在大括号中：
 
 ```js{1,2}
 const name = 'Josh Perez';
@@ -42,9 +42,9 @@ ReactDOM.render(
 );
 ```
 
-你可以在 JSX 中的花括号内放置任何有效的 [JavaScript 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName` 或 `formatName(user)`都是有效的 JavaScript 表达式。
+你可以在 JSX 中的大括号内放置任何有效的 [JavaScript 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName` 或 `formatName（user）` 都是有效的 JavaScript 表达式。
 
-在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果， 并将结果嵌入到 `<h1>` 元素中。
+在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果，并将结果嵌入到 `<h1>` 元素中。
 
 ```js{12}
 function formatName(user) {
@@ -68,15 +68,15 @@ ReactDOM.render(
 );
 ```
 
-[在 codepen 上运行](codepen://introducing-jsx)
+[在 CodePen 上尝试](codepen://introducing-jsx)
 
-为了便于阅读，我们将 JSX 拆分为多行。 虽然不需要这样，但在执行此操作时，我们还是建议将其包裹在括号中，以避免掉入[分号自动插入](http://stackoverflow.com/q/2846283)的陷阱。
+为了便于阅读，我们将 JSX 拆分为多行。虽然开发时并不需要这样，但在执行此操作时，我们还是建议将其包装在小括号中，以避免掉入[分号自动插入]的陷阱 (http://stackoverflow.com/q/2846283)。
 
 ### JSX 本身也是一种表达式
 
-编译之后，JSX 表达式成为常规 JavaScript 函数调用， 并评估为 JavaScript 对象。
+编译之后，JSX 表达式成为常规 JavaScript 函数调用，并评估为 JavaScript 对象。
 
-这意味着你可以在 `if` 语句和 `for` 循环中使用 JSX，将其赋值给变量，当作参数传入，并从函数返回它：
+这意味着你可以在 `if` 语句和 `for` 循环中使用 JSX，将其赋值给变量，或作为参数传递，再或者作为函数返回值返回：
 
 ```js{3,5}
 function getGreeting(user) {
@@ -89,29 +89,29 @@ function getGreeting(user) {
 
 ### JSX 属性
 
-你可以使用引号来定义以字符串为值的属性：
+你可以使用引号来为字符串类型的属性赋值：
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-也可以使用花括号来定义以 JavaScript 表达式为值的属性：
+也可以使用大括号来定义以 JavaScript 表达式为值的属性：
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-切记，如果把 JavaScript 表达式镶嵌在花括号里，花括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。你可以只使用引号 （当对象是字符串），或者使用花括号（当对象是表达式），但这两个不能在同一个属性里出现。
+切记，如果把 JavaScript 表达式镶嵌在大括号里，大括号外面不能再套引号。JSX 会将引号当中的内容识别为字符串而不是表达式。你可以只使用引号（当对象是字符串），或者使用大阔号（当对象是表达式），但这两个不能在同一个属性里出现。
 
 >**警告：**
 >
->因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是使用 HTML 的属性名称。
+>因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是 HTML 的属性名称。
 >
->例如，JSX 里的 class 变成了 [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 tabindex 则对应着 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
+>例如，JSX 里的 `class` 变成了 [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 `tabindex` 则对应着 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
 
 ### 使用 JSX 指定子项
 
-假如一个标签里面没有内容，你可以把它当作 XML，在末尾加上 `/>` 来关上它。
+假如一个标签里面没有内容，你可以把它当作 XML ，在末尾加上 `/>` 来关上它。
 
 ```js
 const element = <img src={user.avatarUrl} />;
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS （cross-site-scripting, 跨站脚本）](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
+React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS (跨站脚本)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
 
 ### JSX 代表对象（Objects）
 
@@ -165,7 +165,7 @@ const element = React.createElement(
 `React.createElement()` 这个方法首先会进行一些避免 bug 的检查，但更主要的是返回一个类似下面例子的对象：
 
 ```js
-// Note: this structure is simplified
+// 注意：这是简化后的示例
 const element = {
   type: 'h1',
   props: {
@@ -175,10 +175,10 @@ const element = {
 };
 ```
 
-这样的对象被称为“React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
+这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
 
 我们将在下一节中探讨如何将 React 元素渲染到 DOM。
 
->**Tip:**
+>提示：
 >
->我们建议您使用 [“Babel” 语言定义工具](http://babeljs.io/docs/editors) 作为您选择的编辑器的辅助，以便正确突出显示 ES6 和 JSX 代码。 本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。
+> 我们建议您使用 [“Babel” 语义](http://babeljs.io/docs/editors)工具作为您选择的编辑器的辅助，以便使得 ES6 和 JSX 代码高亮。本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。

From 0aeb3c4b31598e43e47ed9782ba97f012dd9c4f4 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Sat, 2 Mar 2019 17:03:01 +0800
Subject: [PATCH 22/23] Update introducing-jsx.md

---
 content/docs/introducing-jsx.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 7e4f027434..45493909ab 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -42,7 +42,7 @@ ReactDOM.render(
 );
 ```
 
-你可以在 JSX 中的大括号内放置任何有效的 [JavaScript 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName` 或 `formatName（user）` 都是有效的 JavaScript 表达式。
+你可以在 JSX 中的大括号内放置任何有效的 [JavaScript 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)。例如，`2 + 2`，`user.firstName` 或 `formatName(user)` 都是有效的 JavaScript 表达式。
 
 在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果，并将结果嵌入到 `<h1>` 元素中。
 
@@ -105,13 +105,13 @@ const element = <img src={user.avatarUrl}></img>;
 
 >**警告：**
 >
->因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是 HTML 的属性名称。
+>因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不是 HTML 的属性名称。
 >
 >例如，JSX 里的 `class` 变成了 [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)，而 `tabindex` 则对应着 [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)。
 
 ### 使用 JSX 指定子项
 
-假如一个标签里面没有内容，你可以把它当作 XML ，在末尾加上 `/>` 来关上它。
+假如一个标签里面没有内容，你可以把它当作 XML，在末尾加上 `/>` 来关上它。
 
 ```js
 const element = <img src={user.avatarUrl} />;
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS (跨站脚本)](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
+React DOM 在渲染之前默认会[过滤](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html)所有传入的值。它可以确保你的应用里没有写进去的信息无法被进行注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS（cross-site-scripting, 跨站脚本）](https://en.wikipedia.org/wiki/Cross-site_scripting)攻击。
 
 ### JSX 代表对象（Objects）
 
@@ -179,6 +179,6 @@ const element = {
 
 我们将在下一节中探讨如何将 React 元素渲染到 DOM。
 
->提示：
+>**提示：**
 >
-> 我们建议您使用 [“Babel” 语义](http://babeljs.io/docs/editors)工具作为您选择的编辑器的辅助，以便使得 ES6 和 JSX 代码高亮。本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。
+> 我们建议您使用 [“Babel” 插件](http://babeljs.io/docs/editors)作为你所使用编辑器的辅助，以使得 ES6 和 JSX 代码高亮。本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。

From 7d6704375c4cf94ced535e2e515b10025692c60e Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Sat, 2 Mar 2019 17:03:31 +0800
Subject: [PATCH 23/23] Update introducing-jsx.md

---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 45493909ab..4ef0010146 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -181,4 +181,4 @@ const element = {
 
 >**提示：**
 >
-> 我们建议您使用 [“Babel” 插件](http://babeljs.io/docs/editors)作为你所使用编辑器的辅助，以使得 ES6 和 JSX 代码高亮。本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。
+> 我们建议您使用 [“Babel” 编辑器插件](http://babeljs.io/docs/editors)作为你所使用编辑器的辅助，以使得 ES6 和 JSX 代码高亮。本网站使用与之兼容的 [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) 配色方案。