1.3 第一個React應用

本節開始介紹第一個使用React框架開發Web前端應用，讓讀者一識React應用的廬山真面目。React應用開發涉及的內容比較廣泛，我們還是從最簡單、最基本的“Hello World”開始介紹。簡單來講，就是如何將傳統意義的HTML網頁內容，以React框架渲染的方式來實現。

首先，就是如何安裝和使用React框架。React框架的安裝和使用很簡單，可以直接通過CDN方式獲取React和ReactDOM的UMD版本引用，具體如下：

不過，上述版本僅用于開發環境，不適合生產環境。React壓縮和優化之后的生產環境版本鏈接如下：

此外，還要引入Babel編譯器所需的庫文件，具體如下：

關于上面以CDN方式引入的一組庫文件（react.js、react-dom.js和babel.js這3個腳本文件，文件名為泛指），具體描述如下：

●react.js是React框架的核心庫。

●react-dom.min.js提供與DOM相關的功能。

●babel.min.js由Babel編譯器提供，可以將ES6代碼轉為ES5代碼，這樣就能在不支持ES6的瀏覽器上執行React代碼（請注意在生產環境中不建議使用）。

下面，開始第一個使用React框架實現“Hello World”應用的代碼實例，具體如下：

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

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

●第06行、07行和第09行代碼，以CDN方式分別引用了React框架所需的三個庫文件（react.development.js、react-dom.development.js和babel.min.js）。

●第12行代碼通過<div id="root">標簽元素定義了一個層，用于顯示通過React框架渲染的文本內容。

●第14~17行代碼通過調用React DOM對象的render()方法來渲染元素。

●第14行代碼定義了要引入的元素節點<h1>。

●第15行代碼獲取了頁面中要渲染的元素節點<div id="root">。

●然后，第14~17行代碼通過ReactDOM.render()方法將<h1>元素節點渲染到頁面的層<div id="root">元素節點中。

關于ReactDOM.render()方法的語法格式如下：

語法說明：

●element參數：必需，表示渲染的源對象（元素或組件）。

●container參數：必需，表示渲染的目標對象（元素或組件）。

●callback參數：可選，用于定義回調方法。

對于【代碼1-1】中所使用渲染方法的方式（見第14~17行代碼），看上去很直觀，不過感覺邏輯性不太強。

下面，我們嘗試將上述代碼以如下的方式進行改寫，或許會比較容易理解了，具體如下：

【代碼1-2】（詳見源代碼目錄ch01-react-ele-helloworld.html文件）

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

●第02行代碼通過const關鍵字定義了一個常量（h1），描述了要引入的元素節點<h1>。由此可見，在React框架中變量的使用非常靈活，可以將元素節點直接定義為變量形式來使用。

●第03行代碼獲取了頁面中要渲染的元素節點<div id="root">，保存在變量（root）中。

●第04行代碼調用React DOM對象的render()方法，將h1元素節點渲染到root元素節點中。

可以看到，改寫后的【代碼1-2】邏輯性比較好，讀者應該能夠很容易分清渲染的源對象和目標對象，以及渲染方式。

下面分別使用Firefox瀏覽器運行測試【代碼1-1】和【代碼1-2】定義的HTML網頁，二者的具體效果（相同的）如圖1.1所示。頁面中成功顯示了通過React框架渲染出的文本內容（Hello, world!）。