You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This funny tag syntax is neither a string nor HTML.
15
+
这个有趣的标签语法既不是字符串也不是 HTML。
16
16
17
-
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 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.
19
+
JSX 可以生成 React “元素”。我们将在[下一章节](/docs/rendering-elements.html)中探讨如何将这些元素渲染到 DOM 里。下面，我们来看一下开始学习 JSX 的所需的基础知识。
20
20
21
-
### Why JSX?
21
+
### 为什么使用 JSX？
22
22
23
-
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.
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 [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.
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.
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).
You may use quotes to specify string literals as attributes:
92
+
你可以使用引号来为字符串类型的属性赋值：
93
93
94
94
```js
95
95
constelement=<div tabIndex="0"></div>;
96
96
```
97
97
98
-
You may also use curly braces to embed a JavaScript expression in an attribute:
98
+
也可以使用大括号来定义以 JavaScript 表达式为值的属性：
99
99
100
100
```js
101
101
constelement=<img src={user.avatarUrl}></img>;
102
102
```
103
103
104
-
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.
>Since JSX is closer to JavaScript than to HTML, React DOM uses`camelCase` property naming convention instead of HTML attribute names.
108
+
>因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用`camelCase`（小驼峰命名）来定义属性的名称，而不是 HTML 的属性名称。
109
109
>
110
-
>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).
If a tag is empty, you may close it immediately with `/>`, like XML:
114
+
假如一个标签里面没有内容，你可以把它当作 XML，在末尾加上 `/>` 来关上它。
115
115
116
116
```js
117
117
constelement=<img src={user.avatarUrl} />;
118
118
```
119
119
120
-
JSX tags may contain children:
120
+
JSX 标签里能够包含很多子项:
121
121
122
122
```js
123
123
constelement= (
@@ -128,23 +128,23 @@ const element = (
128
128
);
129
129
```
130
130
131
-
### JSX Prevents Injection Attacks
131
+
### JSX 防止注入攻击
132
132
133
-
It is safe to embed user input in JSX:
133
+
你可以放心地在 JSX 当中使用用户输入：
134
134
135
135
```js
136
136
consttitle=response.potentiallyMaliciousInput;
137
-
//This is safe:
137
+
//直接使用是安全的：
138
138
constelement=<h1>{title}</h1>;
139
139
```
140
140
141
-
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.
141
+
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)攻击。
142
142
143
-
### JSX Represents Objects
143
+
### JSX 代表对象（Objects）
144
144
145
-
Babel compiles JSX down to `React.createElement()`calls.
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.
178
+
这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持随时更新。
179
179
180
-
We will explore rendering React elements to the DOM in the next section.
180
+
我们将在下一节中探讨如何将 React 元素渲染到 DOM。
181
181
182
-
>**Tip:**
182
+
>**提示：**
183
183
>
184
-
>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.
0 commit comments