## React 與 JSX 的關係

#### React 是啥
**React** 是一個用來建構使用者介面的 JavaScript 庫（他其實不算框架？！），只是用於建立 UI渲染，可以和其他函式庫或套件搭配使用，以在特定環境中渲染。

#### 那 jsx 是啥
而 **JSX** 是一種語法擴展，讓你能在 JavaScript 中寫出類似 HTML 的代碼。

在 React 中，JSX 用於描述 UI，並隨著組件狀態的變化而動態更新。JSX 使 React 代碼更易讀寫，並將 UI 與 JavaScript 更緊密地結合。
=> ==簡單說就是 JSX 讓 React 更容易寫也更易讀啦 ＸＤ==

## React特性：最大限度減少開發者建構 UI 介面時出現的錯誤

> (使用)React 的主要目標是最大限度減少開發者建構 UI 介面時出現的錯誤。它通過使用元件——描述部分使用者界面且自成一體的邏輯與程式碼段落來實現這點。

React 應用程式有許多開發者體驗(developer-experience)優勢，例如使用 JSX 編寫介面時會需要編譯過程。添加如 Babel 這樣的編譯器到網站上會讓程式碼執行效率變慢，因此開發者通常會在建構階段中設置此類開發工具。React 對開發工具需求蠻吃重的，但這些都是可以學習的。

## JSX 語法

React 在許多設計模式中利用了現代 JavaScript 特性。它與 JavaScript 最大的區別在於使用JSX語法。JSX 擴展了 JavaScript 語法，以便能與類似 HTML 的程式碼並存。

JSX 是一種 JavaScript 的語法糖，它看起來很像 HTML，但實際上是 JavaScript。

JSX 方法允許我們將元素互相嵌套：

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

若沒有其他的幫助，你的瀏覽器是無法直接讀取解析 JSX 的，當編譯完成（藉由使用像Babel或Parcel之類的工具），如果未經編譯且使用 JavaScript，我們的 header 表達式要寫成這樣才可以運行：

const header = React.createElement(
  "header",
  null,
  React.createElement("h1", null, "Mozilla Developer Network"),
);

是可以跳過編譯階段，並使用React.createElement()來撰寫你自己的 UI 介面的。但是，這樣做會失去 JSX 的聲明性優勢，並且程式碼更難閱讀。雖然編譯是開發過程的額外步驟，但是許多 React 社群的開發者認為為了可讀性，使用 JSX 是值得的。

每個 JSX 元素都只是呼叫 React.createElement(component, props, ...children) 的語法糖。所有任何你能用 JSX 做的事，你都能用純 JavaScript 做到。

來源：
https://zh-hant.legacy.reactjs.org/docs/react-without-jsx.html

## JSX 的主要特點：

**標籤語法**：JSX 使用類似 HTML 的標籤語法來創建 React 元素。
例如，`<div />` 創建了一個 DIV 元素。

**表達式插入**：JSX 允許你在標籤內部插入 JavaScript 表達式。這些表達式需要被大括號 `{}` 包裹。
例如，`<h1>{title}</h1>` 會創建一個 H1 元素，其內容為變量 title 的值。

**組件語法**：在 JSX 中，你可以直接使用 React 組件。組件名需要以大寫字母開頭。
例如，`<MyComponent />` 會創建一個 MyComponent 組件的實例。

**屬性和子元素**：JSX 標籤可以有屬性（類似 HTML 的屬性）和子元素。
例如，`<div className="myClass">Hello, world!</div>` 創建了一個帶有 class 屬性和文字子元素的 DIV 元素。

:::warning
需要注意的是，雖然 JSX 看起來像 HTML，但它有一些語法上的差異。
例如：
1. 在 JSX 中，你需要使用 className 而不是 class 來指定 CSS 類，
2. 所有的標籤都必須被關閉（例如，<input />）。
:::

### 更詳細的 JSX 用法可以看這：
React 官方對於 JSX 的描述
https://zh-hant.legacy.reactjs.org/docs/jsx-in-depth.html

// 傳入非 function
setTimeout(console.log("Hello!"), 1000);

// （馬上印出） Hello!

// 實際上是 ＝
setTimeout("undefined", 1000);
// function 沒有回傳值，那就是 undefined
// 會馬上印出 Hello! 是因為程式進行到 console.log("Hello!") 所以被直接執行

// 使用字串的部分會在 1秒之後執行
// (內部隱含 eval 的轉換，所以執行上效能會比非字串的版本差一些。)

setTimeout('console.log("Hello!")', 1000);

// （1秒之後） Hello!