起源發(fā)展

• 起源于Facebook的內(nèi)部項(xiàng)目
• 2013年5月開源

與傳統(tǒng)MVC關(guān)系

• 輕量級的視圖層庫
• react不是完整的MVC框架，可以認(rèn)為是MVC中的V就是view

特性

1. 聲明式設(shè)計(jì)
2. 高效，虛擬dom見到了與dom的交互
3. 靈活，可以與其他庫或框架配合
4. JSX，JavaScript 語法的擴(kuò)展
5. 組件，react構(gòu)建組件可以使代碼更容易復(fù)用，更好地用在大項(xiàng)目中
6. 單向響應(yīng)數(shù)據(jù)流，減少了重復(fù)代碼

開始

create-react-app

$ npm install -g cteate-react-app

創(chuàng)建項(xiàng)目

$ cteate-react-app your-app  // 注意命名方式

不想全局安裝，可以使用npx

• 好處：
  1. 將上面兩步合二為一
  2. 直接安裝最新版本create-react-app
• 缺點(diǎn)：
  • 時間較長

安裝內(nèi)容

• react：react 的頂級庫
• react-dom：react有很多運(yùn)行環(huán)境，app端的react-native，web端的react-dom
• react-scripts：包含運(yùn)行和打包react應(yīng)用程序的所有腳本和配置

各個項(xiàng)目文件結(jié)構(gòu)作用

• README.md 項(xiàng)目介紹
• package.json npm包配置文件，里面定義了項(xiàng)目的npm腳本，依賴包等信息
• package-lock 上線鎖定版本信息
• gitignore 這個是git的選擇性上傳的配置文件
• src 源碼目錄 這個目錄里邊放的是我們開放的源代碼
  • index.js 項(xiàng)目的入口文件
• public 公共文件，里邊有公用模板和圖標(biāo)等一些東西
  • index.html : 首頁的文件
  • favicon.ico : 網(wǎng)站或者項(xiàng)目的圖標(biāo)
  • mainifest.json ：移動端配置文件

成功創(chuàng)建標(biāo)識

image.png

npm安裝失敗

• 切換淘寶鏡像
  1. npm instrall nrm
  2. nrm ls
  3. nrm use taobao
• 刪除node_modules及package-lock.json 然后重新執(zhí)行npm install 命令
• 刪除node_modules及package-lock.json 的并清除npm緩存 npm cache clean --force 之后再執(zhí)行 npm install 命令

命令

啟動項(xiàng)目：
npm start

打包項(xiàng)目：
npm run build