---
# System prepended metadata

title: "\U0001F3C5 Day 16 -React 基礎練習 (1) - React JSX"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅 Day 16 -React 基礎練習 (1) - React JSX

React 對於 JSX 是非常重要的，因為 JSX 在 React 中大量應用。JSX 是一種 JavaScript 的語法擴充，能夠在程式碼中同時包含 HTML 標記，使得編寫 React 元件的過程更直觀。以下是一個簡單的範例：
```jsx=
const element = <h1>你好，React！</h1>;
```

完整的 JSX 介紹請參考：
[Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx#jsx-putting-markup-into-javascript)
[JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)


## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/MWNGEWZ)，並撰寫 JSX 完成以下畫面：
![image](https://hackmd.io/_uploads/r1dr0ReWye.png)


備註：
- 請用 `<h1>` 標籤
- 請使用 formatName 函式來組合 firstName、lastName


<!-- 解答： 
```
// 練習區塊ㄧ
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
// 區塊結束

// 練習區塊二
const element = <h1> {formatName(user)} 是一位 {user.description}</h1>;
// 區塊結束

```
-->


| Column 1    | Column 2                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------- |
| Miikaa      | [Codepen](https://codepen.io/Miikaa/pen/NPrxKLa)                                          |
| Zem         | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/VYjexPX)                               |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/RNRrygY)                                         |
| 7Red        | [CodePen](https://codepen.io/cch2655/pen/ogLbdEd)                                         |
| Jin         | [CodePen](https://codepen.io/Jin-L/pen/xbOZjWP)                                           |
| 地瓜        | [CodePen](https://codepen.io/ChippyYU/pen/jErWLjM?editors=1011)                           |
| Eileen      | [CodePen](https://codepen.io/Eileen-io/pen/PwzZexr)                                       |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/bNeEMmG)                                        |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/xbOZjyY)                                |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/PwzZegM)                                       |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/qENbKYw?editors=0010)                           |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/emzJKKj)                                           |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/RNRrJJP)                                        |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/PwzZaVb?editors=0010)              |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/jErWWQr?editors=1011)              |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/KwMVBZb)                                        |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/ZYOQMeW)                                         |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/NPrxOPN)                           |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/gbMPBXa)                                     |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/RNRrqxg?editors=0010)                        |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ogLbQVZ?editors=1011)                  |
| FangFang    | [Codepen](https://codepen.io/Fang-the-selector/pen/yyJeGBB?editors=1010)                  |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/wBWMRGN?editors=1010)                           |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/WbxrLGq?editors=1010)                         |
| cindy       | [CodePen](https://codepen.io/a50134/pen/WbxrLzN?editors=1010)                             |
| 社子畢卡索  | [CodePen](https://codepen.io/pen?template=raLxoZm)                                        |
| 登登登      | [CodePen](https://codepen.io/Duncanin/pen/azZdMvg?editors=0010)                           |
| wind        | [CodePen](https://codepen.io/wind7y/pen/GgqoawZ)                                          |
| jchunnn     | [CodePen](https://codepen.io/jchunnn/pen/ZYOWERN?editors=1010)                            |
| Antonio     | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/OPXNPNB)                            |
| Rogan       | [CodePen](https://codepen.io/RoganHsu/pen/VYjaYEBhttps://codepen.io/RoganHsu/pen/VYjaYEB) |
| 舜仁        | [CodePen](https://codepen.io/shunjen/pen/MYeywQr)                                         |
| Jenna       | [CodePen](https://codepen.io/abiscc14/pen/NPrNNZv)                                        |
| 星雪糖      | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/jErqzZp?editors=1010)              |
| kuolun      | [CodePen](https://codepen.io/kuolun/pen/emzZMKo?editors=0011)                             |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/MYeyXqr)                           |
| 蛋白        | [Codepen](https://codepen.io/sjlu-0/pen/OPXNrod)                                          |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/yyJJOBO)                            |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/QwEEOWv)                                         |
| Vergil      | [CodePen](https://codepen.io/aglgvsie/pen/gbMLMON)                                        |
| tanuki      | [CodePen](https://codepen.io/tanuki320/pen/raLjMwQ?editors=1010)                          |
| 伊迪        | [CodePen](https://codepen.io/sorryFish/pen/raLwWdP)                                       | 
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/azZwEQK)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/NPrvNpp)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/LEZzKEK?editors=1010)|