2.2 JSX獨立文件

JSX可以在頁面中通過直接定義（見【代碼1-5】）的方式實現，也可以通過引入外部定義好的JSX獨立文件方式來實現。

下面嘗試將【代碼1-5】以獨立文件的方式進行改寫，來實現React JSX代碼的應用。

【代碼2-1】（詳見源代碼目錄import.js文件）

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

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

? 第02行代碼獲取了層（<div id='id-div-react'>）標簽元素的對象（divReact），該標簽元素定義在下面的【代碼2-2】頁面文件中。

? 第04~09行代碼通過const關鍵字定義了一個常量（reactSpan），該常量使用小括號包含了通過<span>、<h3>和<p>標簽定義的元素組合，這段代碼的定義方式就是JSX語法形式。

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

下面再看一下HTML頁面文件的具體代碼：

【代碼2-2】（詳見源代碼目錄ch02-react-jsx-import.html文件）

關于【代碼2-2】的說明：

●第13行代碼中定義了一個層（<div id='id-div-react'>）標簽元素。

●在第14行代碼中，通過<script>標簽引入了JSX獨立文件，其中“src”屬性定義了JSX獨立文件的路徑，另外“type”屬性定義為通過Babel方式（"text/babel"）進行解析。

下面使用Firefox瀏覽器運行測試該HTML網頁，具體效果如圖2.1所示。如圖中的標識所示，頁面中顯示了通過React JSX獨立文件方式渲染的效果，與【代碼1-5】實現的功能是一致的。