React.js — 第01天

尤其當你是0基礎開始探索程式之路...

Zero to Mastery — Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL)

https://zerotomastery.io/courses/learn-react/

為何是 React?

在傳統前端(JS, CSS, HTML), 使用jQuery(是相當實用的Javascript函式庫--library)，用來改善DOM API，讓你更容易在自己的網站使用Javascript。

但jQuery將HTML和JS分開，導致專案若變得複雜會更難管理。

React也是Javascript函式庫

超好用組件(COMPONENT) 和 狀態(STATE)來也.

組件Components

• Material UI(MUI5)

可重複利用，簡單，快速。

虛擬文件物件模型(Virtual DOM)

Document Object Model，縮寫DOM

提供文件的結構表示法，樹狀圖。

改變DOM通常會耗去許多效能，是非常昂貴的成本。

React.js使用虛擬DOM省去許多支出成本，讓整體效能提升。

更多說明| Here is DOC

單向資料流(One Way Data Flow)

資料綁定(data-binding)，資料端與UI端之間會透過事件的綁定，一端有變動，另一端會跟著更新。

React 提供state跟props去做狀態的管理與屬性的傳遞

更多說明| Here it is

最後回顧 / 今日關鍵字

• 宣告式Declarative--相當於資料即畫面
• JSX
• Props
• Components
• State
• Virtual DOM

React 開發者的工作

• 決定組件(Components)
• 決定state 和它該在哪
• 決定當state改變，什麼會跟著改變