2 篇文章 含有標籤「JSX」

1. JSX 是什麼？​

JSX（JavaScript XML）是一種語法擴展，主要用於 React 函式庫中，它允許在 JavaScript 代碼中撰寫類似 HTML 的語法，使 UI 組件的編寫更加直觀。JSX 並非原生 JavaScript，需要透過 Babel 轉譯成標準 JavaScript 代碼。

2. 為什麼使用 JSX？​

JSX 提供了一種更加可讀、直觀的方式來描述 UI 結構，相比於傳統的 JavaScript DOM 操作，它更簡潔易懂。此外，JSX 具備以下優勢：

• 可讀性高：類似 HTML 的語法使 UI 組件結構清晰。
• 與 JavaScript 無縫結合：可在 JSX 中嵌入 JavaScript 表達式。
• 更安全：React 會自動處理 XSS（跨站腳本攻擊），確保數據安全。
• 高效渲染：React 使用虛擬 DOM 最小化真實 DOM 更新，提高性能。

3. 基本語法​

3.1 基本範例​

JSX 允許我們在 JavaScript 代碼中使用類似 HTML 的語法來描述 UI：

const element = <h1>Hello, JSX!</h1>;
ReactDOM.render(element, document.getElementById('root'));

3.2 JSX 中的 JavaScript 表達式​

JSX 允許在 {} 中插入 JavaScript 表達式，例如變數、函式調用等。

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

3.3 JSX 屬性​

JSX 屬性與 HTML 類似，但有些屬性名稱需使用 camelCase，例如 className 取代 class，htmlFor 取代 for。

const element = <input type="text" placeholder="輸入文字" className="input-box" />;

3.4 JSX 內聯樣式​

內聯樣式需使用 JavaScript 對象，且屬性名稱為 camelCase。

const style = { color: 'blue', fontSize: '20px' };
const element = <p style={style}>這是一段藍色文字</p>;

4. JSX 中的條件與循環​

4.1 條件渲染（if...else）​

JSX 本身不支援 if...else，需使用三元運算子或變數。

const isLoggedIn = true;
const element = isLoggedIn ? <h1>歡迎回來！</h1> : <h1>請登入</h1>;

4.2 使用 && 運算符​

const messages = ['新訊息1', '新訊息2'];
const element = (
  <div>
    {messages.length > 0 && <p>你有 {messages.length} 則未讀訊息。</p>}
  </div>
);

4.3 迴圈渲染（map）​

JSX 可透過 map 方法來動態渲染列表。

const list = ['Apple', 'Banana', 'Cherry'];
const element = (
  <ul>
    {list.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

5. JSX 與 React 組件​

JSX 可與 React 組件結合使用，提升 UI 開發的模組化程度。

5.1 函式型組件​

function Welcome(props) {
  return <h1>你好，{props.name}！</h1>;
}

const element = <Welcome name="小明" />;
ReactDOM.render(element, document.getElementById('root'));

5.2 類別型組件​

class Welcome extends React.Component {
  render() {
    return <h1>你好，{this.props.name}！</h1>;
  }
}

const element = <Welcome name="小明" />;
ReactDOM.render(element, document.getElementById('root'));

6. 總結​

JSX 是 React 開發的重要語法，它能夠讓 UI 描述更加直觀，並與 JavaScript 無縫整合。透過學習 JSX，我們可以更高效地撰寫可重用的 React 組件，提高開發效率。

前言​

React 是一個用於建立 UI 元件的 JavaScript 函式庫，而 JSX 則是屬於 React 中的一個元件模板語法糖。這篇文章將簡要介紹 JSX 是什麼，如何撰寫、條件式使用以及特殊對應，幫助初學者或 React 開發者進一步瞭解 JSX 的基礎應用。

重點摘要​

• JSX 是 JavaScript XML 的縮寫
• 允許在 JavaScript 代碼中直接寫 HTML
• JSX 會被轉譯變成 React.createElement()
• JSX 中的 HTML 項目必須有唯一的層級結點
• 可用小括號 執行 JavaScript 表達式
• 允許使用 fragment (空括號) 以避免額外 DOM 結構
• HTML 元素必須適當關閉，並使用 className 代替 class
• 使用條件語句時， if 必須在 JSX 之外，可用三元表達式

實例解說​

1. JSX 與非 JSX 寫法

使用 JSX 的方式：

const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

未使用 JSX 的方式：

const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

2. JSX 表達式範例

使用 JSX 方式計算數學表達式：

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

3. 多行 HTML 要用 () 包起

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

4. 唯一一層級結點要求

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

或是使用 fragment ：

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

5. 元素必須適當關閉

const myElement = <input type="text" />;

6. 使用 className 代替 class

const myElement = <h1 className="myclass">Hello World</h1>;

7. JSX 條件語句

方式 1：使用 if 在 JSX 之外

const x = 5;
let text = 'Goodbye';
if (x < 10) {
  text = 'Hello';
}
const myElement = <h1>{text}</h1>;

方式 2：使用三元表達式

const x = 5;
const myElement = <h1>{x < 10 ? 'Hello' : 'Goodbye'}</h1>;

參考文件​

1. React Custom Hooks