大家好，我是小丞同學，這篇文章是學習 React 腳手架的學習筆記
非常感謝你的閱讀，不對的地方歡迎指正
React專欄 已經全部更新于 GIthub
願你生活明朗，萬物可愛
簡介
這篇文章主要圍繞 React 中的腳手架，來解決一下幾個問題
靈魂三問：是什麼？為什麼？怎麼辦？
1.什麼是腳手架？
2.為什麼要用腳手架？
3.怎麼用腳手架？
1. 什麼是 React 腳手架？
在我們的現實生活中，腳手架最常用的使用場景是在工地，它是為了保證施工順利的、友善的進行而搭建的，在工地上搭建的腳手架可以幫助勞工們高校的去完成工作，同時在大樓建設完成後，拆除腳手架并不會有任何的影響。
在我們的 React 項目中，腳手架的作用與之有異曲同工之妙
React 腳手架其實是一個工具幫我們快速的生成項目的工程化結構，每個項目的結構其實大緻都是相同的，是以 React 給我提前的搭建好了，這也是腳手架強大之處之一，也是用 React 建立 SPA 應用的最佳方式
2. 為什麼要用腳手架？
在前面的介紹中，我們也有了一定的認知，腳手架可以幫助我們快速的搭建一個項目結構
在我之前學習 webpack 的過程中，每次都需要配置 webpack.config.js 檔案，用于配置我們項目的相關 loader 、plugin，這些操作比較複雜，但是它的重複性很高，而且在項目打包時又很有必要，那 React 腳手架就幫助我們做了這些，它不需要我們人為的去編寫 webpack 配置檔案，它将這些配置檔案全部都已經提前的配置好了。
據我猜測是直接輸入一行指令就能打包完成。
目前還沒有學習到哪，本文主要講腳手架的項目目錄結構以及安裝
3. 怎麼用 React 腳手架？
這也是這篇文章的重點，如何去安裝 React 腳手架，并且了解它其中的相關檔案作用
首先介紹如何安裝腳手架
1. 安裝 React 腳手架
首先確定安裝了 npm 和Node，版本不要太古老，具體是多少不大清楚，建議還是用 npm update 更新一下
然後打開 cmd 指令行工具，全局安裝 create-react-app
npm i create-react-app -g 然後可以建立一個檔案夾用于存放項目
在目前的檔案夾下執行
create-react-app hello-react 快速搭建項目
再在生成好的 hello-react 檔案夾中執行
npm start 啟動項目
接下來我們看看這些檔案都有什麼作用
2. 腳手架項目結構
hello-react
├─ .gitignore // 自動建立本地倉庫
├─ package.json // 相關配置檔案
├─ public // 公共資源
│ ├─ favicon.ico // 浏覽器頂部的icon圖示
│ ├─ index.html // 應用的 index.html入口
│ ├─ logo192.png // 在 manifest 中使用的logo圖
│ ├─ logo512.png // 同上
│ ├─ manifest.json // 應用加殼的配置檔案
│ └─ robots.txt // 爬蟲給協定檔案
├─ src // 源碼檔案夾
│ ├─ App.css // App元件的樣式
│ ├─ App.js // App元件
│ ├─ App.test.js // 用于給APP做測試
│ ├─ index.css // 樣式
│ ├─ index.js // 入口檔案
│ ├─ logo.svg // logo圖
│ ├─ reportWebVitals.js // 頁面性能分析檔案
│ └─ setupTests.js // 元件單元測試檔案
└─ yarn.lock 再介紹一下public目錄下的 index.html 檔案中的代碼意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html> 以上是删除代碼注釋後的全部代碼
第5行
指定浏覽器圖示的路徑，這裡直接采用 %PUBLIC_URL% 原因是 webpack 配置好了，它代表的意思就是 public 檔案夾
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 第6行
用于做移動端網頁适配
<meta name="viewport" content="width=device-width, initial-scale=1" /> 第七行
用于配置安卓手機浏覽器頂部顔色，相容性不大好
<meta name="theme-color" content="#000000" /> 第12行
蘋果手機觸摸版應用圖示
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 第13行
應用加殼時的配置檔案
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> ![Android網絡程式設計之使用HttpClient批量上傳檔案（一）1.預備知識：2.通過HttpCient上傳檔案程式運作效果圖：3.完成項目代碼：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)