# 引入 JSX
考慮這個變量聲明：
~~~
const element = <h1>Hello, world!</h1>;
~~~
這個有趣的標記語法既不是字符串，也不是 HTML 。
它稱為 JSX ，是一個 JavaScript 的語法擴展。我們建議使用它編寫 React 來描述 UI 的外觀。JSX 可能使你想起一個模板語言，但是它卻有完整的 JavaScript 的能力。
JSX 生產 React 元素。我們將在下一節探索渲染它們到 DOM 中。下面，你可以找到找到使用 JSX 的基礎的需求，來開始學習它。
## 在 JSX 中嵌入表達式
在 JSX 中可以嵌入任何 [JavaScript 表達式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)，通過 花括號包起來。
例如， 2+2 ，uesr.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 中打開它](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)。
分隔 JSX 為多行可以更加易讀。但這并不是強制的，當這樣做時，我們還建議放在括號中以避免[自動補全分號](http://stackoverflow.com/q/2846283)的陷阱。
## JSX 也是表達式
編譯之后，JSX 表達式變成常規的 JavaScript 對象。
這意味著你可以使用 JSX 在語句中或者用于循環、賦值到變量、作為參數、或者函數的返回值。
~~~
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>
);
~~~
>[warning] 警告：
由于JSX 相較 HTML 要更接近 JavaScript，React DOM 使用駝峰屬性命名慣例，而不是 HTML 屬性的名稱形式。
比如， 在 JSX 中， class 屬性成為 className，tabindex 屬性成為 tabIndex 。
## JSX 防止注入式攻擊
在 JSX 中嵌入用戶輸入是安全的：
~~~
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
~~~
默認， React DOM 在渲染它們之前將轉義任何嵌入到 JSX 中的 值。因此它確保你不會被注入任何你應用中沒有明確指出的內容。任何內容在被渲染之前都被轉換成字符串。這有助于阻止[ XSS 攻擊](https://en.wikipedia.org/wiki/Cross-site_scripting)。
## JSX 代表的對象
Babel 編譯 JSX 到 React.createElement() 調用。
這兩個例子是相同的：
~~~
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
~~~
~~~
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
~~~
React.createElement() 執行一些檢查來幫助你編寫更少 bug 的代碼，但是本質上它像這樣創建一個對象：
~~~
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
~~~
這些對象被稱為 React 元素。你可以當它們是你希望在屏幕上看到的內容的描述。React 讀取這些對象并使用它們構成 DOM 并保持它們最新。
下一節我們將探索渲染 React 元素到 DOM 中。
> 貼士：
我們建議為你的編輯器搜索一個 "Babel" 語法插件，那么 ES6 和 JSX 代碼都能正確的高亮顯示。
