在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式，今天就會來介紹什麼是 JSX，並且他跟一般的 Html tag 有什麼差別。

JSX: 把架構變成 JavaScript

首先要先從一個網頁的組成開始說，通常都會有三大元素：組成網站架構的 Html, 給予網站外觀的 CSS 以及讓網頁動起來的 JavaScript。而這三個因素會分別寫在不同檔案（.html, .css, .js）裡面，但隨著網頁技術不斷更新，JavaScript 的使用程度越來越多，而最後 React 使用的方案就是把這些都混在一起形成一個 Component，並且都用 JavaScript 來控制，所以也就需要 JSX 的幫忙。
文章中也舉 Sidebar 跟 Form 當例子，在 React 裡面這兩個都能當作獨立的 Component，並且在自己的裡面有相關的架構（JSX）邏輯（JavaScript）與外觀（CSS）。

另外要比較注意的是，JSX 跟 React 是兩個獨立的東西，只是 React 通常都使用 JSX 來當作他刻出 UI 的語法，但其實兩個是可以完全分開使用的。

JSX 與 Html tag 差異

接下來介紹 JSX 跟 Html tag 差別，第一個是 JSX 有更嚴謹的規則，這邊整理一下：

1. JSX 會一定要有個 Parent tag 把其他 tag 包起來，像是：

function MyComponent() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is LiHsuan</p>
    </div>
  )
}

如果把 div 拿掉的話，就會噴出錯誤訊息，如果真的想不用另一個 Parent tag 包起來，就會需要使用到 Fragment，一個像是空的 tag <></> 來把剩下的 JSX 包起來。例：

function MyComponent() {
  // Error!
  return (
    <h1>Hello World!</h1>
    <p>This is LiHsuan</p>
  )
  // Correct
  return (
    <>
      <h1>Hello World!</h1>
      <p>This is LiHsuan</p>
    </>
  )
}

會一定要包起來的原因是，JSX 本質上是一個 JavaScript Object，所以在 return 的時候如果是在沒有 Parent tag 的情況下，就會被判定為兩個沒被包在一起的 Object 導致無法順利 return。
像是這段 JSX <h1>Hello World!</h1> 就等於：

  // JSX: <h1>Hello World!</h1>
  {
    type: "h1",
    props: {
      children: "Hello World"
    }
  }

如果包含其他 tags 的話 children 就會變成 Array

2. 幾乎所有 tag 的 attribute 需使用 camalCase 命名

因為 JSX 會變成 JavaScript Object，而我們在平常設計 html 的時候會在上面附加一些 attribute 像是 class，而在 JSX 就會變成 Object 裡的 props，但有鑒於 JSX 不是 Html，而且有先名字的使用在 JavaScript 裡已經被限制或佔用，所以就會需要其他命名，來轉換進 Object 裡面像是 class 就會變成 className。另一個原因是在 JavaScript 的命名裡，都習慣使用 camalCase 的命名，所以在 JSX 的 attribute 命名就會一樣使用 camalCase。
當然還是有些許例外，可以在：
https://zh-hant.react.dev/reference/react-dom/components/common
裡得到更多資訊。

小結

這次的文章介紹了 JSX 這個語法，但其實裡面還有很多細節，有機會一樣會在之後的文章中提到。今天提出到了 JSX 會變成 JavaScript Object 這個概念，其實 React 很多時候都是回傳 Object 而有很多應用，陸陸續續會提到更多概念。
以上就是這次文章的內容，如果有任何問題與建議歡迎讓我知道，感謝大家耐心地看完，我們下篇文章見，晚安。