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

近年來各大前端框架流行，基本上已經變成了React，Vue和Angular「三足鼎立」的情況。其中React依賴於完整的生態環境，Facebook巨大影響力以及國內BAT等各大公司的紛紛推崇，不得不認可React已經成爲最火的前端框架了（固然如今Vue做爲後起之秀也是很厲害的，這裏你們就不要糾結了，僅僅表明我的觀點）。

開發React你的幾種選擇：

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

優勢：快速便捷不須要過多配置

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

2. 使用webpack從零開始編寫webpack配置文件，根據項目須要配置各類loader，plugin以及對於生產環境的一些優化

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

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

3. 使用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
複製代碼

2. 建立項目

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
複製代碼

3. 啓動項目

cd my-app
npm start 或者 yarn start (我的比較推薦後者比較快)
複製代碼

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

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主頁