工欲善其事，必先利其器。愛(ài)掏網(wǎng) - it200.com在正式學(xué)習(xí) React 技術(shù)棧之前，我們先來(lái)介紹一下之后經(jīng)常要使用到的 npm。愛(ài)掏網(wǎng) - it200.com
npm 是一個(gè)基于 Nodejs 的 JavaScript 包管理工具，全稱叫做 Node Package Manager，所謂的包呢，其實(shí)就是可復(fù)用的代碼，每個(gè)人都可以把自己編寫的代碼庫(kù)發(fā)布到 npm 的源（英文叫做 registry）上面進(jìn)行管理，你也可以下載別人開發(fā)好的包，在你自己的應(yīng)用當(dāng)中使用。愛(ài)掏網(wǎng) - it200.com
我們所熟知的，jQuery/Bootstrap/React 等框架或庫(kù)都被托管在 npm 上。愛(ài)掏網(wǎng) - it200.com通過(guò)使用 npm 作為項(xiàng)目的包管理工具，我們可以很方便地在我們的開發(fā)項(xiàng)目中引入以及管理第三方的框架或者庫(kù)，而不需要像以前前端開發(fā)的原始時(shí)期一樣，手動(dòng)復(fù)制粘貼代碼文件。愛(ài)掏網(wǎng) - it200.com
其實(shí) npm 的安裝以及基本的使用方法都非常的簡(jiǎn)單，只是由于國(guó)內(nèi)糟糕的網(wǎng)絡(luò)原因，在安裝完成之后，我們還需要手動(dòng)進(jìn)行一些調(diào)整和配置，另外一方面也是照顧到初學(xué)者，所以在課程正式開始之前，我們先專門介紹一下 npm 的安裝以及如何通過(guò) npm 來(lái)管理我們的 React 開發(fā)項(xiàng)目。愛(ài)掏網(wǎng) - it200.com
npm 的安裝非常簡(jiǎn)單，不管你是用的是什么操作系統(tǒng)，我們只需要打開 Nodejs 官網(wǎng)，網(wǎng)站會(huì)自動(dòng)匹配你的系統(tǒng)顯示相應(yīng)的安裝包，點(diǎn)擊最新版本的下載按鈕，等待安裝包下載完成。愛(ài)掏網(wǎng) - it200.com
之后只需要雙擊打開安裝包，稍等待一段時(shí)間，具體等待時(shí)間的長(zhǎng)短和你的網(wǎng)速及硬件配置有關(guān)，等待安裝程序預(yù)配置完成之后，根據(jù)提示，點(diǎn)擊下一步，同意用戶協(xié)議，再不停地點(diǎn)擊下一步，在安裝內(nèi)容當(dāng)中，確保配置環(huán)境變量的選項(xiàng)是被勾選中的，之后再確定進(jìn)入下一步，等待安裝完成即可。愛(ài)掏網(wǎng) - it200.com
之后我們可以打開控制臺(tái)，輸入 npm 或 node 檢驗(yàn)是否安裝成功。愛(ài)掏網(wǎng) - it200.com附加 version 參數(shù)可以查看我們安裝的 npm 及 node 的版本。愛(ài)掏網(wǎng) - it200.com
node -v
npm -v
由于 npm 官方的服務(wù)器在國(guó)外，在國(guó)內(nèi)使用可能會(huì)遇到很多網(wǎng)絡(luò)問(wèn)題，而且速度也非常慢，為了方便我們的開發(fā)，我們需要手動(dòng)切換 npm 到國(guó)內(nèi)的鏡像源。愛(ài)掏網(wǎng) - it200.com國(guó)內(nèi)最穩(wěn)定的鏡像源是淘寶提供的。愛(ài)掏網(wǎng) - it200.com
打開淘寶 npm 鏡像的官網(wǎng)，我們可以看到簡(jiǎn)要的使用說(shuō)明。愛(ài)掏網(wǎng) - it200.com首先，在這里，我們可以獲取到鏡像的地址，先復(fù)制備用。愛(ài)掏網(wǎng) - it200.com之后打開命令行，注意到這里，因?yàn)槲覀兊?npm 默認(rèn)是安裝在系統(tǒng)文件夾下的，所以需要以管理員模式打開命令行，否則在安裝包的過(guò)程中可能會(huì)出現(xiàn)一些權(quán)限問(wèn)題。愛(ài)掏網(wǎng) - it200.com
在命令行中，我們輸入
npm config set registry https://registry.npm.taobao.org
來(lái)修改npm默認(rèn)的安裝源，通過(guò)
npm config get registry
來(lái)檢驗(yàn)一下剛才的配置是否成功。愛(ài)掏網(wǎng) - it200.com
除此之外，我們還可以使用淘寶鏡像提供的cnpm工具，通過(guò)cnpm來(lái)安裝包一般速度會(huì)更快一些，我們可以直接復(fù)制文檔中的命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
粘貼在命令行中，回車進(jìn)行安裝，初次安裝需要等待的時(shí)間可能會(huì)比較久，一定要有耐心。愛(ài)掏網(wǎng) - it200.com
等待安裝完成之后，我們可以在命令行輸入cnpm -v來(lái)測(cè)試是否安裝成功。愛(ài)掏網(wǎng) - it200.com
接下來(lái)，我們可以嘗試一下，使用 npm 安裝 React 到我們的項(xiàng)目中。愛(ài)掏網(wǎng) - it200.com在我們的工作目錄，按住 shift 點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選取“在此處打開命令行”，創(chuàng)建一個(gè)項(xiàng)目的文件夾，例如 learn-react ，使用 cd 命令切換至文件夾中，輸入：
npm init -y
使用默認(rèn)設(shè)置初始化我們的項(xiàng)目的 npm 配置，在項(xiàng)目目錄中會(huì)生成一個(gè) package.json 文件，里面會(huì)保存我們項(xiàng)目的基本信息、命令腳本以及依賴的庫(kù)等信息。愛(ài)掏網(wǎng) - it200.com再然后，我們可以通過(guò)命令：
cnpm install react react-dom --save
來(lái)安裝 React，并將其保存到我們的項(xiàng)目依賴當(dāng)中。愛(ài)掏網(wǎng) - it200.com現(xiàn)在再來(lái)看一下 package.json 文件，我們可以看到其中的 dependencies 已經(jīng)保存了 react 的信息了。愛(ài)掏網(wǎng) - it200.com
其實(shí)還有另外一個(gè)包管理工具 yarn，yarn 是由 Facebook 推出的包管理客戶端，優(yōu)于 npm 客戶端的是它會(huì)緩存已經(jīng)下載過(guò)的包并做了一些其他方面的優(yōu)化，速度要比 npm 快，還添加了一些別的 npm 不具備的特性。愛(ài)掏網(wǎng) - it200.comyarn 的官網(wǎng)及文檔全部都有中文，對(duì)用戶十分友好，有興趣的同學(xué)可以去嘗試，不過(guò)在本教程當(dāng)中，我們?nèi)匀粫?huì)繼續(xù)使用 npm 作為我們的包管理工具。愛(ài)掏網(wǎng) - it200.com
如果我們使用 JSX 語(yǔ)法或 ES6 的新特性，我們編寫的 React 代碼是無(wú)法直接在瀏覽器中運(yùn)行的，所以我們需要為 React 專門配置開發(fā)環(huán)境，用來(lái)將 React 代碼編譯為可以直接在瀏覽器中運(yùn)行的代碼，或者通過(guò)一些工具和庫(kù)在瀏覽器中處理我們編寫的 React 代碼，以使其正確地運(yùn)行。愛(ài)掏網(wǎng) - it200.com
體驗(yàn) React
假如你只是想體驗(yàn)一下 React 的話，最快且最簡(jiǎn)單的方式是使用 React 官方提供的 Codepen 模板，只需要打開一個(gè)網(wǎng)址即可在瀏覽器中體驗(yàn)編寫 React 代碼。愛(ài)掏網(wǎng) - it200.com同樣是由于國(guó)內(nèi)的網(wǎng)絡(luò)原因，部分同學(xué)使用 Codepen 的體驗(yàn)可能不會(huì)特別好，沒(méi)有關(guān)系，再介紹給大家一個(gè)替代品，Codepan，也只需要打開一個(gè)網(wǎng)址。愛(ài)掏網(wǎng) - it200.com就可以開始愉快地編碼啦，并且這個(gè)網(wǎng)站還是可以離線運(yùn)行的單頁(yè)應(yīng)用。愛(ài)掏網(wǎng) - it200.com
下面是Codepen上的React模板：
使用 React CDN
我們也可以不使用包管理工具，直接在網(wǎng)頁(yè)中引入 React ，官方同樣為我們提供了一個(gè)體驗(yàn) React 的網(wǎng)頁(yè)模板。愛(ài)掏網(wǎng) - it200.com
使用 create-react-app 命令行工具
通過(guò) npm，我們可以安裝許多命令行工具。愛(ài)掏網(wǎng) - it200.com React 官方專門為我們準(zhǔn)備了專用的 React 項(xiàng)目生成工具 create-react-app，只需要簡(jiǎn)單幾行代碼即可生成 React 項(xiàng)目，并且在開發(fā)時(shí)還支持實(shí)時(shí)更新，自動(dòng)重載等功能。愛(ài)掏網(wǎng) - it200.com
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
如果是我們完全地手工配置，則需要配置安裝 Webpack/Babel 等工具庫(kù)。愛(ài)掏網(wǎng) - it200.com所以對(duì)于初學(xué)者或想要快速開發(fā)應(yīng)用的同學(xué)，create-react-app 就是你最好的選擇。愛(ài)掏網(wǎng) - it200.com
并且在之后的課程當(dāng)中，我們同樣會(huì)使用 create-react-app 來(lái)創(chuàng)建我們的教學(xué)示例應(yīng)用。愛(ài)掏網(wǎng) - it200.com