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