一、前端工程的復雜化

如果我們只是開發幾個小的demo程序，那么永遠不需要考慮一些復雜的問題：

比如目錄結構如何組織劃分；比如如何管理文件之間的相互依賴；比如如何管理第三方模塊的依賴；比如項目發布前如何壓縮、打包項目；等等…

現代的前端項目已經越來越復雜了：

• 不會再是在HTML中引入幾個css文件，引入幾個編寫的js文件或者第三方的js文件這么簡單；
• 比如css可能是使用less、sass等預處理器進行編寫，我們需要將它們轉成普通的css才能被瀏覽器解析；
• 比如JavaScript代碼不再只是編寫在幾個文件中，而是通過模塊化的方式，被組成在成百上千個文件中，我們需要通過模塊化的技術來管理它們之間的相互依賴；
• 比如項目需要依賴很多的第三方庫，如何更好的管理它們（比如管理它們的依賴、版本升級等）；
  

為了解決上面這些問題，我們需要再去學習一些工具：

• 比如babel、webpack、gulp。配置它們轉換規則、打包依賴、熱更新等等一些的內容；
• 腳手架的出現，就是幫助我們解決這一系列問題的；

二、腳手架是什么呢？

傳統的腳手架指的是建筑學的一種結構：在搭建樓房、建筑物時，臨時搭建出來的一個框架；

編程中提到的腳手架（Scaffold），其實是一種工具，幫我們可以快速生成項目的工程化結構；

• 每個項目作出完成的效果不同，但是它們的基本工程化結構是相似的；
• 既然相似，就沒有必要每次都從零開始搭建，完全可以使用一些工具，幫助我們生產基本的工程化模板；
• 不同的項目，在這個模板的基礎之上進行項目開發或者進行一些配置的簡單修改即可；
• 這樣也可以間接保證項目的基本機構一致性，方便后期的維護；
  

總結：腳手架讓項目從搭建到開發，再到部署，整個流程變得快速和便捷；

三、前端腳手架

對于現在比較流行的三大框架都有屬于自己的腳手架：

• Vue的腳手架：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項目的腳手架：

npm install -g create-react-app

輸入create-react-app --version，若出現版本號輸出，則表明安裝成功

八、創建React項目

現在，我們就可以通過腳手架來創建React項目了。

創建React項目的命令如下：

注意：項目名稱不能包含大寫字母

另外還有更多創建項目的方式，可以參考GitHub的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 是一個現代 JavaScript 應用程序的靜態模塊打包器(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：