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

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

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 完成以下畫面：

備註：
- 請用 `<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)|