☁️ 開場

這篇筆記主要整理自：官方文件 JavaScript in JSX with Curly Braces

🖋 如何在 JSX 寫 JS？

把要寫 JS 的地方用大括號 {} 包住！

一、大括號內可以放什麼？ (What)

文件說：「Curly braces mean we are about to reference a JS variable or expression」，所以在 {} 中我們可以放：

1. variable 變數

舉例

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

2. expression 表達式（可以回傳一個值的 code）

舉例：以下畫面就畫出現「Sum: 7」

export default function Sum() {
  function sum(a, b) {
    return a + b
  }

  return (
    <h1>Sum: {sum(3, 4)}</h1>
  );
}

更多舉例：⬇️ 以下圖片截圖自 Udemy - Modern React with Redux [2023 Update]

二、JSX 哪裡可以使用大括號？ (Where)

1. content: 指在 JSX tag 裡的文字

舉例：以下大括號被使用在 <h1> 的 tag 裡

export default function Title() {
  const name = "Kim"

  return (
    <h1>{name}'s TodoList</h1>
  );
}

⚠️ 注意：有些型別的值不會如我們所預期的顯示

• Boolean, null, undefined 不會顯示
• Array 會「拿掉中括號、逗號」把所有值合併在一起顯示
• Object 會噴 error

2. props value

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

⚠️ 注意：不需要寫成src="{avatar}"，這樣代表的是要擺入{avatar}的字串
⚠️ 當 props value 為字串型別時，按照道理也可以寫成這樣alt={"string"}，但通常（我自己）都會直接省略大括號alt="string"

💬 關於寫在 JSX 的 Object

初次在 JSX 撰寫 Object 還滿容易搞混的，就留意外層的大括號是為了讓 JS 可以寫在 JSX 中，而內層的大括號是 Object 本身就有的，常見的情境會發生在 inline CSS styles：留意 style props 為帶入 Object！

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Check email</li>
      <li>Buy tissue</li>
    </ul>
  );
}

inline CSS styles 在 JSX 的撰寫規則

• style props 要用 Object 的形式寫入
• 原撰寫 CSS 的 property/value 對應 style 物件的 key/value，留意名字要從原先的 Kebab-case 改為 camelCase（遵循 JS object 的規定，所以逗號也要記得放）（範例可參考上方的 code block）
• 只能輸入該元素可以使用的 CSS style

🤔 尚待釐清

由於自己目前不太常會在 React 使用到 inline CSS styles，又恰巧看到有人分享不能在裡面使用 pseudo class/element，我自己在還沒有多方查清的狀態下不敢肯定（礙於現階段的規劃，暫時就沒有再去深挖），但有找到別人分享可以做出 ::after 這類偽元素的寫法，先一併分享在此，未來有遇到此狀況會持續探索相關知識，也歡迎有相關經驗或知識的前輩留言分享交流:)
➡️ CSS pseudo elements in React

💃🏻 總結

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

• JSX attributes inside quotes are passed as strings.
• Curly braces let you bring JavaScript logic and variables into your markup.
  • They work inside the JSX tag content or immediately after = in attributes.
• {{ and }} is not special syntax: it’s a JavaScript object tucked inside JSX curly braces.

以上，有任何想法或文內有誤、不清楚歡迎提出，謝謝大家 🙏🏻
.
筆者小記：很難不愛 JSX！
.
前陣子剛好遇到 Bootcamp 正在開發相較以往大型的專案，每天都在努力開發，所以就停更 React 筆記一陣子，之後會繼續努力產出的！在此也附上完成該專案的反思心得文，以茲證明（？）