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