React 腳手架

create-react-app 腳手架

與vue-cli一樣，create-react-app是react的一款腳手架。

 內置很多功能，讓我們可以直接進入開發。

安裝指令

npm i -g creact-react-app

安裝完畢，提供了create-react-app指令

創建項目

create-react-app 項目名稱

此時鏈接網絡就可以下載項目了。

create-react-app創建的項目也是通過yarn來管理和維護的，安裝模塊用yarn安裝。

例如：yarn add react-router react-router-dom redux react-redux

yarn add指令功能與npm install指令是一樣的

目錄部署

可隨意定義

 

node_modules 依賴模塊

public 靜態目錄

favicon.ico：logo

index.html：模板入口文件

manifest.json：離線緩存配置

src 開發目錄

App.css：應用程序樣式

App.js：應用程序腳本

App.test.js：應用程序單元測試

index.css：全局樣式

logo.svg：eact的logo

registreServiceWorker.js：web workers

.gitignore git 配置

package.json npm 包配置

README.md 介紹文件

yarn.lock yarn鎖文件

指令

 create-react-app創建的項目提供了一些指令：

start 啟動項目，默認端口號是3000

build 發布項目，默認發布到build目錄下

test 單元測試

eject 輸入webpack配置

可以自定義靜態資源發布，模板資源發布等位置

yarn eject

 

這些指令既可以使用yarn來啟動，也可以使用npm來啟動。

PWA 應用

PWA應用是一個漸進式的web應用，介於源生app與網站頁面之間的一個應用。

其中

manifest.json就是離線緩存的文件

registreServiceWorker.js也是為pwa應用提供的web worker文件。

在瀏覽器中，點擊“創建快捷方式”就可以在桌面上，創建一個離線應用。