談談React框架下的jsx與tsx用途

JSX 與 TSX

都是用於現代前端框架（特別是 React）的語法擴展。
JSX 它允許在 JS 程式碼中撰寫類似 HTML 的結構來建構 UI，目的在於提高程式碼可讀性與維護性，讓元件結構更直觀易讀。 .jsx 最終會被轉譯為純 JavaScript（例如 React.createElement）才能在瀏覽器中執行。
TSX 它結合了 TypeScript的強型別檢查功能與 React 的 JSX UI 組件語法，使開發者能在編譯階段捕捉錯誤，提升代碼的維護性、安全性與編輯器提示能力，特別適合大型 React 專案。 .tsx 加入了強型別檢查，目的在於提升大型專案的代碼品質與編輯器補全體驗。

一、什麼是 JSX？

JSX = JavaScript XML
JSX (JavaScript XML) 是一種 JavaScript 的語法擴展，廣泛用於 React 中來描述使用者介面 (UI) 的外觀。

✅ 它是 React 提供的一種語法糖，讓你可以在 JavaScript 裡面寫類 HTML 結構

function App() {
  return <h1>Hello Luliya</h1>;
}

function App() {
  return <h1>Hello Luliya</h1>;
}

實際上會被編譯成：

React.createElement("h1", null, "Hello Luliya");

React.createElement("h1", null, "Hello Luliya");

👉 簡而言之，JSX 讓開發者可以用熟悉的 HTML 方式寫 React 元件，同時保有 JavaScript 的所有功能。 結構雖然看起來像 HTML 但仍有差異
本質還是 JavaScript。

JSX (.jsx) 的關鍵特點：
＊ 類 HTML 語法： 像是 const element = <h1>Hello</h1>;，方便定義畫面結構。
＊ 非真正 HTML： 它本質上是 JavaScript 的物件，不能直接在瀏覽器運作，需要經過 Babel 等工具轉譯。
＊ 語法糖： 它是 React.createElement() 的替代語法，讓開發者省去複雜的 API 操作。
＊ 混合邏輯： 與 HTML 不同，JSX 可以在標籤中直接插入動態變數或 JavaScript 邏輯。
＊ 提升開發體驗： 雖然不是強制使用，但 JSX 能更清晰地呈現元件結構，是 React 開發的標準配置。

二、什麼是 TSX？

TSX = TypeScript + JSX
TSX (TypeScript XML) 是 TypeScript 的一個檔案副檔名（.tsx），專門用於在 TypeScript 中編寫 JSX 語法。它是 TypeScript 與 JSX 的結合，在支援 HTML 語法結構的同時，加入了強型別檢查，目的在於提升大型專案的代碼品質與編輯器補全體驗。

✅ 在 TypeScript 檔案中寫 JSX

type Props = {
  name: string;
};

function App({ name }: Props) {
  return <h1>Hello {name}</h1>;
}

type Props = {
  name: string;
};

function App({ name }: Props) {
  return <h1>Hello {name}</h1>;
}

👉 簡而言之，JSX 是用來讓寫 UI 畫面更簡單，TSX 是用來讓寫 UI 畫面更安全。
它跟 JSX 的差別只有一個核心：多了「型別系統」。

TSX (.tsx) 的關鍵特點：
＊ 型別安全：提供強型別檢查，能定義 props 和 state 的類型，在程式執行前找出潛在錯誤。
＊ 優化編輯器體驗：提供更好的代碼補全、導航和內嵌文件支持。
＊ 維護大型專案：適合複雜的應用程式，透過型別系統增加程式碼的可維護性。

三、jsx 與 tsx 核心差異

＊ 型別檢查 (Type Checking):
    JSX: 屬性 (Props) 和元件內部資料無類型檢查，容易在執行期發生變數類型錯誤。
    TSX: 強制定義變數、屬性、函式參數的型別 (Type/Interface)，在編譯時就抓出錯誤。
＊ 技術基礎:
    JSX: 基於 JavaScript。
    TSX: 基於 TypeScript，需設定 tsconfig.json。
＊ 適用場景:
    JSX: 小型專案、原型開發、快速驗證概念。
    TSX: 大型應用程式、團隊協作、追求程式碼健壯性的專案。
＊ 語法與型別宣告:
    JSX 允許內嵌 JavaScript 表達式（使用大括號 {}），且屬性命名採用駝峰式（如 className）。
    TSX 定義 Props 常使用 interface 或 type 來定義屬性結構。若需要將變數斷言為特定型別，應使用 as 關鍵字，特別是在 TSX 中 <Type> 語法會與 JSX 衝突。

四、JSX 應用實例 (JavaScript + React)

import React, { useState } from 'react';

// 一個簡單的按鈕計數器組件
function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div className="counter-wrapper">
      <p>目前計數: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

export default Counter;

import React, { useState } from 'react';

// 一個簡單的按鈕計數器組件
function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div className="counter-wrapper">
      <p>目前計數: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

export default Counter;

五、TSX 應用實例 (TypeScript + React)

import React, { useState } from 'react';

// 定義 Props 的型別 (Interface)
interface CounterProps {
  initialCount?: number; // ? 表示選填
  label: string;
}

// 在組件中使用型別，確保 label 為 string，count 為 number
const CounterTS: React.FC<CounterProps> = ({ initialCount = 0, label }) => {
  const [count, setCount] = useState<number>(initialCount);

  return (
    <div className="counter-wrapper">
      <p>{label}: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
};

export default CounterTS;

import React, { useState } from 'react';

// 定義 Props 的型別 (Interface)
interface CounterProps {
  initialCount?: number; // ? 表示選填
  label: string;
}

// 在組件中使用型別，確保 label 為 string，count 為 number
const CounterTS: React.FC<CounterProps> = ({ initialCount = 0, label }) => {
  const [count, setCount] = useState<number>(initialCount);

  return (
    <div className="counter-wrapper">
      <p>{label}: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
};

export default CounterTS;