創(chuàng)建React項目
? 創(chuàng)建React項目的命令如下：
? ? 注意：項目名稱不能包含大寫字母
? ? 另外還有更多創(chuàng)建項目的方式，可以參考GitHub的readme
命令：
create-react-app 你的項目名稱
? 創(chuàng)建完成后，進入對應的目錄，就可以將項目跑起來：
yarn start
目錄結構分析
? 我們可以通過VSCode打開項目：
test-react
├─ README.md // readme說明文檔
├─ package.json // 對整個應用程序的描述：包括應用名稱、版本號、一些依賴包、以及項目的啟動、打包等等（node管理項目必備文件）
├─ public
│ ├─ favicon.ico // 應用程序頂部的icon圖標
│ ├─ index.html // 應用的index.html入口文件
│ ├─ logo192.png // 被在manifest.json中使用
│ ├─ logo512.png // 被在manifest.json中使用
│ ├─ manifest.json // 和Web app配置相關
│ └─ robots.txt // 指定搜索引擎可以或者無法爬取哪些文件
├─ src
│ ├─ App.css // App組件相關的樣式
│ ├─ App.js // App組件的代碼文件
│ ├─ App.test.js // App組件的測試代碼文件
│ ├─ index.css // 全局的樣式文件
│ ├─ index.js // 整個應用程序的入口文件
│ ├─ logo.svg // 剛才啟動項目，所看到的React圖標
│ ├─ serviceWorker.js // 默認幫助我們寫好的注冊PWA相關的代碼
│ └─ setupTests.js // 測試初始化文件
└─ yarn.lock
注意 serviceWorker.js在最新的 “react”: "^18.2.0"版本中，沒有配置，需要手動添加?。。?！
了解PWA
? 整個目錄結構都非常好理解，只是有一個PWA相關的概念：
? ? PWA全稱Progressive Web App，即漸進式WEB應用；
? ? 一個 PWA 應用首先是一個網頁, 可以通過 Web 技術編寫出一個網頁應用；
? ? 隨后添加上 App Manifest 和 Service Worker 來實現 PWA 的安裝和離線等功能；
? ? 這種Web存在的形式，我們也稱之為是 Web App；
? PWA解決了哪些問題呢？
? ? 可以添加至主屏幕，點擊主屏幕圖標可以實現啟動動畫以及隱藏地址欄；
? ? 實現離線緩存功能，即使用戶手機沒有網絡，依然可以使用一些離線功能；
? ? 實現了消息推送；
? ? 等等一系列類似于Native App相關的功能；
? 更多PWA相關的知識，可以自行去學習更多；
? ? https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
腳手架中的webpack
? React腳手架默認是基于Webpack來開發(fā)的；
? 沒有在目錄結構中看到任何webpack相關的內容？
? ? 原因是React腳手架將webpack相關的配置隱藏起來了（其實從Vue CLI3開始，也是進行了隱藏）；
? 如果我們希望看到webpack的配置信息？
? ? 我們可以執(zhí)行一個package.json文件中的一個腳本："eject": "react-scripts eject"
? ? 這個操作是不可逆的，所以在執(zhí)行過程中會給與我們提示；
? yarn eject
文章來源：http://www.zghlxwxcb.cn/news/detail-805821.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-805821.html
到了這里，關于【React】腳手架創(chuàng)建項目的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
