JSX

JSX是一種JavaScript的語法擴展，運用於React架構中，其格式比較像是模版語言，但事實上完全是在JavaScript內部實現的。元素是構成React套用的最小單位，JSX就是用來聲明React當中的元素，React使用JSX來描述用戶界面。

指定屬性

JSX可以使用引號來定義以字元串為值的屬性：

const element = <div tabIndex="0"></div>;

也可以使用大括弧來定義以JavaScript表達式為值的屬性：

const element = <img src={user.avatarUrl} />;

因為JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小駝峰）命名來定義屬性的名稱，而不是使用HTML的屬性名稱。例如：class變成了className，而tabindex則對應著tableIndex。

嵌套格式

JSX標籤是閉合式的，像XML/HTML一樣在結尾處用/>表示：

const element = <img src={user.avatarUrl} />;

JSX標籤同樣可以相互嵌套：

const element = (    <div>        <h1>Hello!</h1>        <h2>Good to see you here.</h2>    </div>);

使用表達式

在JSX中可任意使用JavaScript表達式，但要包含在大括弧里，例如：2 + 2，user.firstName，以及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'));

書寫JSX的時候一般都會帶上換行和縮進，這樣可以增強代碼的可讀性。與此同時在JSX代碼的外面擴上一個小括弧，這樣可以防止分號自動插入的bug。

JSX本身其實也是一種表達式

在編譯之後，JSX會被轉化為普通的JavaScript對象。所以可以在if或者for語句里使用JSX，將它賦值給變數，當作參數傳入，作為返回值都是允許的：

function getGreeting(user) {    if (user) {        return <h1>Hello, {formatName(user)}!</h1>;    }    return <h1>Hello, Stranger.</h1>;}

防注入攻擊

在JSX中嵌入用戶輸入是安全的：

const title = response.potentiallyMaliciousInput;// 要接收到的可能含有危險內容的字元串放入大括弧中，這是比較安全的做法const element = <h1>{title}</h1>;

React DOM在渲染之前默認會過濾所有傳入的值。它可以確保套用不會被注入攻擊。所有的內容在渲染之前都被轉換成了字元串。這樣可以有效地防止XSS（跨站腳本攻擊）。

表示對象

Babel轉譯器會把JSX轉換成一個名為React.createElement()的方法調用。

下面兩種代碼的作用是完全相同的：

const element = (    <h1 className="greeting">        Hello, world!    </h1>);const element = React.createElement(    'h1',    { className: 'greeting' },    'Hello, world!');

React.createElement()這個方法首先會進行一些避免bug的檢查，之後會返回一個類似下面例子的對象：

// 注意: 以下示例是簡化過的（不代表在 React 源碼中是這樣）const element = {    type: 'h1',    props: {        className: 'greeting',        children: 'Hello, world'    }};

這樣的對象被稱為“React 元素”。它代表所有顯示在螢幕上的東西。React通過讀取這些對象來構建DOM並保持數據內容一致。