介紹 JSX
考慮下面的變量聲明：
const element = <h1>Hello, world!</h1>;
這是個有趣的標簽語法斩启，它既不是一個字符串夜牡，也不是 HTML商架。
它叫 JSX堰怨，是對 JavaScript 的語法擴展。我們推薦結(jié)合 React 使用它來描述 UI 看起來應(yīng)該是什么樣蛇摸。JSX 可能讓你想起模板語言备图，但是它具有 JavaScript 的全部能力。
JSX 生成 React “元素”赶袄。我們我們將在下一章探索把它們渲染到 DOM揽涮。下面，你可以找到讓你開始的 JSX 必備的基礎(chǔ)知識幻馁。
在 JSX 中插入表達式
你可以通過包裹在大括號中在 JSX 插入任意的 JavaScript 表達式立美。例如政恍，2+2、user.name和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')
);
在CodePen試試雪标。
為了可讀性，我們拆分 JSX 為多行溉跃。雖然這不是強制的村刨，當這樣做時，我們還推薦把它包裹在括號中來避免 js 自動插入分號的陷阱撰茎。
JSX 也是表達式
經(jīng)過編譯后嵌牺，JSX 表達式變成普通的 JavaScript 對象。
這意味著乾吻，你可以在if語句和for循環(huán)中使用 JSX髓梅、把它賦值給變量、作為參數(shù)接收绎签、從函數(shù)返回枯饿。
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
使用 JSX 指定屬性
你可以使用引號來指定字符串字面量來作為屬性:
const element = <div tabIndex="0"></div>;
你也可以使用大括號在屬性中插入 JavaScript 表達式：
const element = <img src={user.avatarUrl}></img>;
使用 JSX 指定子元素
如果一個標簽是空元素。你可以像 XML 一樣使用/>自閉合標簽：
const element = <img src={user.avatarUrl} />;
JSX 標簽可以包含子元素：
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
警告
由于 JSX 相比于 HTML 更接近 JavaScript诡必，ReactDOM 使用
cameCase（駝峰命名）作為屬性命名約定代替 HTML 屬性名奢方。例如搔扁，在 JSX 中
class變成className，tabindex變成tabIndex蟋字。
JSX 預防注入攻擊
在 JSX 中嵌入用戶的輸入是安全的稿蹲。
const title = response.potentiallyMaliciousInput;
// 這是安全的:
const element = <h1>{title}</h1>;
默認，在渲染之前鹊奖，ReactDOM 會轉(zhuǎn)換任何在 JSX 中插入的值苛聘。因此來確保在你的應(yīng)用中永遠不能注入任何沒有明確書寫的東西。所有的東西在開始渲染前都被轉(zhuǎn)換成字符串忠聚。這有助于預防XXS（跨站腳本攻擊）设哗。
JSX 表示對象
Babel 編譯 JSX 直到 React.createElement()調(diào)用。
這兩個例子是完全相同的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()執(zhí)行一些檢查幫助你寫出沒有bug的代碼两蟀，但本質(zhì)上网梢，它創(chuàng)建一個像這樣的對象：
// 注意：這個結(jié)構(gòu)是簡化的
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
這些對象稱為“React元素”。你可以把它們想象成你想在屏幕上看到的東西的描述赂毯。React讀取這些對象战虏，并使用它們構(gòu)造DOM并保持更新。
我們將在下一章節(jié)探索渲染 React 元素到DOM党涕。
Tip:
我們推薦為你選的編輯器搜索“Babel”語法主題烦感，以便于 ES6 和 JSX 代碼正確的高亮顯示。
下一步
渲染元素
