一. React腳手架
1. 前端工程的復(fù)雜化
-
如果我們開(kāi)發(fā)的僅僅只是幾個(gè)小的demo, 那么永遠(yuǎn)不需要考慮一些復(fù)雜的問(wèn)題
復(fù)雜化.png - 模塊化開(kāi)發(fā), 被組成在成百上千個(gè)文件中, 相互依賴, 三方庫(kù)的依賴管理
- 為了解決上面這些問(wèn)題, 我們需要再去學(xué)習(xí)一些工具
- 比如babel(ES6 -> ES5)、webpack雇毫、gulp. 配置它們轉(zhuǎn)換規(guī)則、打包依賴、熱更新等等一些的內(nèi)容;
- 腳手架的出現(xiàn), 就是幫助我們解決這一系列問(wèn)題的;
2. 腳手架是什么呢?
-
傳統(tǒng)的腳手架指的是建筑學(xué)的一種結(jié)構(gòu): 在搭建樓房揪利、建筑物時(shí), 臨時(shí)搭建出來(lái)的一個(gè)框架;
真實(shí)的腳手架.png -
編程中提到的腳手架(Scaffold), 其實(shí)是一種工具, 幫我們可以快速生成項(xiàng)目的工程化結(jié)構(gòu);
編程中的腳手架.png
3. 前端腳手架
- 對(duì)于現(xiàn)在比較流行的三大框架都有屬于自己的腳手架;
- Vue的腳手架: vue-cli
- Angular的腳手架: angular-cli
- React的腳手架: create-react-app
- 他們的作用都是幫助我們生成一個(gè)通用的目錄結(jié)構(gòu), 并且已經(jīng)將我們所需的工程環(huán)境配置好.
- 使用這些腳手架需要依賴什么呢?
- 目前這些腳手架都是使用node編寫(xiě)的, 并且都是基于webpack的;
- 所以我們必須在自己的電腦上安裝node環(huán)境;
- 這里我們主要學(xué)習(xí)React, 所以我們還是以React的腳手架工具: create-react-app作為講解;
4. 安裝node
- React腳手架本身需要依賴node, 所以我們需要安裝node環(huán)境;
LTS(長(zhǎng)期支持維護(hù)的版本)官網(wǎng) -
無(wú)論是windows還是Mac OS, 都可以通過(guò)直接下載;
node官網(wǎng)
-
驗(yàn)證命令.png
- Node -npm 包管理工具
npm: node packages managet - 已經(jīng)幫助安裝好npm工具
5. 包管理工具
什么是npm?
- 全稱Node Package Manager, 即"node包管理器";
- 作用肯定是幫助我們管理一下依賴的工具包(比如react武学、react-deom庸毫、axios、babel南誊、webpack等等);
- 作者開(kāi)發(fā)的目的就是為了解決"模塊管理很糟糕"的問(wèn)題
-
另外, 還有一個(gè)大名鼎鼎的node包管理工具yarn:
Yarn.png yarn --version
6. Yarn和npm命令對(duì)比
命令對(duì)比.png
7. 安裝腳手架
- 再介紹一個(gè)工具 cnpm, 國(guó)內(nèi)用, 特殊的環(huán)境, 鏡像設(shè)置成taobao
npm install -g cnpm --registry=https://registry.npm.taobao.org- 最后一個(gè)需要安裝的是創(chuàng)建React項(xiàng)目的腳手架:
npm install -g create-react-app
create-react-app --version
- 安裝nodejs
- npm yarn cnpm
- create-react-app
8. 創(chuàng)建React項(xiàng)目
- 現(xiàn)在, 我們就可以通過(guò)腳手架來(lái)創(chuàng)建React項(xiàng)目了.
- 創(chuàng)建React項(xiàng)目的命令如下:
- 注意: 項(xiàng)目名稱不能包含大寫(xiě)字母
- 另外還有更多創(chuàng)建項(xiàng)目的方式, 可以參考GitHub的readme
create-react-app 項(xiàng)目名稱
- 另外還有更多創(chuàng)建項(xiàng)目的方式, 可以參考GitHub的readme
- 創(chuàng)建完成后, 進(jìn)入對(duì)應(yīng)的目錄, 就可以將項(xiàng)目跑起來(lái):
cd 01-test-react
yarn start
自動(dòng)打開(kāi)瀏覽器進(jìn)入網(wǎng)頁(yè)
localhost:3000
初始樣子.png
9. 目錄結(jié)構(gòu)分析
目錄結(jié)構(gòu).png
- node_modules里面有很多東西
-
yarn add axios把庫(kù)的依賴下載到本地node_modules, 不會(huì)手動(dòng)管理它
目錄.png - .gitignore 源代碼管理工具, git, 當(dāng)前代碼共享push到代碼倉(cāng)庫(kù), 有些東西不需要共享, 如node_modules, 配置信息不需要共享, 在gitignore里面做一個(gè)配置
-
package.json, 非常重要的文件, 關(guān)于整個(gè)項(xiàng)目管理的配置文件, yarn start 本質(zhì)上是執(zhí)行 scripts中的腳本
package.json.png - README.md 項(xiàng)目的描述, markdown的格式
- yarn.lock 記錄著真實(shí)的版本依賴, 解決一些版本混亂的問(wèn)題, ^表示當(dāng)前依賴的版本可以進(jìn)行小版本的迭代, 小版本更新可以更新, 這樣做會(huì)產(chǎn)生一個(gè)弊端, 早期沒(méi)有l(wèi)ock文件, npm5開(kāi)始有的, 一般很少手動(dòng)修改
另外兩個(gè)文件夾
- public文件夾
- favicon.icon, React圖標(biāo)
- index.html 每一個(gè)項(xiàng)目的入口
- log192.png log512.png 圖片
- mianifest.json文件
- robots.txt 設(shè)置爬蟲(chóng)規(guī)則, 哪些可以哪些不可以爬
- scr文件夾
- 之后寫(xiě)源代碼的文件, 以后寫(xiě)的react代碼都是在里面的
- App.css, App.js 函數(shù)式組件, 熱更新
- App.test.js 測(cè)試用例, index.css 全局樣式, index.js React入口, log.svg 旋轉(zhuǎn)的圖片 svg畫(huà)出來(lái)的, setupTests.js 初始化操作
- mianifest.json
10. 了解PWA
- 整個(gè)目錄結(jié)構(gòu)都非常好理解, 只是有一個(gè)PWA相關(guān)的概念:
- PWA全稱Progressive Web App, 即漸進(jìn)式WEB應(yīng)用;
- 一個(gè)PWA應(yīng)用首先是一個(gè)網(wǎng)頁(yè), 可以通過(guò)Web技術(shù)編寫(xiě)出一個(gè)網(wǎng)頁(yè)應(yīng)用;
- 隨后添加上App Manifest和Service Worker來(lái)實(shí)現(xiàn)PWA的安裝和離線等功能;
- 這種Web存在的形式, 我們也稱之為是Web App;
- PWA解決了哪些問(wèn)題呢?
- 可以添加至主屏幕, 點(diǎn)擊主屏幕圖標(biāo)可以實(shí)現(xiàn)啟動(dòng)動(dòng)畫(huà)以及隱藏地址欄;
- 實(shí)現(xiàn)離線緩存功能, 即使用戶手機(jī)沒(méi)有網(wǎng)絡(luò), 依然可以使用一些離線功能;
- 實(shí)現(xiàn)了消息推送;
- 等等一系列類似于Native App的功能;
- index.js中調(diào)用Service Worker里面的東西
-
不需要的話, 可以刪掉
image.png - 路徑里最好不要有中文
11. webpack是什么?
- 我們說(shuō)過(guò)React的腳手架是基于Webpack來(lái)配置的:
- webpack是一個(gè)現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器(module bundler);
-
當(dāng)webpack處理應(yīng)用程序時(shí), 他會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph), 其中包含應(yīng)用程序需要的每個(gè)模塊, 然后將所有這些模塊打包成一個(gè)或多個(gè)bundle;
webpack.png
-
12. 腳手架中的webpack
- 目錄結(jié)構(gòu)里面沒(méi)有看到webpack的配置
- 原因是React腳手架將webpack相關(guān)的配置隱藏起來(lái)了(其實(shí)從Vue CLI3開(kāi)始, 也是進(jìn)行了隱藏);
-
yarn eject這個(gè)操作是不可逆的, 默認(rèn)不希望暴露或者修改
webpack顯示.png
-
- 腳手架創(chuàng)建的項(xiàng)目, 讓文件夾變得非常的大, 課件文件縮小, 為什么變大? node_modules里面有特別多的文件146M, 以后給的課件, 沒(méi)有node_modules文件夾, yarn start直接跑是跑不起來(lái)的, 要先執(zhí)行
yarn install, 把需要安裝的依賴進(jìn)行安裝, 生成一個(gè)node_modules文件夾
二. 開(kāi)始用腳手架寫(xiě)一個(gè)項(xiàng)目
- src中的文件夾中所有的文件全部刪除
-
public中的不用的文件刪除
刪除操作.png -
這是yarn start, 報(bào)錯(cuò), 腳本管理webpack, webpack找入口, src下面的index.js, 必須包含這個(gè)文件.
報(bào)錯(cuò).png - 界面上一片空白, React代碼, 在界面上渲染內(nèi)容.
- common js的語(yǔ)法, module.exports = require
- 想用必須做一個(gè)導(dǎo)入
import React from "react";
import ReactDOM from "react-dom";
//是否加default
import {sum} from './utils';
import {sum, mul} from './utils';
ReactDOM.render(<h2>Hello React</h2>, document.getElementById("root"));
-
每一個(gè)小功能放到一個(gè)單獨(dú)的模塊里面
結(jié)構(gòu).png
推薦書(shū)籍: 你不知道的JavaScript - 人民郵電出版社
- 開(kāi)源的書(shū)
鏈接：https://pan.baidu.com/s/1pfviFDVDg7EpF35HQWEc6Q 密碼：vaft
你不知道的JavaScript.png
coderwhy的React核心技術(shù)與開(kāi)發(fā)實(shí)戰(zhàn)課程鏈接
少年~來(lái)做同學(xué)呀~.png
