告別字串拼接地獄：用 JSX 解鎖 React 的優雅姿態
在傳統的網頁開發中，我們經常使用 JavaScript 來動態生成 HTML 元素，這往往需要大量的字串拼接，不僅可讀性差，也容易出錯。
const element = document.createElement('h1');
element.className = 'greeting';
element.textContent = 'Hello, world!';
document.getElementById('root').appendChild(element);
上述程式碼雖然可以產生一個 <h1> 標籤，但卻顯得冗長且不易理解。
JSX：JavaScript 的擴充語法，打造 HTML 般的程式碼
JSX (JavaScript XML) 是一種 JavaScript 的語法擴充，允許你在 JavaScript 程式碼中編寫類似 HTML 的語法。JSX 並不能直接在瀏覽器中執行，需要透過 Babel 等工具將其轉換為標準的 JavaScript 程式碼。
以下為JSX 程式碼：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
會被 Babel 轉換為：
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
);
JSX 語法規則
- 回傳單一個根元素： 如果有一元件最終回傳多個元素，我們需要將這些元素用一元素包起來當做父層元素(例如用
<div>或使用 Fragment (<>和</>)。 - 所有標籤都需要 Close：所有標籤都必須有對應的閉合標籤，包括單標籤 (self-closing tags)，例如：
<img>一定要用<img />表示。 - JSX - 插入變數 : 透過
{}，可以讓我們將變數、數值甚至是表達式插入進元素裡。
const name = 'John';
const element = (
<h1>Hello, {name}!</h1>
);
const isLoggedIn = true;
const element = (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number}>{number}</li>
);
const element = (
<ul>{listItems}</ul>
);
- 幾乎所有屬性名稱是用 camelCase 表示： JSX 最終會被轉換為 JavaScript，而 JavaScript 會對變數名稱有限制，像是不能使用保留字和連接號，所以在寫 JSX 時，才會將許多屬性名稱用 camelCase 的方式書寫。
- for 須改寫成 htmlFor。
<label htmlFor='check-label' />
- css 的 class，要用 className。
<div className="container">
</div> - onclick ⇒ onClick ；onchange ⇒ onChange；tabindex ⇒ tabIndex (備註：aria-* 和 data-* 則不受此限)
<but ton onClick={()=>{console.log('點擊')}}>
<div tabIndex="1" /> - style 要用
style={{}}。
- for 須改寫成 htmlFor。
結語
JSX 是一種強大且方便的語法，讓 React 開發者能夠更直觀地描述 UI 結構，提高程式碼可讀性與開發效率。
