1.6 JSX簡單入門

在前文中介紹了如何通過React DOM的createElement()方法創建虛擬DOM，并將創建的虛擬DOM渲染到頁面中的過程。但是，Facebook的React研發團隊還是覺得不太滿意，最終開發出來一種專屬于React框架的JavaScript語法擴展—JSX。

所謂JSX其實就是JavaScript XML的縮寫，直譯過來就是基于JavaScript的XML。JSX看起來似乎是一種XML格式，其本質仍舊是一種JavaScript語言，只不過是將JavaScript腳本代碼寫成XML樣式。其實，在【代碼1-2】中的第02行代碼就已經使用到了JSX語法，具體如下：

這里的<h1>標簽元素就是通過JSX方式定義的，嚴格講就是一個虛擬DOM。為了詳細介紹React框架中JSX方式的使用方法，下面看一個具體的代碼實例：

【代碼1-5】（詳見源代碼目錄ch01-react-jsx-intro.html文件）

關于【代碼1-5】的說明：

●首先，在第14行代碼中，<script type="text/babel">標簽內使用了JSX語法要求的"text/babel"屬性，這一點會在后續章節中進行詳細介紹。

●第18~23行定義了一段完整的JSX代碼，實現了一個虛擬DOM對象，具體內容如下：

? 第18~23行代碼通過const關鍵字定義了一個常量（reactSpan），該常量使用小括號包含了通過<span>、<h3>和<p>標簽定義的元素組合。

? 第19~22行代碼定義的HTML標簽符合XML格式，而常量（reactSpan）的定義完完全全符合JavaScript語法，因此該語法被稱為JSX。

●第24行代碼調用React DOM對象的render()方法，將JSX代碼渲染到頁面中進行顯示。

下面使用Firefox瀏覽器運行測試該HTML網頁，具體效果如圖1.10所示。

圖1.10中顯示了通過React JSX方式渲染的效果。其實，通過React JSX方式定義的虛擬DOM，最終也會轉換為通過createElement()方法實現虛擬DOM。