1.4 React腳手架

本節介紹React腳手架方面的內容，腳手架是學習React開發非常重要的部分，其所涵蓋的內容也非常廣泛。因此，在介紹一些相關技術點時會簡明扼要一些，更深入地了解就需要讀者自行完成了。

1.4.1 關于React腳手架

如今，Web前端應用幾乎都擁有非常復雜的項目架構，絕非如【代碼1-1】那樣的單頁面文件就可以完成的。React項目開發也是如此，比較流行的做法是采用Webpack + ES6模式來搭建項目架構，然后通過打包方式發布Web應用。一般業內就稱這個項目架構為“腳手架”，使用這個名詞概念確實很形象，就如同蓋房子時必須使用的腳手架一樣。

上面關于React項目架構的描述比較簡單抽象，而且還有一些支撐開發React應用的關鍵技術沒有描述出來。其實，涉及React項目開發的技術點有很多，比如：Node.js框架、npm包管理工具、Webpack模塊打包器、ES6（ECMAScript 6），以及Babel編譯器等。這些內容會在后面章節中有一個大致的介紹，以幫助讀者理解React腳手架的原理和使用方法。

雖然設計人員通過自己搭建React腳手架也是一個很好的學習過程，但有時候難免會遇到問題，或者是做著重復造輪子的工作。因此，設計出一個具有良好兼容性的React腳手架，通過自動化方式進行配置，并生成實際項目框架的方式逐漸成為主流。迄今為止，React腳手架的成熟產品網上有很多，不過最著名的還是Facebook自己推出的“create-react-app”腳手架。在本書的項目實踐中，也是通過“create-react-app”腳手架來構建React應用的。

1.4.2 Node.js與npm

如果讀者想使用“create-react-app”腳手架進行開發，必須先進行安裝。安裝“create-react-app”腳手架最常用的方式就是通過npm工具進行，那么npm工具是什么呢？

簡單來講，npm就是基于Node.js框架的包管理工具。而Node.js框架則是基于著名的Google V8引擎所開發的JavaScript服務器端平臺，可用來快速搭建易于擴展的Web應用。

npm包管理工具是綁定在Node.js框架中的，也就是說安裝好Node.js框架后，npm工具也自動安裝完成了。下面以Windows操作系統環境為例，介紹安裝和部署Node.js框架和npm包管理工具的方法。

（1）用戶可以直接從Node.js的官方網站（https://nodejs.org/en/download/）來獲取安裝包文件，我們也可以通過Node.js官方中文站點（http://nodejs.cn/download/）進行下載。下載時，請注意選擇與自己電腦操作系統相匹配的軟件版本。安裝過程很簡單，根據自身需要按步驟操作“下一步”按鈕，直到程序安裝成功就可以了。

（2）判斷Node程序是否安裝成功。判斷方法很簡單，直接在命令行控制臺中通過“node-v”命令查看版本號就可以。如果能夠顯示出版本號，就表示安裝成功了，具體如圖1.2所示。

（3）判斷npm包管理工具是否同時安裝成功。判斷方法同樣很簡單，直接在命令行控制臺中通過“npm -v”命令查看版本號。如果能夠顯示出版本號，就表示npm工具也安裝成功了，具體如圖1.3所示。

npm包管理工具安裝成功后，就可以通過該工具安裝各種第三方開發包了，也包括“create-react-app”腳手架的安裝。

1.4.3 Webpack模塊打包器

前面提到Webpack這項技術，那么，Webpack具體是什么呢？簡單來講，Webpack是一項模塊打包器技術，通過分析項目結構找到JavaScript（ECMAScript）模塊以及其他一些瀏覽器不能直接運行的擴展語言或資源，將其轉換并打包為合適的格式以供瀏覽器解析。

Webpack的工作方式可以概括如下：首先將項目作為一個整體來看，通過一個給定的主文件或入口文件（如index.js），Webpack將從這個文件開始查找項目的所有依賴文件，并使用加載器（loaders）進行處理，最后打包為一個（或多個）可通過瀏覽器解析的JavaScript腳本文件。

安裝Webpack很簡單，通過npm包管理工具在終端命令行操作就可以完成，具體命令如下：

1.4.4 ES6和Babel

