1.3　開發(fā)環(huán)境及工具介紹

“工欲善其事，必先利其器”。開發(fā)React應用需要一個由眾多開發(fā)工具組建成的開發(fā)環(huán)境，這個復雜的開發(fā)環(huán)境也大大提高了應用的開發(fā)和調(diào)試效率。本節(jié)將簡要介紹本書使用到的相關(guān)開發(fā)工具。

1.3.1　基礎環(huán)境

1．Node.js

Node.js是一個JavaScript運行時，它讓JavaScript在服務器端運行成為現(xiàn)實。React應用的執(zhí)行并不依賴于Node.js環(huán)境，但React應用開發(fā)編譯過程中用到的很多依賴（例如NPM、Webpack等）都是需要Node.js環(huán)境的。所以，在開發(fā)React應用前，需要先安裝Node.js。Node.js的官方下載地址為https://nodejs.org。本書使用的Node.js的版本號為v8.4.0，建議讀者安裝的Node.js的版本不要低于本書使用的版本。

2．NPM

NPM是一個模塊管理工具，用來管理模塊的發(fā)布、下載及模塊之間的依賴關(guān)系。開發(fā)React應用時，需要依賴很多其他的模塊，這些模塊就可以通過NPM下載。NPM已經(jīng)集成到Node.js的安裝包中，所以不需要單獨安裝。另外，F(xiàn)acebook聯(lián)合Exponent、Google和Tilde共同推出了另一個模塊管理工具Yarn（https://yarnpkg.com），可以作為NPM的替代工具。本書使用的是NPM。

1.3.2　輔助工具

1．Webpack

Webpack是用于現(xiàn)代JavaScript應用程序的模塊打包工具。Webpack會遞歸地構(gòu)建一個包含應用程序所需的每個模塊的依賴關(guān)系圖，然后將所有模塊打包到少量文件中。Webpack不僅可以打包JS文件，配合相關(guān)插件的使用，它還可以打包圖片資源和樣式文件，已經(jīng)具備一站式的JavaScript應用打包能力。Webpack本身就是一個模塊，因此可以通過NPM等模塊管理工具安裝。

2．Babel

我們已經(jīng)提到，React應用中會大量使用ES 6語法，但是目前的瀏覽器環(huán)境并不完全支持ES 6語法。Babel是一個JavaScript編譯器，它可以將ES 6及其以后的語法編譯成ES 5的語法，從而讓我們可以在開發(fā)過程中盡情使用最新的JavaScript語法，而不需要擔心代碼無法在瀏覽器端運行的問題。Babel一般會和Webpack一起使用，在Webpack編譯打包的階段，利用Babel插件將ES 6及其以后的語法編譯成ES 5語法。

3．ESLint

ESLint是一個插件化的JavaScript代碼檢測工具，它既可以用于檢查常見的JavaScript語法錯誤，又可以進行代碼風格檢查，從而保證團隊內(nèi)不同開發(fā)人員編寫的代碼都能遵循統(tǒng)一的代碼規(guī)范。使用ESlint必須要指定一套代碼規(guī)范的配置，然后ESlint就會根據(jù)這套規(guī)范對代碼進行檢查。目前，業(yè)內(nèi)比較好的規(guī)范是Airbnb的規(guī)范，但這套規(guī)范過于嚴格，并不一定適合所有團隊。在實際使用時，可以先繼承這套規(guī)范，然后在它的基礎上根據(jù)實際需求對規(guī)范進行修改。

4．代碼編輯器

你可以在任何編輯器上編寫React應用的代碼，但一款好的編輯器能大大提高你的開發(fā)效率。本書推薦使用微軟出品的Visual Studio Code（簡稱VS Code），它的操作簡潔、功能強大，本書中的示例代碼均在VS Code中完成，讀者可自行到官方網(wǎng)站下載安裝，地址為：https://code.visualstudio.com。此外，Sublime Text、Atom和WebStorm也是使用較多的代碼編輯器。

1.3.3　Create React App

Webpack、Babel等工具是開發(fā)React應用所必需的，但這些工具的使用方法又比較煩瑣，尤其是Webpack的使用，需要大量篇幅才能介紹清楚。為了避免讀者還沒有開始使用React，就被各種輔助工具的使用搞得“頭暈目眩”，本書借助React官方提供的腳手架工程Create React App（https://github.com/facebookincubator/create-react-app）創(chuàng)建React應用。Create React App基于最佳實踐，將Webpack、Babel、ESlint等工具的配置做了封裝，使用Create React App創(chuàng)建的項目無須進行任何配置工作，從而使開發(fā)者可以專注于應用開發(fā)。

1．安裝

打開命令行終端，依次輸入以下命令：

通過使用–g參數(shù)，我們將create-react-app安裝到了系統(tǒng)的全局環(huán)境，這樣就可以在任意路徑下使用它了。

2．創(chuàng)建應用

使用create-react-app創(chuàng)建一個新應用，在命令行終端執(zhí)行：

這時會在當前路徑下新建一個名為my-app的文件夾，my-app也就是我們新創(chuàng)建的React應用。

3．運行應用

在命令行終端執(zhí)行：

當應用啟動成功后，在瀏覽器地址欄輸入http://localhost:3000即可訪問應用，界面如圖1-1所示。

用VS Code打開my-app文件夾，文件夾內(nèi)的目錄結(jié)構(gòu)如圖1-2所示。

node_modules文件夾內(nèi)是安裝的所有依賴模塊；package.json文件定義了項目的基本信息，如項目名稱、版本號、在該項目下可執(zhí)行的命令以及項目的依賴模塊等；public文件夾下的index.html是應用的入口頁面；src文件夾下是項目源代碼，其中index.js是代碼入口。

index.js導入了模塊App.js，修改App.js，將它的render方法修改如下：

保存文件后，可以發(fā)現(xiàn)瀏覽器頁面實時進行了更新，這是因為Create React App也包含熱加載功能，可實時更新代碼變化。新的頁面白色背景區(qū)域顯示“Hello，world!”，如圖1-3所示。

至此，我們完成了第一個React應用。