姓名：王澤華；學(xué)號(hào)：22011211045野宜；學(xué)院：通信工程學(xué)院
原文鏈接：https://blog.csdn.net/m0_62118859/article/details/124292122
【嵌牛導(dǎo)讀】React 是最流行的前端框架之一。對(duì)比近兩年 Vue 和 Angular 的下載量魔策，還有 2021 年開發(fā)者使用的 web 框架的 比例 匈子，可以看到 React 是前端工程師應(yīng)該必備技能之一，現(xiàn)在很多大廠也在使用它闯袒。下面將具體介紹React的基本知識(shí)虎敦。
【嵌牛鼻子】React、腳手架
【嵌牛提問(wèn)】React是干什么的政敢？如何使用React其徙？
一、React 介紹
了解 react 的歷史背景和基本概念
React 起源于 Facebook 的內(nèi)部項(xiàng)目喷户。因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架唾那，都不滿意，就決定自己寫一套褪尝，用來(lái)架設(shè) Instagram 的網(wǎng)站闹获。做出來(lái)以后，發(fā)現(xiàn)這套東西很好用河哑，就在 2013 年 5 月開源了避诽。
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)≡致可以理解它只負(fù)責(zé) MVC 中的視圖層渲染茎用，不直接提供數(shù)據(jù)模型和控制器功能。react-router 實(shí)現(xiàn)路由睬罗，redux 實(shí)現(xiàn)狀態(tài)管理轨功，可以使用它們來(lái)構(gòu)建一個(gè)完整應(yīng)用。
React 中文站容达，React 官方中文文檔 – 用于構(gòu)建用戶界面的 JavaScript 庫(kù)
總結(jié)： React 是 Facebook 開源的古涧，現(xiàn)在它是最流行的前端框架大廠必備，React 本身是一個(gè)構(gòu)建 UI 的庫(kù)花盐，如果需要開發(fā)一個(gè)完整的 web 應(yīng)用需要配合 react-router羡滑，redux等。
二算芯、React 特點(diǎn)
了解 react 的三個(gè)核心特點(diǎn)
1.聲明式
React 使創(chuàng)建交互式 UI 變得輕而易舉柒昏。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖，當(dāng)數(shù)據(jù)變動(dòng)時(shí) React 能高效更新并渲染合適的組件熙揍。 以聲明式編寫 UI职祷，可以讓你的代碼更加可靠，且方便調(diào)試。
2.組件化
創(chuàng)建擁有各自狀態(tài)的組件有梆，再由這些組件構(gòu)成更加復(fù)雜的 UI是尖。 組件邏輯使用 JavaScript 編寫而非模版，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)泥耀，并使得狀態(tài)與 DOM 分離饺汹。
3.一次學(xué)習(xí)，跨平臺(tái)編寫
總結(jié)： 聲明式 UI 更清晰快捷痰催，組件化開發(fā)更靈活兜辞，可支持 SSR,SPA ,NativeApp,VR 多平臺(tái)。
三夸溶、React 腳手架
掌握使用 create-react-app 腳手架創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目方式：
? ? ? ?全局安裝腳手架再使用命令創(chuàng)建項(xiàng)目
? ? ? ?使用 npx 遠(yuǎn)程調(diào)用腳手架創(chuàng)建項(xiàng)目
方式 1
全局安裝
? ? ? ?# 全局安裝腳手架
? ? ? ?npm i create-react-app -g
創(chuàng)建項(xiàng)目
? ? ? ?# project-name 項(xiàng)目名稱
? ? ? ?create-react-app project-name
方式 2
npx 安裝弦疮，npm5.2+支持
? ? ? ? # project-name 項(xiàng)目名稱
? ? ? ? npx create-react-app project-name
推薦： 使用方式 2這樣每次使用的最新腳手架創(chuàng)建項(xiàng)目，創(chuàng)建完畢使用 npm start 啟動(dòng)項(xiàng)目蜘醋。
四、 React 基本使用
在 create-react-app 腳手架創(chuàng)建項(xiàng)目中咏尝，掌握使用 react 基本步驟
使用步驟：
? ? ? ?導(dǎo)入 react? react-dom 兩個(gè)包
? ? ? ?使用 react 創(chuàng)建 react 元素（虛擬 DOM）
? ? ? ?使用 react-dom 渲染 react 元素
落地代碼：src 內(nèi)文件刪除压语，創(chuàng)建src/index.js
導(dǎo)包
創(chuàng)建 react 元素
渲染 react 元素
總結(jié)： 使用 react 創(chuàng)建元素，使用 react-dom 渲染元素编检。
五胎食、React 創(chuàng)建元素練習(xí)
掌握使用 react 創(chuàng)建嵌套元素
練習(xí)題目：
? ? ? ?使用 react 創(chuàng)建如下元素
落地代碼：
總結(jié)： 使用 createElement 創(chuàng)建元素非常麻煩、可讀性差允懂、不優(yōu)雅厕怜，開發(fā)中推薦使用 JSX 來(lái)聲明 UI。
