1. React腳手架
1.1 react 腳手架的理解
腳手架: 用來幫助程序員快速創(chuàng)建一個模板項(xiàng)目,包含了所有需要的依賴配置,和工程配置
react 提供了一個用于創(chuàng)建react項(xiàng)目的腳手架庫
create-react-app項(xiàng)目的整體技術(shù)架構(gòu): react + webpack + es6 + eslint
-
使用腳手架開發(fā)項(xiàng)目的特點(diǎn): 模塊化,組件化,工程化
工程化: 就是通過一個命令 就能將項(xiàng)目打包編譯
1.2 使用create-react-app 創(chuàng)建基于腳手架的react運(yùn)用
-
全局安裝
npm install create-react-app -g -
創(chuàng)建項(xiàng)目
create-react-app hello
也可以使用npx命令進(jìn)行安裝
$ npx create-react-app myreact
2. 工程目錄
2.1 工程目錄了解
|-- node_modules // 工程所依賴的包目錄
|-- public // 靜態(tài)資源目錄
--| index.html // 項(xiàng)目主頁面
--| favico.io // 項(xiàng)目圖標(biāo)
--| mainifest.json // 移動端配置文件
|-- src // 項(xiàng)目開發(fā)目錄, 內(nèi)部的代碼會被webpack編譯
--| index.js // 應(yīng)用的入口文件
--| App.js // 應(yīng)用的根組件
--| index.css // index.js入口模塊里的CSS
--| App.css // APP組件的樣式文件
|-- .gitignore // git管理忽略文件
|-- package.json // 應(yīng)用描述文件
|-- README.md // 應(yīng)用說明文件
2.2 package.json
作用(當(dāng)前項(xiàng)目的描述文件)
- 標(biāo)識, 標(biāo)記當(dāng)前項(xiàng)目信息(name, version)
- 依賴, 當(dāng)前項(xiàng)目所有需要依賴的包(dependencies,運(yùn)行依賴, devDependencies開發(fā)依賴)
- 打包/運(yùn)行, 項(xiàng)目打包運(yùn)行的命令(script ,腳本命令,通過 npm run .. 來運(yùn)行)
3. 腳手架的腳本命令
-
yarn start: 啟動一個開發(fā)環(huán)境下的應(yīng)用服務(wù)器, 方便開發(fā)調(diào)試 -
yarn build: 用于構(gòu)建發(fā)布項(xiàng)目的命令 -
yarn test: 用于測試代碼,一般不推薦使用 -
yarn eject反編譯當(dāng)前項(xiàng)目, 獲取webpack控制權(quán), 一但使用就回不去為了,一般不推薦使用
