React腳手架搭建的學習
一、前端工程的複雜化
如果我們只是開發幾個小的demo程式，那麼永遠不需要考慮一些複雜的問題：
比如目錄結構如何組織劃分；比http://www.cppcns.com如如何管理檔案之間的相互依賴；比如如何管理第三方模組的依賴；比如專案釋出前如何壓縮、打包專案；等等…
現代的前端專案已經越來越複雜了：
- 不會再是在HTML中引入幾個檔案，引入幾個編寫的檔案www.cppcns.com或者第三方的js檔案這麼簡單；
- 比如css可能是使用less、sass等前處理器進行編寫，我們需要將它們轉成普通的css才能被瀏覽器解析；
- 比如程式碼不再只是編寫在幾個檔案中，而是通過模組化的方式，被組成在成百上千個檔案中，我們需要通過模組化的技術來管理它們之間的相互依賴；
- 比如專案需要依賴很多的第三方庫，如何更好的管理它們（比如管理它們的依賴、版本升級等）；
為了解決上面這些問題，我們需要再去學習一些工具：
- 比如babel、webpack、gulp。配置它們轉換規則、打包依賴、熱更新等等一些的內容；
- 腳手架的出現，就是幫助我們解決這一系列問題的；
二、腳手架是什麼呢？
傳統的腳手架指的是建築學的一種結構：在搭建樓房、建築物時，臨時搭建出來的一個框架；
中提到的腳手架（Scaffold），其實是一種工具，幫我們可以快速生成專案的工程化結構；
- 每個專案作出完成的效果不同，但是它們的基本工程化結構是相似的；
- 既然相似，就沒有必要每次都從零開始搭建，完全可以使用一些工具，幫助我們生產基本的工程化模板；
- 不同的專案，在這個模板的基礎之上進行專案開發或者進行一些配置的簡單修改即可； GivuK
- 這樣也可以間接保證專案的基本機構一致性，方便後期的維護；
總結：腳手架讓專案從搭建到開發，再到部署，整個流程變得快速和便捷；
三、前端腳手架
對於現在比較流行的三大框架都有屬於自己的腳手架：
- 的腳手架：vue-cli
- Angular的腳手架：angular-cli
- React的腳手架：create-react-app
它們的作用都是幫助我們生成一個通用的目錄結構，並且已經將我們所需的工程環境配置好。
使用這些腳手架需要依賴什麼呢？
- 目前這些腳手架都是使用node編寫的，並且都是基於webpack的；
- 所以我們必須在自己的電腦上安裝node環境；
這裡我們主要是學習React，所以我們還是以React的腳手架工具：create-react-app作為講解；
四、安裝node
React腳手架本身需要依賴node，所以我們需要安裝node環境：
無論是windows還是Mac OS，都可以通過node官網直接下載；
官網地址：https://nodejs.org/en/download/注意：這裡推薦大家下載LTS（Long-term support ）版本，是長期支援版本，會比較穩定；
下載後，雙擊安裝即可：
1.安裝過程中，會自動配置環境變數；
2.安裝時，會同時幫助我們安裝npm管理工具；
輸入以下命令：
node --version npm --version
若出現版本號則表明安裝成功了
五、包管理工具
什麼是npm？
- 全稱 Node Package Manager，即“node包管理器”；
- 作用肯定是幫助我們管理一下依賴的工具包（比如react、react-dom、axios、babel、webpack等等）；
- 作者開發的目的就是為了解決“模組管理很糟糕”的問題；
另外，還有一個大名鼎鼎的node包管理工具yarn：
- Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具；
- Yarn 是為了彌補 npm 的一些缺陷而出現的；
- 早期的npm存在很多的缺陷，比如安裝依賴速度很慢、版本依賴混亂等等一系列的問題；
- 雖然從npm5版本開始，進行了很多的升級和改進，但是依然很多人喜歡使用yarn；
- React腳手架預設也是使用yarn；
npm install -g yarn
輸入yarn --version，若出現版本號輸出，則表明安裝成功
六、Yarn和npm命令對比
七、安裝腳手架
補充：在國內，某些情況使用npm和yarn可能無法正常安裝一個庫，這個時候我們可以選擇使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
最後一個需要安裝的是建立React專案的腳手GivuK架：
npm install -g create-react-app
輸入create-react-app --version，若出現版本號輸出，則表明安裝成功
八、建立React專案
現在，我們就可以通過腳手架來建立React專案了。
建立React專案的命令如下：
注意：專案名稱不能包含大寫字母
另外還有更多建立專案的方式，可以參考的readme
create-react-app 專案名稱
建立完成後，進入對應的目錄，就可以將專案跑起來：
cd 01-test-reactyarn start
九、目錄結構分析
十、瞭解PWA
整個目錄結構都非常好理解，只是有一個PWA相關的概念：
- PWA全稱Progressive Web App，即漸進式WEB應用；
- 一個 PWA 應用首先是一個,可以通過 Web 技術編寫出一個網頁應用；
- 隨後新增上 App Manifest 和 Service Worker 來實現 PWA 的安裝和離線等功能；
- 這種Web存在的形式，我們也稱之為是 Web App；
PWA解決了哪些問題呢？
- 可以新增至主螢幕，點選主螢幕圖示可以實現啟動動畫以及隱藏位址列；
- 實現離線快取功能，即使使用者手機沒有網路，依然可以使用一些離線功能；
- 實現了訊息推送；
- 等等一系列類似於Native App相關的功能；
十一、webpack是什麼
我們說過React的腳手架是基於Webpack來配置的：
- webpack 是一個現代 Script 應用程式的靜態模組打包器(module bundler)；
- 當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle；
十二、腳手架中的webpack
在這裡我們暫時不展開來講webpack，因為裡面的內容是非常多的（後續會有專門講webpack的專題）；
但是，很奇怪：我們並沒有在目錄結構中看到任何webpack相關的內容？
原因是React腳手架講webpack相關的配置隱藏起來了（其實從Vue CLI3開始，也是進行了隱藏）；
如果我們希望看到webpack的配置資訊，應該怎麼來做呢？
- 我們可以執行一個package.json檔案中的一個：
"eject": "react-scripts eject" - 這個操作是不可逆的，所以在執行過程中會給與我們提示；
yarn eject
十三、腳手架中的webpack
十四、檔案結構刪除
通過腳手架建立完專案，很多同學還是會感覺目錄結構過於複雜，所以我打算從零帶著大家來編寫程式碼。
我們先將不需要的檔案統統刪掉：
將src下的所有檔案都刪除將public檔案下出列favicon.ico和index.html之外的檔案都刪除掉
十五、開始編寫程式碼
在src目錄下，建立一個index.js檔案，因為這是webpack打包的入口。
在index.js中開始編寫React程式碼：
我們會發現和寫的程式碼是邏輯是一致的；只是在模組化開發中，我們需要手動的來匯入React、ReactDOM，因為它們都是在我們安裝的模組中；
如果我們不希望直接在 ReactDOM.render 中編寫過多的程式碼，就可以單獨抽取一個元件App.js：
到此這篇關於React腳手架搭建的學習的文章就介紹到這了,更多相關React 腳手架內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！