了解了 React 的基礎概念和環境設定後，接下來就讓我們透過程式碼，看看 React 如何運作吧！
在 React 裡，我們常看到一種「長得像 HTML」的語法，這就是 JSX（JavaScript XML）。它其實是 JavaScript 的語法糖，會在背後被編譯成 React.createElement()。

純 JS 寫法（沒有 JSX）

import React from "react";

function Hello() {
  return React.createElement("h1", null, "Hello, React!");
}

export default Hello;

JSX 寫法

import React from "react";

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

兩者功能完全一樣，差別在於：

• 純 JS：要手動呼叫 React.createElement，程式可讀性較差

• JSX：看起來像 HTML，直覺易懂，更接近設計稿

結論：JSX 只是方便的寫法，底層仍是 JavaScript。熟悉 JSX 與純 JS 的差別，能幫助我們更靈活地建立元件，並理解 React 如何高效更新畫面。