ES6就是指ECMAScript 6的縮寫。ECMAScript是一種由Ecma國際（歐洲計算機制造商協會前身）標準化的腳本程序設計語言，也可以認為就是讀者所熟知的JavaScript腳本語言。

不過，JavaScript與ECMAScript還是有所區別的。JavaScript是先于ECMAScript開發出來并付諸實際應用的，ECMAScript是在JavaScript逐漸成熟并成為事實上的腳本語言標準后，經由Ecma國際標準化（基于ECMA-262標準）的腳本語言。因此，JavaScript可以理解為是ECMAScript標準的實現和擴展。

ES6（ECMAScript 6）是ECMAScript系列標準中具有重大意義的一版，它使得ECMAScript正式成為國際標準，并被稱為下一代的腳本語言。由于ES6是在2015年正式發布的，因此ES6也稱為ECMAScript 2015，且后續的版本開始按照所發布年份命名了。

介紹完ECMAScript，接著介紹Babel。Babel其實是一個工具鏈，主要用于將基于ECMAScript 2015+ 標準編寫的腳本代碼轉換為向后兼容JavaScript語法的腳本代碼，以便能夠運行在當前或舊版本的瀏覽器中。因此，Babel也可以當作下一代JavaScript腳本語言的編譯器。

ES6與Babel的組合，是開發React應用的重要基礎。設計人員在使用“create-react-app”腳手架的過程中，直觀上也是感受不到Babel存在的，同樣是在底層邏輯發揮重要作用。

1.4.5 使用create-react-app腳手架開發第一個應用

現在，我們開始介紹如何使用“create-react-app”腳手架開發第一個應用。如果要使用“create-react-app”腳手架，在早些時候就需要先安裝該腳手架。不過，自node v6+和npm v5.2+版本以后，npm新引入一條npx命令，支持通過直接臨時安裝“create-react-app”腳手架來創建應用的方式。關于這兩種安裝方式，下面都會具體介紹。

通過傳統全局方式安裝“create-react-app”腳手架的方法，具體操作命令參考如下：

在“create-react-app”腳手架安裝完畢后，選定好自己的項目目錄，通過create-react-app命令創建應用，具體命令如下：

如果是通過npx命令方式，安裝“create-react-app”腳手架與創建項目應用是一步完成的，具體操作命令參考如下：

通過npx方式安裝的“create-react-app”腳手架，其實是臨時的安裝包，項目創建完成后會自動刪除該安裝包。

以上這兩種通過“create-react-app”腳手架創建React項目的方式，雖然過程有所區別，但最終效果是一樣的。圖1.4所示是React項目創建完成后的提示信息。

React項目創建完成后，通過“npm start”命令就可以啟動項目了，具體如下：

如果通過“npm start”命令啟動React項目成功，控制臺終端中會給出正確的提示信息，如圖1.5所示。

通過瀏覽器訪問地址（http://localhost:3000）就可以看到項目啟動后的內容了，具體效果如圖1.6所示。它展示的是一個默認的React項目運行后的效果，讀者應該感到很振奮人心吧。

1.4.6 React項目架構

在這個項目應用介紹中，筆者不打算給出任何程序代碼，就是讓讀者了解一下通過“create-react-app”腳手架創建React項目的過程。下面看一下通過腳手架創建React項目的架構，如圖1.7所示。

圖1.7展示的是一個最基本的React腳手架項目架構。需要說明的是，隨著“create-react-app”腳手架應用的不斷迭代更新，目錄結構和文件名稱可能會有修訂，不過基本原理還是會保持延續。

圖1.7是一個默認腳手架項目的目錄和文件，關于各個目錄和文件的功能作用描述如下：

●node_modules目錄：是通過npm工具安裝的所有依賴模塊，是整個項目的基礎核心。

●public目錄：該目錄下的index.html頁面文件是整個項目的入口頁面，相當于網站主頁。

●src目錄：用于保存整個項目的源代碼，其中的index.js是源代碼入口。

●package.json文件：整個項目的基本配置文件，用于定義項目的基本信息。

以上就是一個最基本的、默認的“create-react-app”腳手架項目中，關于目錄和文件的基本介紹。整個“create-react-app”腳手架項目的架構高度可配置，設計人員可通過自定義方式實現更為復雜和高級的功能。