❗常犯錯誤，需要特別注意的

1. 屬性名稱差異：
   • class在HTML中用來指定元素的CSS類別，但在JSX中應使用className。
     • HTML：<div class="my-class"></div>
     • JSX：<div className="myClass"></div>
   • for在HTML中用在<label>元素，連結到表單元素的 id，但在JSX中應使用htmlFor。
     • HTML：<label for="my-input"></label>
     • JSX：<label htmlFor="myInput"></label>
   • 自定義的 HTML 屬性在 JSX 中需使用駝峰式命名（camelCase）如**tabIndex，readOnly**等。
2. 自閉合標籤：
   • 在 HTML 中，某些元素如**<input>、<br>**等可以不用閉合標籤，但在 JSX 中必須自閉合。
     • HTML：<input type="text">、<br>
     • JSX：<input type="text" />、<br />
3. 行內樣式❗**：**
   • 在HTML中，行內樣式使用的是字串，但在JSX中使用的是物件。
     • HTML：<div style="color: red; font-size: 16px;"></div>
     • JSX：<div style={{color: "red", fontSize: "16px"}}></div>
4. JavaScript 表達式：
   • 在 HTML 中，我們不能直接在標籤內寫 JavaScript 表達式，但在 JSX 中可以使用花括號 {} 來插入 JavaScript 表達式。
     • JSX：<h1>{ "Hello " + name }</h1>
5. 注釋方式：
   • HTML使用 <!-- --> 作為注釋，但在JSX中要使用 {/* */} 作為注釋。
6. 布林屬性❗**:**
   • 在 HTML 中，某些屬性可以只出現而不需要值，例如 disabled，只要它出現，就表示 disabled=true。
     • HTML：<input type="text" disabled>
   • 在 JSX 中，我們需要明確地使用 true 或 false 來指定布林屬性。
     • JSX：<input type="text" disabled={true} /> 或 <input type="text" disabled={false} />
7. JavaScript 物件和陣列：
   • 在 HTML 中，我們不能直接將物件或陣列作為元素的子代或屬性值。
   • 但在 JSX 中，我們可以將物件直接作為元素的子代或屬性值，並將陣列用於建立元素列表。
     • JSX：<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
8. 事件處理：
   • 在 HTML 中，我們通常需要將 JavaScript 函數名稱作為字串賦值給事件屬性，例如 onclick="myFunction()"。
   • 但在 JSX 中，我們直接將事件處理器函數賦值給相應的屬性，屬性名稱需要用駝峰命名法。
     • JSX：<button onClick={myFunction}>Click me</button>
9. JSX 中的元素必須被包裹❗**：**

   • 在一個 JSX 表達式中，如果你有多個元素，他們必須被包裹在一個元素裡面。如果在 HTML 中，我們可以有多個沒有被包裹的兄弟元素。

     • JSX:

     <div>
       <p>Paragraph 1</p>
       <p>Paragraph 2</p>
     </div>
     

     • 或者可以使用 <></> 來替代

     <>
       <p>Paragraph 1</p>
       <p>Paragraph 2</p>
     </>