React JS #2 | JSX 語法

undefined on Tenor

告別字串拼接地獄：用 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={{}} 。

結語

JSX 是一種強大且方便的語法，讓 React 開發者能夠更直觀地描述 UI 結構，提高程式碼可讀性與開發效率。