JSX 樣板語法基礎
## React 組件樣板語法的基礎結構
React 常使用 **函數組件（Function Component）**，基本結構如下：
```jsx
function ComponentName() {
// JavaScript 變數或邏輯
return (
// JSX 樣板
<div>
內容
</div>
);
}
export default ComponentName;
```
### JSX 的重點
1. JSX 看起來像 HTML，但實際上是 JavaScript 的語法擴充。
2. 組件必須回傳一個根元素，例如 `<div>`、`<section>` 或 `<>...</>`。
3. HTML 的 `class` 在 JSX 中要寫成 `className`。
4. JavaScript 變數或運算式要放在大括號 `{}` 中。
例如：
```jsx
const name = "小明";
return <h1>你好，{name}！</h1>;
```
`{name}` 會被替換成變數 `name` 的內容。
---
## 範例一：顯示使用者名稱
```jsx
function Greeting() {
const userName = "小明";
return (
<section>
<h1>你好，{userName}！</h1>
<p>歡迎使用 React。</p>
</section>
);
}
export default Greeting;
```
### 說明
```jsx
{userName}
```
會將 `userName` 變數的值 `"小明"` 代入，因此畫面會顯示：
```text
你好，小明！
歡迎使用 React。
```
---
## 範例二：顯示商品資訊
```jsx
function ProductCard() {
const productName = "無線耳機";
const price = 1290;
const description = "輕巧舒適，適合日常使用。";
return (
<article className="product-card">
<h2>{productName}</h2>
<p>{description}</p>
<p>價格：NT$ {price}</p>
</article>
);
}
export default ProductCard;
```
### 說明
JSX 中可以代入不同類型的變數：
```jsx
{productName}
{description}
{price}
```
畫面結果會類似：
```text
無線耳機
輕巧舒適，適合日常使用。
價格：NT$ 1290
```
在 JSX 的大括號中，也可以放簡單的 JavaScript 運算式，例如：
```jsx
<p>含稅價格：NT$ {price * 1.05}</p>
```
但不能直接放完整的 `if`、`for` 等陳述式；這些通常應先在 JSX 外處理。
相關學習地圖、教學課程
F2E 網站前端工程