1. JSX 中 HTML 標籤必須自閉合
HTML 中 input 是 void element，本來不需要閉合標籤。
// ✅ 正確 <input type="text" /> // ❌ 錯誤 <input type="text" > // JSX 會報錯
-----
2. class 要改寫成 className
JSX 是 JavaScript，不允許使用 JS 關鍵字 class。
// ✅ 正確 <div className="box" /> // ❌ 錯誤 <div class="box" /> // React 不認得
-----
3. for 要改寫成 htmlFor
表單 label 的 for 在 JSX 中是保留字，要改成 htmlFor：
<label htmlFor="email">Email</label>
-----
4. JS 表達式要放在 {} 裡
Vue.js template 則使用是雙括號 {{}}
const name = "Annie";
// ✅ 正確
<p>Hello, {name}</p>
<h1>{name.toUpperCase()}</h1>
// ❌ 錯誤
<p>Hello, {{name}}</p>
-----
5. style 需用物件寫法，且值要加引號或轉成 string
style 物件的 key 是 camelCase（如: fontSize），不同於 HTML/CSS 的 kebab-case（如: font-size）
// ✅ 正確
<div style={{ color: 'red', fontSize: '16px' }} />
// ❌ 錯誤
<div style="color: red; font-size: 16px;" /> // HTML 寫法不支援
雙括號讓解讀困難，因此也把物件先儲存到一個變數中再傳給 style，效果完全一樣。
const config = { color: 'red', fontSize: '16px' };
const element = <div style={config} />
-----
6. JSX 裡只能回傳單一根元素
必須使用 Fragment
// ✅ 正確（使用 <></> Fragment） return ( <> <Header /> <Content /> </> ); // ❌ 錯誤（JSX 中不能 return 兩個平行元素） return ( <Header /> <Content /> );
-----
7. 事件寫法是駝峰命名，值是函式
非常容易與 HTML 原本的寫法混淆
// ✅ 正確
<button onClick={handleClick}>Click</button>
// ❌ 錯誤
<button onclick="handleClick()">Click</button>
-----
8. 條件渲染
在 JSX 中，沒有像 Vue.js 的 v-if 那樣的指令語法，但可以用 JavaScript 表達式來實現相同的功能，或是三元運算或邏輯 (&&) 來達到條件渲染。
{isLoading && <Loading />}
{isLoggedIn ? <Dashboard /> : <Login />}
-----
9. 條件式為 0 時，通常是非預期的顯示結果
像這樣 isLoading 為 boolean，True 顯示 Loading。
{isLoading && <Loading />}
'', null, False 代表否定、不會顯示任何內容，0 雖然也歸類成否定，對 jsx 卻是可以正確顯示在畫面上的值，務必要讓條件輸出成 boolean 來避免問題。
// ✅ 正確
{item.length > 0 && <List item={item} />}
// ❌ 錯誤
{item.length && <List item={item} />} // 得到的結果是 {0}
-----
10. 列表渲染
JSX 本質上就是 JavaScript + HTML 的混合語法，所有邏輯請交給 JS 處理，Vue.js 的 v-for 可以對應到 .map()，同樣要設定 key 屬性，其值必須唯一。
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
