【译】介绍JSX

下面是react官方文档的我的翻译，若有翻译错误，请多多指出
原文地址：https://facebook.github.io/re...
特别感谢Hevaen，同时也向豪大React群全部成员表示感谢，从大家身上我学到不少。

介绍JSX

咱们来看一下下面的变量声明

const element = <h1>Hello, world!</h1>;

这是有意思的标记语法既不是字符串又不是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去描述UI应该是什么样子的。JSX也许会让你想到某些模板语言,但它带有JavaScript的所有威力。

JSX produces React "elements". We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

JSX 生成React的“元素”。咱们将会在下一章探索他们是怎么在DOM里渲染的。接下来，你能找到JSX最重要的基础知识来让你开始学习

Embedding Expressions in JSX

在JSX里面插入表达式

You can embed any JavaScript expression in JSX by wrapping it in curly braces.
你能用花括号包住JavaScript 表达式而后插入JSX里

For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions:
例如，2 + 2, user.firstName,和 formatName(user)都是合法的表达式。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

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.

为了可读性，咱们把JSX分到多个行里。虽然不是必需的,当这样作时,咱们还建议包在大括号来避免自动分号的陷阱。

JSX is an Expression Too

JSX也是一个表达式
After compilation, JSX expressions become regular JavaScript objects.
编译后,JSX表达式成为常规的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:
这意味着您能够在JSX中使用 if语句和循环,将其分配给变量,接受它做为参数,并从函数中返回。

Specifying Attributes with JSX

You may use quotes to specify string literals as attributes:

你可使用引号指定字符串的属性:

const element = <div tabIndex="0"></div>;

You may also use curly braces to embed a JavaScript expression in an attribute:
你也可使用括号将JavaScript表达式嵌入到一个属性:

const element = <img src={user.avatarUrl}></img>;

Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. Otherwise JSX will treat the attribute as a string literal rather than an expression. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

嵌入表达式的时候，不要在花括号里面在写引号。不然JSX将属性做为一个字符串,而不是一个表达式。你应该用引号(对字符串而言)或大括号(表达式),但不是在同一个属性上同时使用他。

Specifying Children with JSX

JSX中指定子元素

If a tag is empty, you may close it immediately with />, like XML:
若是一个标签是空的,你能够当即关闭它/ >,如XML:

const element = <img src={user.avatarUrl} />;

JSX tags may contain children:
JSX标签能够包含子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Caveat:
Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
For example, class becomes className in JSX, and tabindex becomes tabIndex.
警告:自从JSX更接近JavaScript而不是HTML， React DOM中咱们使用class做为标签的属性，而在JSX中咱们使用className（由于class是js的保留字）
例如,类成为JSX className,tabindex变成了tabindex。

JSX Prevents Injection Attacks

JSX防止注入攻击

It is safe to embed user input in JSX:

JSX中直接嵌套用户在表单表单中输入的值是安全的。

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

By default, React DOM escapes any values embedded in JSX before rendering them.
默认状况下,React DOM会在渲染元素前转义JSX中的任何嵌套的值
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) attacks.
这有助于防止XSS攻击(跨站脚本)。

JSX Represents Objects

JSX对象

Babel compiles JSX down to React.createElement() calls.
Babel 编译 JSX 成 React.createElement() 调用。

These two examples are identical:
这两个例子都是相同的:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

React.createElement()执行几个检查,帮助你写出没有错误代码但本质上它建立一个对象是这样的:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

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上。