React版本：15.4.2
**翻譯：xiyoki **
考慮這個(gè)變量聲明：
const element = <h1>Hello, world!</h1>;
這個(gè)有趣的標(biāo)簽語法既不是字符串也不是HTML。
它被稱為JSX，它是Javascript的語法擴(kuò)展。我們建議使用它與React來描述UI應(yīng)該是什么樣子。JSX可能喚起你對(duì)模板語言的記憶，但JSX伴隨著Javascript的全部力量。
JSX生成React elements。我們將在下一節(jié)中探討將它們渲染到DOM。
Embedding Expressions in JSX（在JSX中嵌入表達(dá)式）
你可以將任何Javascript變量或表達(dá)式包裹在花括號(hào)中以嵌入到JSX中。
例如2+2，``user.name和formatName(user)都是有效的表達(dá)式：
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')
);
我們將JSX拆分為多行以提高可讀性。雖然不是必需的，但當(dāng)執(zhí)行此操作時(shí)，我們還建議將其括在括號(hào)中，以避免自動(dòng)分號(hào)插入的陷阱。
JSX is an Expression Too（JSX也是一個(gè)表達(dá)式）
編譯后，JSX表達(dá)式成為常規(guī)Javascript對(duì)象。
這意味著你可以在if語句和for循環(huán)中使用JSX，將它分配給變量，接受它作為參數(shù)，并從函數(shù)返回它：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
Specifying Attributes with JSX（使用JSX指定屬性）
你可以使用引號(hào)將字符串文字指定為屬性：
const element = <div tabIndex="0"></div>;
你可以使用花括號(hào)將Javascript表達(dá)式嵌入屬性：
const element = <img src={user.avatarUrl}></img>;
在屬性中嵌入Javascript表達(dá)式時(shí)，不要在大括號(hào)周圍加引號(hào)。否則JSX會(huì)將該屬性視為字符串文字而不是表達(dá)式。你應(yīng)該使用引號(hào)（對(duì)于字符串值）或花括號(hào)（對(duì)于表達(dá)式），但二者不能在同一屬性中。
Specifying Children with JSX（使用JSX指定子項(xiàng)）
如果標(biāo)記為空，你應(yīng)當(dāng)用 /> 立即關(guān)閉它，如XML:
const element = <img src={user.avatarUrl} />;
JSX標(biāo)簽可能包含子元素：
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
** 警告: **
由于JSX比HTML更接近Javascript，React DOM使用camelCase屬性命名約定而不是HTML屬性名稱。
例如，在JSX中，class成為className，tabindex成為tabIndex。
JSX Prevents Injection Attacks（JSX防止注入攻擊）
在JSX中嵌入用戶輸入時(shí)安全的：
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
默認(rèn)情況下，React DOM在渲染它們之前轉(zhuǎn)義嵌入在JSX中的任何值。因此，它確保你不能注入任何沒有明確寫在你應(yīng)用程序中的數(shù)據(jù)。在渲染之前，一切都轉(zhuǎn)換為字符串。這有助于防止XSS（跨站點(diǎn)）攻擊。
JSX Represents Objects（JSX表示對(duì)象）
Babel將JSX編譯到React.createElement()的調(diào)用中。
這兩個(gè)例子是相同的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()執(zhí)行一些檢查，以幫助你編寫無錯(cuò)誤的代碼，但本質(zhì)上它創(chuàng)建一個(gè)像這樣的對(duì)象：
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
這些對(duì)象被稱為‘React元素’。你可以把他們想象成你想在屏幕上看到的內(nèi)容。React讀取這些對(duì)象，并使用它們構(gòu)造DOM，并保持其為最新。
我們將在下一節(jié)中探索渲染React元素到DOM。
Tip:
我們建議為你選擇的編輯器搜索Babel語法方案，以便正確突出顯示ES6和JSX代碼。
附：babel-sublime安裝
