☁️ 開場

這篇筆記主要整理自：官方文件 Writing Markup with JSX

🌟 什麼是 JSX？

JSX 是一種 JS 的 syntax extension(語法擴充)，讓我們可以在 JS 檔案中寫下「很像 HTML」的 markup，比 HTML 更嚴謹一點，而且可以呈現動態的資訊（：超讚xd）

☄️ 為何用 JSX？

其實有很多撰寫元件的寫法，之所以選擇 JSX 除了長得真的很像 HTML 容易上手，還有現階段大部分的開發者都使用它，溝通上比較容易

為何 React 要把 markup 寫進 JS？

一、未使用 React

⬇️ 網頁內容、邏輯分開在不同檔案 (圖片取自官方文件）

二、使用 React
現代網頁互動性提高，邏輯影響內容的成分也跟著提高，當我們讓網頁內容與邏輯寫在同一個元件，可以讓元件中的內容與邏輯保持同步，且元件間彼此較不容易互相干擾，更易於維護

⬇️ 網頁內容、邏輯寫在同一個元件（藍色是 JSX） (圖片取自官方文件）

⚡️ JSX 的撰寫規則

一、記得「關門」(A.K.A. close)

• 本身是 self-closing 的元素要記得加一個 slash /

  • 舉例： <img> ➡️ <img />

• 本身就包含 closing 標籤的元素就記得一定要寫完整！

  • 舉例 <li>oranges ➡️ <li>oranges</li>

二、使用 camelCase、避免使用 Reserved-word

原因：
JSX 會被轉譯成 JS，而 attribute 會變成 Object 裡的 key。JS 本身對變數的命名就有「不能用 dash、保留字」的規則。(上述的 attribute 事實上在 JSX 中，「prop」 才是比較正確的稱呼)

舉例：

• 之前寫 HTML 是用 kebab-case 的字，在撰寫 JSX 時要改成 camelCase
  • 用 JSX 寫 inline style 的時候，border-radius ➡️ borderRadius
• 避免使用 JS 保留字
  • class 是保留字，class ➡️ className
  • for 是保留字，for ➡️ htmlFor

特例：

• 文件表示因為一些歷史因素aria-*和data-* attributes 就寫得和 HTML 時的寫法一樣就好

三、元件只能回傳 a single root element

意思是如果有太多同層級的元素要回傳，請用<div></div>或<></>Fragment element 或其他標籤包住

原因：
JSX 雖然長得很像 HTML，但實際上它會先被轉譯成 JS Object，所以按照這樣的思考，我們不可能在一個函式同時回傳沒有被包在一起的兩個物件，所以我們把超過兩個以上的同層級元素，透過其他標籤包成首層只有一個元素回傳，就像是指回傳一個物件，是可行的！

建議：
真的遇到需要包裝的狀況，推薦使用 Fragment element <></>，因為它不會在「Browser 的 HTML tree」留下痕跡

🪄 JSX 經過轉譯後的本質

⬇️ 以下圖片截圖自 Udemy - Modern React with Redux [2023 Update]，加上自己的筆記

• JSX 轉譯過後在 JS 看起來其實是使用了 React.createElement
• 補充：React.createElement 第二個參數是擺入 Object 或 null 形式的資料，代表 props (用 key/value 的方式呈現)

💃🏻 總結

以下為官方文件的 Recap，不做翻譯，只畫重點

• React components group rendering logic together with markup because they are related.
• JSX is similar to HTML, with a few differences. You can use a converter if you need to.
• Error messages will often point you in the right direction to fixing your markup.

👍 相關好文

• [Day 07] JSX 根本就不是在 JavaScript 中寫 HTML
• [Day 08] JSX 的重要特性與規則以及其背後緣由

以上，有任何想法或文內有誤、不清楚歡迎提出，謝謝大家 🙏🏻
.
筆者小記：我愛 JSX！