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>

  1. 每個 React 元件都是一個 JavaScript 函式,可能包含一些標記,React 將其渲染到瀏覽器中
  2. React 組件使用名為 JSX 的語法擴展來表示標記
  3. 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>

  1. 只會回傳一個根元素
  2. 嚴格標籤閉合
  3. 命名 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 屬性相同:


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。


#JSX #render logic & markup #single parent tag #<div>...</div> #<>... </> Fragment #嚴格標籤閉合 #只會回傳一個根元素 #編譯器compiler #JSX attribute name - camelCase #JSX attribute name - NO dash NO reserved word







Related Posts

W11_作業二實作_陽春部落格

W11_作業二實作_陽春部落格

讓WebStorm識別alias

讓WebStorm識別alias

Vatic 安裝教學

Vatic 安裝教學


Comments