下面是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上。