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

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

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

const element = 
Hello, world!
;

這是有意思的標記語法既不是字符串又不是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最重要的基礎知識來讓你開始學習

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 = (
  

    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分到多個行里。雖然不是必需的,當這樣做時,我們還建議包在大括號來避免自動分號的陷阱。

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語句和循環,將其分配給變量,接受它作為參數,并從函數中返回。

You may use quotes to specify string literals as attributes:

你可以使用引號指定字符串的屬性:

const element = 
;

You may also use curly braces to embed a JavaScript expression in an attribute:
你也可以使用括號將JavaScript表達式嵌入到一個屬性:

const element = , like XML:
如果一個標簽是空的,你可以立即關閉它/ >,如XML:

const element = ;
JSX tags may contain children:
JSX標簽可以包含子元素:
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作為標簽的屬性，而在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 = 
{title}
;
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 = (
  

    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()執行幾個檢查,幫助你寫出沒有錯誤代碼但本質上它創建一個對象是這樣的:
// 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上。