---
# System prepended metadata

title: "\U0001F3C5 Day 1｜React JSX"
tags: [2023 React 入門攻略工作坊]

---

在開始寫 React 之前，一定要先了解 JSX，因為在 React 中會大量的使用到這樣的寫法。JSX 是一個 JavaScript 的語法擴充，在寫 React 的時候會透過這樣的語法來做出使用者介面，相當於 template 和 JS 的混合用法，簡單的範例如下：
```jsx=
const element = <h1>你好，世界！</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/hexschool/pen/QWmWVXP)，並撰寫 JSX 完成以下畫面：
![](https://i.imgur.com/7Syc5na.png)

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



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

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

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

```
-->

回報區
---
| # |      Discord      |                           CodePen / 答案                   |
|:-:|:-----------------:|:----------------------------------------------------------:|
| 01 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/yLQrNZP)
| 02 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/xxQeGmQ) |
| 03 | lingchang | [Codepen](https://codepen.io/ling-chang/pen/ZEmZGNx) |
| 04 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/wvQZabo) |
| 05 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/qBQwdew) |
| 06 | Jasmin | [Codepen](https://codepen.io/thejasmin/pen/abQxvvM) |
| 07 | connieK | [Codepen](https://codepen.io/plkang3617/pen/poQZPME) |
| 08 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/qBQwOdG) |
| 09 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/mdQgJYJ) |
| 10 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/gOQyaoW) |
| 11 | yuchih | [Codepen](https://codepen.io/hijachu/pen/Poxgqaq) |
| 12 | Rochel#4754 |[Codepen](https://codepen.io/rochelwang1205/pen/vYQMNgL?editors=1010)|
| 13 | Ann Chou#0146 |[Codepen](https://codepen.io/annchou_illu/pen/QWJPjOm)|
| 14 | kuanju27 |[Codepen](https://codepen.io/Eero-Chiao/pen/jOQRbXe)|
| 15 | wei_Rio |[Codepen](https://codepen.io/wei_wu/pen/OJaGydz)|
| 16 | Winnie7033 | [Codepen](https://codepen.io/chou-winnie/pen/MWzRaqL) |
| 17 | Lulu | [Codepen](https://codepen.io/Lin-Lulu/pen/jOQRbgX?editors=1010) |
| 18 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/XWyQmLr) |
| 19 | Wendy3 | [Codepen](https://codepen.io/wendy03/pen/MWzRKJg) |
| 20 | LiShang | [Codepen](https://codepen.io/LiShang/pen/RwqOrLM) |
| 21 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/vYQMLpR) |
| 22 | HsienLu | [Codepen](https://codepen.io/Hsienlu/pen/dyQLoBx) |
| 23 | syuan | [Codepen](https://codepen.io/Syuan-Lin/pen/WNYWQLK?editors=1010) |
| 24 | WA | [Codepen](https://codepen.io/ldddl/pen/ExOJPmy) |
| 25 | Aden | [Codepen](https://codepen.io/Osases/pen/mdQgVoz) |
| 26 | MotoRin | [Codepen](https://codepen.io/sakimoto/pen/VwVNedQ?editors=1010) |
| 27 | smalljie | [Codepen](https://codepen.io/smalljie/pen/XWyQXQM) |
| 28 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/VwVNaMg) |
| 29 | HanHan | [Codepen](https://codepen.io/Emma-Yang/pen/RwqOaRv) |
| 30 | Andy | [Codepen](https://codepen.io/jrprzwsj/pen/LYXvNgq) |
| 31 | Sui | [Codepen](https://codepen.io/suihsilan/pen/WNYWwmp?editors=1010) |
| 32 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/rNQbePv) |
| 33 | iris | [Codepen](https://codepen.io/iris831206/pen/dyQLXob) |
| 34 | yi0863 | [Codepen](https://codepen.io/YI0305/pen/MWzRyqO?editors=1010) | 
| 35 | zona| [Codepen](https://codepen.io/w242920/pen/eYQozMx) |
| 36 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/bGQJePK) |
| 37 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/QWJPyqR?editors=1010) |
| 38 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/qBQwaPm) |
| 39 | 汪汪 | [Codepen](https://codepen.io/hunwooooof/pen/BaGELpO) |
| 40 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/xxQeEjq) |
| 41 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/OJaGRva) |
| 42 | Kent | [Codepen](https://codepen.io/labkunz/pen/gOQywQQ) |
| 43 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/wvQZzQZ) |
| 44 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/xxQeRrj)|
| 45 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/wvQZopK?editors=1010) |
| 46 | Jeff | [Codepen](https://codepen.io/Jeff-Chiang/pen/LYXvbqa) |
| 47 | Gimmy | [Codepen](https://codepen.io/TingKan/pen/oNQOYrR) |
| 48 | Che1ze | [Codepen](https://codepen.io/Shih-Min-Hung/pen/WNYWoqj) |
| 49 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/VwVNPwZ) |
| 50 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/bGQJgYY?editors=1010) |
| 51 | collinkao | [Codepen](https://codepen.io/collin0825/pen/WNYWRPy) |
| 52 | David0799 | [Codepen](https://codepen.io/David0799/pen/xxQeOBG) |
| 53 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/MWzRpJg) |
| 54 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/RwqOpPZ) |
| 55 | NoZ | [codePen](https://codepen.io/fgfjgror/pen/vYQMxLJ) |
| 56 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/eYQozRQ) |
| 57 | Azami | [Codepen](https://codepen.io/azami/pen/NWEmpMm) |
| 58 | Eden | [Codepen](https://codepen.io/iseden/pen/yLQrMQN)|
| 59 | Carole | [Codepen](https://codepen.io/s892261118/pen/JjeVWqr) |
| 60 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/jOQRmKy) |
| 61 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/gOQyRLw) |
| 62 | Tian | [Codepen](https://codepen.io/ccyy915/pen/MWzRogQ) |
| 63 | sora | [Codepen](https://codepen.io/hoshisora000/pen/wvQZepr) |
| 64 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/OJaGgax?editors=0010) |
| 65 | PeterChung | [Codepen](https://codepen.io/tsang6187/pen/LYXvLmV) |
| 66 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/zYMXdaK) |
| 67 | d05220725 | [Codepen](https://codepen.io/NICK20190621/pen/VwVNMeG?editors=1111) |
| 68 | YENNEFER | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/zYMXJbo) |
| 69 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/oNQOpPG) |
| 70 | 便當 | [Codepen](https://codepen.io/wafjxnde-the-typescripter/pen/YzRMaaq?editors=1010) |
| 71 | sylvia | [Codepen](https://codepen.io/aqrerdxo-the-sasster/pen/WNYWzBy) |
| 72 | Steve Tseng | [Codepen](https://codepen.io/hifly0921/pen/YzRMLPZ) |
| 73 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/RwqOMqK) |
| 74 | chichi | [Codepen](https://codepen.io/chichihuang/pen/wvQZjXR) |
| 75 | pocky | [Codepen](https://codepen.io/lnwjloyh-the-looper/pen/ZEmZRay) |
| 76 | Rxzan | [Codepen](https://codepen.io/Tzuru-Chen/pen/OJaGvGO?editors=1010) |
| 77 | Cami | [Codepen](https://codepen.io/fayevivi/pen/VwVNGwm) |
| 78 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/RwqOYjx) |
| 79 | aray | [Codepen](https://codepen.io/ceqchksj-the-flexboxer/pen/mdQgQxr) |
| 80 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/PoxgXEa) |
| 81 | cataska | [Codepen](https://codepen.io/lovecankill/pen/mdQgQdy) |
| 82 | rainnping | [Codepen](https://codepen.io/rainnping/pen/ZEmZPJj) |
| 83 | besspeng | [Codepen](https://codepen.io/besspengcl/pen/LYXvvRR) |
| 84 | anderson | [Codepen](https://codepen.io/goodmanbuild/pen/gOQyEyR) |
| 85 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/rNQbbxX) |
| 86 | Mack | [Codepen](https://codepen.io/TsaiMack/pen/ZEmZZVb) |
| 87 | Wendy | [Codepen](https://codepen.io/siaochanwu/pen/dyQLEwa) |
| 88 | rb1014 | [Codepen](https://codepen.io/RoyWu/pen/BaGEeXK) |
| 89 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/QWJPXqO?editors=1111) |
| 90 | Ringo#7583 | [Codepen](https://codepen.io/ringolai1988/pen/qBQwzpe) |
| 91 | Melody #7746 | [Codepen](https://codepen.io/jkmqhedd-the-sasster/pen/rNQbERb) |
| 92 | Hanhanbite | [Codepen](https://codepen.io/hanhanbite/pen/jOQRjRp) |
| 93 | STAR | [Codepen](https://codepen.io/coffeeteacher/pen/KKrYOyY) |
| 94 | dgajc | [Codepen](https://codepen.io/dgajc/pen/GRwaKya) |
| 95 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/JjeqoPd) |
| 96 | Kyrie | [Codepen](https://codepen.io/KyrieHaveGoodDay/pen/yLQWYqq?editors=1011)
| 97 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/yLQWeLG) |
| 98 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/PoxvZjR?editors=1010) |
| 98 | ting | [Codepen](https://codepen.io/tseng0501/pen/mdQYPez) |
| 99 | toshow. | [Codepen](https://codepen.io/toshow/pen/dyQEMpe)|
| 100 | Liam | [Codepen](https://codepen.io/liamkkobe/pen/xxQNVdP) |
| 101 | CG | [Codepen](https://codepen.io/qzmnczik-the-decoder/pen/abQrdMp) |
| 102 | SquidYou#9045 | [Codepen](https://codepen.io/rainstop1205/pen/YzRbqRg) |
| 103 | 阿旭 | [Codepen](https://codepen.io/vwtrpqmm/pen/yLQrNZP) |
| 104 | Alex | [Codepen](https://codepen.io/natass680/pen/KKrLWNb?editors=0010) |
| 105 | Fox | [Codepen](https://codepen.io/foxlee2587/pen/poQmeZX?editors=1010) |
| 106 | May L | [Codepen](https://codepen.io/may7243/pen/MWzdmWa) |
| 107 | RJ | [Codepen](https://codepen.io/RJ-S/pen/LYXoyxQ) |
| 108 | Sabastain | [Codepen](https://codepen.io/SebastianWei/pen/RwqmVBd) |
| 109 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/RwqmVeO) |
| 110 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/eYQaWoG) |
| 111 | Cami | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/eYQaWoG) |
| 112 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/wvQbxeo) |
| 113 | Lin | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/PoxvBMm) |
| 114 | Evan | [Codepen](https://codepen.io/evanz1215/pen/mdQYzKv) |
| 115 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/NWEVoeq?editors=1010) |
| 116 | Carrie | [Codepen](https://codepen.io/echocarriet/pen/eYQaaxR) |
| 117 | hsuhsusophie | [Codepen](https://codepen.io/hsuhsusophie/pen/xxQNNBW?editors=1111) |
| 118 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/wvQbLmg?editors=0010) |
| 119 | JOJOn2_Jin | [Codepen](https://codepen.io/ewnrzxpr-the-builder/pen/rNQEOpK) |
| 120 | Nikki.kang | [Codepen](https://codepen.io/Nikki-Kang/pen/vYQqXoW) |
| 121 | shcopy | [Codepen](https://codepen.io/shcopy/pen/Poxrbgr) |
| 122 | Kaya | [Codepen](https://codepen.io/laron9486/pen/VwVJPEZ) |
| 123 | nancyWu | [Codepen](https://codepen.io/nancycolorful/pen/JjeQWOd) |
| 124 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/xxQogZz)| 
| 125 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/XWyLBNV) |
| 126 | joanhui#9261 | [Codepen](https://codepen.io/Joanhui/pen/MWzMPdb) |
| 127 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/wvQLNOV) |
| 128 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/bGQPJMv) |
| 129 | 妤ㄦ | [Codepen](https://codepen.io/bmtuepzo-the-sans/pen/LYXKoPb) |
| 130 | homerWu | [Codepen](https://codepen.io/wuhomer7766/pen/KKrjOKZ?editors=0010) |
| 131 | Overy | [codepen](https://codepen.io/tupbsair-the-vuer/pen/bGQXbrz)
| 132 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/BaGXadN) |
| 133 | andychiou | [Codepen](https://codepen.io/andychiou1113/pen/abQxxRB) |
| 134 | 鉛筆 | [Codepen](https://codepen.io/zoeguava/pen/JjegYJB) |
| 135 | Kai | [Codepen](https://codepen.io/kaicheng928/pen/VwVopXa) |
| 136 | 小米 | [Codepen](https://codepen.io/joanne-wei/pen/LYXwxjJ) |
| 137 | hungya | [Codepen](https://codepen.io/hungya777/pen/OJaKZJX) |
| 138 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/jOQRjEw) |
| 139 | Porin | [Codepen](https://codepen.io/jgaafuka/pen/ExOqewM?editors=1010) |
| 140 | 大衛 | [Codepen](https://codepen.io/exnsrpjc/pen/dyQxLMx?editors=1010) |
| 141 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/QWJePwv?editors=1010) |
| 142 | lin_lion | [Codepen](https://codepen.io/Lion-Lin/pen/qBQeGeP) |
| 143 | Ed Hsu | [Codepen](https://codepen.io/Ed-Hsu/pen/VwVoodv) |
| 144 | Joyce Hsu | [Codepen](https://codepen.io/HSUCHIASHIH/pen/qBLWBQM?editors=1010) |
| 145 | 大衛蔡 | [Codepen](https://codepen.io/David-Tsai/pen/wvRwoeX?editors=1010) |
| 146 | Yin | [Codepen](https://codepen.io/andy888jam/pen/jOXNLmL) |
| 147 | Owen | [Codepen](https://codepen.io/owen-dong/pen/yLGBjLX?editors=1010) |
| 148 | Mocha | [Codepen](https://codepen.io/MochaLee/pen/zYyOazY) |
| 149 | Emily4869 | [Codepen](https://codepen.io/aptx4869Emily/pen/dywbxrP) 
| 150 | Feng-Lin | [Codepen](https://codepen.io/fenglin0115/pen/jOXOMNr) |
| 151 | Nisa | [Codepen](https://codepen.io/Nisa491/pen/oNJggGJ)|
| 152 | curry | [Codepen](https://codepen.io/Ted19851223/pen/GRPgZQW?editors=1011) |
| 153 | SaturnXVIII | [Codepen](https://codepen.io/SaturnXVIII/pen/rNoaoJG) |
| 154 | AmberLin | [Codepen](https://codepen.io/autum55853/pen/QWzwEdo?editors=1011) |
| 155 | Yiren | [Codepen](https://codepen.io/Yiren_Liou/pen/ZEVGOKg)
| 156 | Ken | [Codepen](https://codepen.io/Ken720053/pen/zYyGKXW) 
| 157 | Lydia | [Codepen](https://codepen.io/ling-chen-the-flexboxer/pen/WNLvEWx) |
| 158 | Jujube | [Codepen](https://codepen.io/tendayling/pen/wvRaPGy) |
| 159 | Rocker | [Codepen](https://codepen.io/RockerLi/pen/RwEWbyP?editors=1111) |
| 160 | chili | [Codepen](https://codepen.io/chilichen118/pen/wvRoWWL) |
| 161 | Eric Chen | [Codepen](https://codepen.io/torotu/pen/vYQMLpR) |
---



- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```
