React基礎——快速搭建開發環境

莫珂發表於2018-04-01
React開發環境

近年來各大前端框架流行，基本上已經變成了React，Vue和Angular“三足鼎立”的狀況。其中React依賴於完整的生態環境，Facebook巨大影響力以及國內BAT等各大公司的紛紛推崇，不得不承認React已經成為最火的前端框架了（當然現在Vue作為後起之秀也是很厲害的，這裡大家就不要糾結了，僅僅代表個人觀點）。

開發React你的幾種選擇：

  1. 使用一些線上編輯的網站，線上快速學習，如CodePen，jsfiddle等

優點：快速便捷不需要過多配置

缺點：這種方式也就是讓你嚐個鮮，寫一寫demo用的code snippet

  1. 使用webpack從零開始編寫webpack配置檔案，根據專案需要配置各種loader，plugin以及對於生產環境的一些優化

優點：好吧其實除了學習webpack到底做了什麼，好像都是缺點。。。

缺點：配置複雜（Webpack的配置開一節課來講應該都沒有問題），官網文件寫的不接地氣

  1. 使用React官方提供的的腳手架Create-React-App(後面簡稱CRA)

優點：傻瓜式，典型的out-of-the-box，你不用太關心到底做了什麼（不過有些定製化還是要自己搞得，後面的文章再說）

缺點：滿足不了你的好奇心，eject之後來檢視好像程式碼有點多

綜上所述，如果你是React新手，那麼直接推薦你用第三種方式，這也是這篇文章接下來要講的。

如何使用Create-React-App

首先我們需要保證電腦上面擁有NodeJS環境，安裝過npm包管理，如果不清楚怎麼弄，Google或者Baidu一下有很多教程這裡就不多說了

  1. 全域性安裝create-react-app 命令列工具
npm install -g create-react-app
複製程式碼
  1. 建立專案
create-react-app my-app
複製程式碼

耐心等待之後(國內可能網速不好，可以FQ或者使用淘寶映象源，推薦使用nrm命令快速切換各種映象源)，就會看到我們新建立的目錄，展開目錄大概結構如下：

├── README.md---------------------------介紹文件
├── node_modules------------------------第三方安裝包
├── package.json------------------------npm專案配置
├── .gitignore--------------------------git配置
├── public------------------------------公共資源
│   └── favicon.ico
│   └── index.html----------------------首頁html
│   └── manifest.json
└── src---------------------------------原始碼目錄
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js------------------------入口js檔案
    └── logo.svg
    └── registerServiceWorker.js
複製程式碼
  1. 啟動專案
cd my-app
npm start 或者 yarn start (個人比較推薦後者比較快)
複製程式碼

Here we go! 開啟瀏覽器，輸入 http://localhost:3000就能看到我們的第一個React應用了，這裡CRA幫我們在後臺啟動了一個測試伺服器來實現頁面的預覽以及熱更新，修改對應的檔案就會更新到瀏覽器上。對於開發真正的專案這還遠遠不夠，後面文章會講如何加入Hot-Module-Replacement更加高效的來完成開發工作。

Live-Reload

CRA幫我們做了什麼呢？

就像官方定義的那樣Create React apps with no build configuration.。create-react-app幫我們省去了很多環境的配置，提供了一個開箱即用的工具，假設我們自己要配置React開發環境大概需要做以下幾步：

  1. 安裝webpack(用於打包應用)，webpack-dev-server(一個開發伺服器來預覽應用)
  2. 建立webpack配置檔案,一般分為開發配置和生產配置兩個檔案
  3. webpack配置檔案指定了應用的入口檔案，各種檔案的處理loader(babel, css-loader，style-loader，less-loader，sass-loader, url-loader, file-loader等等)和各種外掛（htmlwebpackplugin， uglifyjsplugin等等）的配置，這些配置根據個人用到的東西因人而異。
  4. 等等（只能用等等呢個來描述了，有很多種需求）...

更多學習連結： Create-React-App Github主頁

相關文章