摘要：介紹我們來看一下下面的變量聲明這是有意思的標(biāo)記語(yǔ)法既不是字符串又不是。也是一個(gè)表達(dá)式編譯后表達(dá)式成為常規(guī)的對(duì)象。防止注入攻擊中直接嵌套用戶在表單表單中輸入的值是安全的。這有助于防止攻擊跨站腳本。讀取這些對(duì)象并使用它們構(gòu)造并保持更新。

下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請(qǐng)多多指出
原文地址：https://facebook.github.io/re...
特別感謝Hevaen，同時(shí)也向豪大React群所有成員表示感謝，從你們身上我學(xué)到很多。

我們來看一下下面的變量聲明

const element = 
Hello, world!
;

這是有意思的標(biāo)記語(yǔ)法既不是字符串又不是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的語(yǔ)法拓展。我們希望react用jsx去描述UI應(yīng)該是什么樣子的。JSX也許會(huì)讓你想到某些模板語(yǔ)言,但它帶有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的“元素”。我們將會(huì)在下一章探索他們是怎么在DOM里渲染的。接下來，你能找到JSX最重要的基礎(chǔ)知識(shí)來讓你開始學(xué)習(xí)

You can embed any JavaScript expression in JSX by wrapping it in curly braces.
你能用花括號(hào)包住JavaScript 表達(dá)式然后插入JSX里

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

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

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

const element = (
  

    Hello, {formatName(user)}!
  
);

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分到多個(gè)行里。雖然不是必需的,當(dāng)這樣做時(shí),我們還建議包在大括號(hào)來避免自動(dòng)分號(hào)的陷阱。

JSX也是一個(gè)表達(dá)式
After compilation, JSX expressions become regular JavaScript objects.
編譯后,JSX表達(dá)式成為常規(guī)的JavaScript對(duì)象。
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語(yǔ)句和循環(huán),將其分配給變量,接受它作為參數(shù),并從函數(shù)中返回。

You may use quotes to specify string literals as attributes:

你可以使用引號(hào)指定字符串的屬性:

const element = 
;

You may also use curly braces to embed a JavaScript expression in an attribute:
你也可以使用括號(hào)將JavaScript表達(dá)式嵌入到一個(gè)屬性:

const element = , like XML:
如果一個(gè)標(biāo)簽是空的,你可以立即關(guān)閉它/ >,如XML:

const element = ;
JSX tags may contain children:
JSX標(biāo)簽可以包含子元素:
const element = (
  

    
Hello!
    
Good to see you here.
  
);
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作為標(biāo)簽的屬性，而在JSX中我們使用className（因?yàn)閏lass是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 = 
{title}
;
By default, React DOM escapes any values embedded in JSX before rendering them.
默認(rèn)情況下,React DOM會(huì)在渲染元素前轉(zhuǎn)義JSX中的任何嵌套的值
Thus it ensures that you can never inject anything that"s not explicitly written in your application.
因此,確保你永遠(yuǎn)不能注入任何沒有明確的寫在您的應(yīng)用程序
Everything is converted to a string before being rendered. 
一切都是在渲染之前轉(zhuǎn)換為一個(gè)字符串。
This helps prevent XSS (cross-site-scripting) attacks.
這有助于防止XSS攻擊(跨站腳本)。
JSX Represents Objects
JSX對(duì)象
Babel compiles JSX down to React.createElement() calls.
Babel 編譯 JSX 成 React.createElement() 調(diào)用。
These two examples are identical:
這兩個(gè)例子都是相同的:
const element = (
  

    Hello, world!
  
);
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()執(zhí)行幾個(gè)檢查,幫助你寫出沒有錯(cuò)誤代碼但本質(zhì)上它創(chuàng)建一個(gè)對(duì)象是這樣的:
// 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.
這些對(duì)象被稱為“React元素”。你可以把它們作為描述你想在屏幕上看到的東西。
React讀取這些對(duì)象,并使用它們構(gòu)造DOM并保持更新。在下一節(jié),我們將探討渲染React元素到DOM上。