You will learn
- 為什麼React混合標記與渲染邏輯
- JSX與HTML有何不同
- 如何使用JSX顯示資訊
Q1: JSX 是什麼?
- JSX是JavaScript的語法擴充。
- JSX 外觀結構看似 HTML,但實質上並不是 HTML 語法,而是 React 中一個特殊的語法糖,讓開發者能使用熟悉的 HTML 寫法來開發專案。
原本HTML、CSS、JS 3個檔分別放內容、樣式、邏輯。
但因為網頁互動增加,JS掌控HTML。
因此,在React中,把渲染邏輯和標記放在同個地方,一個元件中。
<mark> You will learn - * 為什麼React混合標記與渲染邏輯 </mark>
e.g.: 按鈕的渲染邏輯和標記 保持放在一起
=> 好處 1: 確保在每次編輯時保持同步。
=> 好處 2: 元件間彼此分開,按鈕的markup和側邊欄的markup,更改時不會彼此被影響。
JSX與HTML有何不同
<mark> You will learn - * JSX與HTML有何不同 </mark>
- 每個 React 元件都是一個 JavaScript 函式,可能包含一些標記,React 將其渲染到瀏覽器中
- React 組件使用名為 JSX 的語法擴展來表示標記。
- JSX 看起來很像 HTML,但JSX 更嚴格且可以動態呈現資訊。
注意 JSX 和 REACT 是不同的事
通常在一起使用,但可以個別獨立使用。
JSX 是 JavaScript的語法擴充,然而 React 是JavaScript的框架。
瀏覽器不能直接理解 JSX
因此大多數 React 使用者依賴 編譯器compiler ,如 Babel 或 TypeScript,
將 JSX code 轉換為 regular JavaScript。
許多預配置的工具套件,如 Create React App 或 Next.js,在內部也有 JSX 轉換。
編譯器 compiler - 一次解析完所有的程式碼,並產出特定格式的檔案後,才能執行。
直譯器 interpreter - 當每行程式碼解析完後就立刻執行。
Q2: JSX 使用上的 3 項規則
<mark> You will learn - * 如何使用JSX顯示資訊 </mark>
- 只會回傳一個根元素
- 嚴格標籤閉合
- 命名 HTML 屬性 (attribute)時,使用 camelCase 來命名。
- Pro-tip: Use a JSX Converter
理解每一項規則的限制及原因,確保自己能在使用 JSX 時遵守這三個使用規則。
1. 只會回傳一個根元素
一個元件 return 多個元素(element)時,要以 single parent tag 把多個元素包起來。
可以是<div>...</div>
或 <>... </>
(稱為 Fragment)
DEEP DIVE - Q: 為什麼多個元素(element),需要以 single parent tag 包覆?
A: JSX看似HTML,但底層轉換為 plain JavaScript Object。
一個函式若沒有把 2 objects 包成一個陣列,是無法return 2 objects。
因此,要return 多個 JSX,就要以 single parent tag 將多個 JSX 包起來。
2. 嚴格標籤閉合
JSX要求標籤必須明確地關閉
- self-closing tags :
<img>
=><img />
- wrapping tags :
<li>oranges</li>
3. 用camelCase來命名大部分的東西!
- JSX 會轉換成 JavaScript,而 在 JSX 中寫的attribute屬性 會變成=> JavaScript 物件的鍵。
- 在元件中,通常會想將這些 attribute屬性 讀入變數中。??
- 但 JavaScript 對變數名稱有限制
- 1 變數名稱 不能包含 "-"
- 2 不能是保留字reserved word,例如 class。
Pitfall
aria-*
和data-*
屬性,例外,如同在HTML中使用。
因此在 React 中,許多 HTML 和 SVG 屬性都使用駝峰式命名法。
e.g.:使用 strokeWidth 而不是 stroke-width。
由於 class 是一個保留字,在 React 中需要寫成 className,其名稱與對應的 DOM 屬性相同:
- 在 DOM 元件屬性列表中可以找到所有這些屬性。
Q3: 如何將 HTML 轉換為 JSX,並能看懂 error messages 中的語法錯誤建議
JSX tag 屬性 => camelCase
JSX tag 閉合
return 多個JSX 需要single parent tag(<div>...</div>
或<>...</>
)
Exit Tickets
Q4: JSX 語法與 HTML 語法兩者的關係是什麼?
- JSX 是JS的語法擴充,實質是JS的物件。
- JSX 和 HTML 看起來相似,但比HTML嚴謹許多,也有使用上的規則限制。
Q5: JSX 語法糖在經過轉換後的本質是什麼?
- JSX 轉換後為 JS的物件。
- JSX tag 的屬性attribute 轉換為 JS物件的鍵key
Q6:為什麼 HTML 中的 class 屬性在 React element 中的對照 prop 會改名為 className ?
因為 JSX tag 的屬性attribute 轉換為 JS物件的鍵key,
屬性會傳入變數中使用。
JS對變數名稱有限制,不可有-(dash)、不可有保留字(reserved word)
因此 React 中的屬性以camelCase命名。
HTML 的 class屬性,屬性名稱為保留字,所以在React中改為className。