---
tags: 2022 React 新手讀書會
---
# 🏅 Day 2｜JSX 屬性練習
呈昨天提到的，在撰寫 React 會大量使用到 JSX 的部分，除了基本的樣板以外，今天也持續介紹常見的 JSX 使用，一起來練習看看吧！
### JSX 最外層只能有一個根元件
一個元件不能返回多個元素，就像一個函數不能返回多個值一樣。
錯誤示範：

const element = <h2> Hello！</h2><h2> 你好！</h2>

正確示範：

const element = <div><h2> Hello！</h2><h2> 你好！</h2></div>

### JSX 中的 class
在 JSX 同樣可以加入 class 來指定樣式，但要注意屬性名稱需改為 className。
例如：

const element = <div className="card"><h2> Hello！</h2><h2> 你好！</h2></div>

### JSX 中的屬性代入
在 JSX 中需要被視為 JavaScript 處理的部分，都需要使用大括號 {} 包住。
例如：

const imgUrl = "https://i.pravatar.cc/150?img=38";
<img src={imgUrl} />

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/yLKLRaN)，並撰寫 JSX 完成以下畫面：
<img src="https://i.imgur.com/dxF40uI.png" width="300"/>

備註：
- 畫面需求的 HTML 格式結構可以參考 HTML 中的註解。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

// 練習區塊
const element = <div className="card">
 <img src={user.avatar} alt="頭貼" />
  <div className="content">
    <h3><b>{formatName(user)}.</b></h3> 
    <p>{user.description}</p> 
    <p className="text-blue">會每天練習 React 1 次！ </p>
  </div>
</div>;
// 區塊結束

-->

回報區
---

| Discord | CodePen / 答案 |
|:--------------- |:--------------------------------------------------------------- |
| Rice#8043 | [Codepen](https://codepen.io/riecball/pen/KKovaVj?editors=1010) |
| DIANAxAKKO#4298 | [Codepen](https://codepen.io/redfire29/pen/ZExrQGg) |
| yunyun#5215 | [Codepen](https://codepen.io/yun_yunni/pen/GRxQoJy) |
| Bumble幫啵#0255 | [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/gOevPOo) |
| 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/yLKveLr?editors=1010) |
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/poLagJB)|
| 魚魚#0937 | [Codepen](https://codepen.io/fish0522/pen/rNdJxxN) |
| rainbow#3329 | [Codepen](https://codepen.io/g901612002/pen/gOevPMe?editors=1011) |
| Evonne#7078 | [Codepen](https://codepen.io/Hsu1Fang/pen/poLagbm?editors=0010) |
| hw#0715 | [Codepen](https://codepen.io/Lhwei/pen/KKoQVgY)|
| Kenge#3690 | [Codepen](https://codepen.io/pgkusn/pen/eYMVJGp)|
| KuoMin#4931 | [Codepen](https://codepen.io/KuoMin/pen/PoRQZmB?editors=1010)|
| 𝓛𝓊𝒸𝓎#8635 | [Codepen](https://codepen.io/lucygirl/pen/OJvQMOB)|
| AllenW#1132 | [Codepen](https://codepen.io/AllenW/pen/XWEZXVd)|
| 棒腿#9350 | [Codepen](https://codepen.io/frankHsu/pen/zYWRrpB)|
|lloyd#8224|[codepen](https://codepen.io/thanatus25/pen/vYRdLzj)|
|Morris#8755|[Codepen](https://codepen.io/morrisss/pen/gOevPjB)|
|ZengZeng|[Codepen](https://codepen.io/tyzyoko/pen/wvmyMjN)|
|RON#2813|[Codepen](https://codepen.io/Ron115/pen/yLKveKy)|
|Timothy#5863|[Codepen](https://codepen.io/timothy_hippo/pen/JjLpGaJ)|
|wenyun#2362|[Codepen](https://codepen.io/wenyuncc/pen/rNdJxqM)|
|Aaron #2964|[Codepen](https://codepen.io/narrowd4c/pen/ExEQPpZ)|
|L0F0#8733|[Codepen](https://codepen.io/l0f0/pen/wvmyMOb?editors=1010)|
|翔#0859|[Codepen](https://codepen.io/energy95272z/pen/NWYyNWW)
|Doris#1140|[Codepen](https://codepen.io/doris79588/pen/oNqEbrq)
|Ayre#0016|[Codepen](https://codepen.io/yichunlin09/pen/QWmQNWb?editors=0010)|
|Iris#8462|[Codepen](https://codepen.io/irissamy/pen/oNqExxM)|
|SHIN#6075|[Codepen](https://codepen.io/shin9626/pen/yLKvemO)|
|Ada|[Codepen](https://codepen.io/zggsoagv-the-scripter/pen/gOevrWV)|
|Eric Su#7798|[Codepen](https://codepen.io/wc-su/pen/abYqNLG)|
|yunyun#2239|[Codepen](https://codepen.io/jarita0826/pen/BarYKez)|
|Yiling#4054|[Codepen](https://codepen.io/lin010/pen/VwXQaOo?editors=1010)|
|Wu#0167|[Codepen](https://codepen.io/Xander0705/pen/VwXQagJ)|
| Vada Chen #2055| [Codepen](https://codepen.io/vadachen/pen/zYWRqQJ)|
|𝔼.𝕎#4742|[Codepen](https://codepen.io/kidult316/pen/mdxXPGb)|
|Carolkiki2003#7399|[Codepen](https://codepen.io/wasfzuig/pen/VwXQaNJ)|
|ChloeLo#4858|[Codepen](https://codepen.io/chloelo/pen/ExEQKBd)|
|huch09#1426|[Codepen](https://codepen.io/subarashii-huch09/pen/rNdJxMa)|
|Arista#5802|[Codepen](https://codepen.io/arista-hsieh/pen/zYWRBoe)|
|Paper#1658|[Codepen](https://codepen.io/paper_hsiao/pen/PoRQzOm)|
|TaoDoris#5230|[Codepen](https://codepen.io/taomaomao/pen/bGvLejL?editors=0011)|
|niel#2413|[Codepen](https://codepen.io/danielhsu/pen/poLabOx)|
|carrieT#9628|[Codepen](https://codepen.io/echocarriet/pen/ZExrOZZ)|
| m_m#5493 | [Codepen](https://codepen.io/minnn7716/pen/zYWRKOY) |
| Stacy#1442 | [Codepen](https://codepen.io/keebibmh/pen/VwXQKjW) |
| Overy#4545 |[Codepen](https://codepen.io/oceanwhale52hz/pen/gOevwav) |
| shoppingq |[Codepen](https://codepen.io/shoppingq/pen/JjLpRYK) |
| 城堡#2126 | [Codepen](https://codepen.io/tthcastle/pen/rNdJMeN) |
|wiimax#4564| [Codepen](https://codepen.io/willismax/pen/poLaERX)|
|hiYifang #0736| [Codepen](https://codepen.io/hiYifang/pen/vYRdGzq)|
|lingxuan| [Codepen](https://codepen.io/lingxuan0618/pen/qBoxaRR)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/MWVQjbN) |
| Yanyan#3555|[Codepen](https://codepen.io/wei-yi-lee/pen/LYdQRyW)|
| yuyu#6310|[Codepen](https://codepen.io/yuyu0905/pen/abYqmjJ)|
| yukon#2618 | [Codepen](https://codepen.io/ukowork/pen/oNqEzoe) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/poLaEQv?editors=1010) |
| Joechiboo#3960 | [Codepen](https://codepen.io/joe-chiboo/pen/eYMVdwB) |
|HedgehogKU|[CodePen](https://codepen.io/hedgehogkucc/pen/wvmyowL?editors=1010)|
|Kimi#2092 |[CodePen](https://codepen.io/a3216lucy/pen/yLKvaMm)|
|ねこ*#9385|[Codepan](https://codepen.io/kunpao0104/pen/eYMVBpv)|
|小夜#3809|[Codepan](https://codepen.io/Naito_K/pen/ZExrpxb?editors=0010)|
|IreneLee#7932|[Codepan](https://codepen.io/ntjtcxpt-the-animator/pen/eYMVBPy?editors=1010)|
|YenYing#4029|[Codepan](https://codepen.io/yenying0804/pen/oNqEYMm?editors=0010)|
|andersonshen#4675|[Codepan](https://codepen.io/luxyenni-the-bold/pen/LYdQbwv)|
|座標33129#8748|[Codepan](https://codepen.io/ad80352/pen/MWVQKgd)|
小班#3324|[Codepan](https://codepen.io/jlhung168/pen/ExEQZmM)|
seijo #1585|[Codepan](https://codepen.io/SeijoHuang/pen/OJvQWvg?editors=1010)|
| moitw | [codepan](https://codepen.io/tsuifei/pen/bGvLBKp?editors=1010) |
| ----------------------- | -------------------------------------------------------------------- |
| 小熊#0685 | [codepan](https://codepen.io/YuHan0704/pen/LYdQxqG) |
| Vivi0225#3634 | [Codepen](https://codepen.io/vivian820225/pen/LYdQxMG) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/KKoQNpV) |
| 葉秋#2335 | [Codepen](https://codepen.io/as880074/pen/XWEZMWr) |
| Yihan#5560 | [Codepen](https://codepen.io/h513hh513h/pen/PoRQWrO?editors=0010) |
| YJ#1839 | [Codepan](https://codepen.io/cshjufxc/pen/GRxQWrQ) |
| Midnightdinner#6220 | [Codepen](https://codepen.io/woowooyong/pen/KKoQWGK) |
| EvaLin#4546 | [Codepen](https://codepen.io/evalin0316/pen/VwXQpQr) |
| LEO#7779 | [Codepen](https://codepen.io/nekorice/pen/poLaeGJ) |
| React-慧茹(拉拉醬)#3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/XWEZRWM) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/PoRQmWr) |
| count1count2#9636 | [codePen](https://codepen.io/souhakusou/pen/gOevWvY?editors=1010) |
| kevinhes#2881 | [CodePen](https://codepen.io/kevinhes/pen/yLKvXoE?editors=1010) |
| Otis#8455 | [CodePen](https://codepen.io/humming74/pen/gOevRBR) |
| shin#5792 | [CodePen](https://codepen.io/hah1030/pen/yLKvXRQ?editors=1010) |
| IceSam#7836 | [Codepen](https://codepen.io/sam-hsu/pen/XWEZgwv) |
| easton#3863 | [Codepen](https://codepen.io/EastonIsCodingNow/pen/YzaexwV) |
| Chaim#5739 | [Codepen](https://codepen.io/hgit915/pen/KKoQvvL) |
| JimHwang#3594 | [Codepen](https://codepen.io/jimh1129/pen/KKoQvBP) |
| Claire#2116 | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/PoRQKxx) |
| Dylan_Lin#7320 | [codePen](https://codepen.io/lin-dylan/pen/ZExrJLz) |
| 陳sam#9117 | [codepen](https://codepen.io/euldpliv/pen/xxWYLBr) |
| 芝麻凜#1627 | [codepen](https://codepen.io/bardkidd/pen/GRxQvVw?editors=0010) |
| DaleHsu#0355 | [codepen](https://codepen.io/dale_hsu/pen/LYdQzGd) |
| charlottelee849#0366 | [codepen](https://codepen.io/charlotte-lee/pen/KKoQXWM) |
| Stanley#2505 | [Codepen](https://codepen.io/bigbearada/pen/gOevGeY) |
| Li-Ninja#0471 | [Codepen](https://codepen.io/li-ninja/pen/yLKvzWz) |
| BEAN#8402 | [Codepen](https://codepen.io/Beanhuang/pen/LYdQONK?editors=1010) |
| Anson #3594 | [Codepen](https://codepen.io/huanmingchang/pen/QWmQOvO?editors=1010) |
| Cofcat#9226 | [Codepen](https://codepen.io/cofcat456/pen/zYWRPZy) |
| leoneboy#0851 | [Codepen](https://codepen.io/Leoneboy/pen/OJvQOjp?editors=0010) |
| 時雨#8837 | [Codepen](https://codepen.io/jjustin-35/pen/rNdJYpo) |
| Viva#2816 | [Codepen](https://codepen.io/viva-chan/pen/OJvQOrx?editors=1111) |
| JessSong#5050 | [Codepen](https://codepen.io/jssanji03/pen/VwXQrJm) |
| Kelvin#3296 | [Codepen](https://codepen.io/kelvinchang/pen/GRxQyKv) |
| Mr.Sean#3825 | [Codepen](https://codepen.io/sean_1215/pen/xxWYPQx) |
| 龜人#7299 | [Codepen](https://codepen.io/dullshen/pen/dymdVBE) |
| 紅豆豆#0518 | [Codepen](https://codepen.io/zoseqlpc/pen/ZExrvKz?editors=0010) |
| 真．穎旻粉撕#4995 | [Codepen](https://codepen.io/gbnbihif/pen/LYdQezW?editors=1010) |
| GL#2256 | [Codepen](https://codepen.io/4genie/pen/vYRdppp?editors=0010) |
| TedWang | [Codepen](https://codepen.io/wangtaiyan/pen/NWYyXdE?editors=0010) |
| Ryder#7398 | [Codepen](https://codepen.io/rider159159/pen/vYRdpVR?editors=1010) |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/xxWYpNr) |
| Zihur#7755 | [Codepen](https://codepen.io/Zihur/pen/jOzZZNE?editors=1010) |
| Yushi #3972 | [Codepen](https://codepen.io/yus3/pen/VwXQQjG) |
| 雅帆 | [Codepen](https://codepen.io/yafanchung/pen/NWYyywG?editors=1010) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/WNzMMgG) |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/gOevvOq) |
| Sylvia-H #0024 | [CodePen](https://codepen.io/Cosmosheart/pen/dymdmPB) |
| kyle890721#1016 | [CodePen](https://codepen.io/KYLE890721/pen/dymdmOb) |
| POKA #2168 | [CodePen](https://codepen.io/POKAHSIAO/pen/dymdmZP?editors=0110) |
| 鉛筆 #7763 | [CodePen](https://codepen.io/zoeguava/pen/wvmymEP?editors=1010) |
| Renren #8437 | [CodePen](https://codepen.io/ehren-chen/pen/mdxXxvW) |
| anby#7112 | [CodePen](https://codepen.io/andy-ch-bo-an/pen/mdxXxNw) |
| crowley#7180 | [CodePen](https://codepen.io/pon88/pen/bGvLjeq?editors=0110) |
| Mitour#0672 | [CodePen](https://codepen.io/mitour/pen/gOevQYp?editors=0010) |
| Evachan#5729 | [CodePen](https://codepen.io/Eva-go/pen/MWVQzaQ?editors=1010) |
| Mickey Hsu #9693 | [CodePen](https://codepen.io/kikmiao1995/pen/YzaeeeB) |
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/abYqPJd)
|aki|[codepen](https://codepen.io/aki168/pen/jOzZXwJ) |
| JC#8658 | [CodePen](https://codepen.io/jcsamoyed/pen/gOevZXz)|
| 露易莎#7673 | [Codepen](https://codepen.io/louisa-lin/pen/mdxXaQK) |
| 喬喬#2824 | [Codepen](https://codepen.io/joanne-wei/pen/BarYvdP?editors=1010) |
| JimmyChang#5558 | [Codepen](https://codepen.io/JimmyChangWenChi/pen/mdxXvOa?editors=1010) |
|吉利#3810|[codepen](https://codepen.io/gillianyy/pen/VwXQRQL)|
| Nico#8739 | [Codepen](https://codepen.io/Nicof2e/pen/gOevEGw) |
| Shani#4593 | [Codepen](https://codepen.io/ShaniMa/pen/QWmQPyZ) |
| 薯餅#3581 |[codepen](https://codepen.io/ColdingPoTaTo/pen/mdxXgBp) |
| k.sin#3115 | [Codepen](https://codepen.io/sin588/pen/dymdEpK?editors=0010) |
| 彼得#1923 | [Codepen](https://codepen.io/shiou-ho/pen/XWEZLEo) |
| Neal#0665 | [Codepen](https://codepen.io/neallkf/pen/GRxQbro?editors=1010) |
| Neuf#3083 | [Codepen](https://codepen.io/yifanneuf/pen/ZExrdqm?editors=1010)|
| hungya#0773 | [Codepen](https://codepen.io/hungya777/pen/ExEEYob) |
| 史蒂夫#5075 | [Codepen](https://codepen.io/TaroPanda/pen/VwXQaJo) |
| Chelly#6129 | [Codepen](https://codepen.io/chellyhsu/pen/bGvvboG) |
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/YzaaPJE)|
|hobby#6565|[codepen](https://codepen.io/hobbyling/pen/qBooOWQ)|
|yiwun#0953|[codepen](https://codepen.io/kagamiakira_IBUN/pen/NWYYxqM)|
|yoshidc#0455|[codepen](https://codepen.io/yoshiyyc/pen/oNqqNNV)|
|Kunda#2800|[codepen](https://codepen.io/kunda0818/pen/mdxxwVd?editors=1010)|
|east#4003|[codepen](https://codepen.io/EastM/pen/ZExxyLx?editors=1010)|
|山貓(焜)#7041|[codepen](https://codepen.io/pen?template=abYYLBw)|
| larahuang#8309 | [Codepen](https://codepen.io/lara1105huang/pen/RwMMVvO) |
| zzly#9134 | [Codepen](https://codepen.io/ly00/pen/NWYYwKr) |
| Shau#6400 | [Codepen](https://codepen.io/shau-chen/pen/wvmmPeo) |
|眼睛 #0314 | [Codepen](https://codepen.io/thrizzacode/pen/eYMMRwx) |
|灰塵貓#7994|[Codepen](https://codepen.io/rjk66268/pen/wvmmRem?editors=1011)|
|Murmurline#6969|[Codepen](https://codepen.io/murmurline/pen/mdxxowy)|
|Robert Lo#9653|[Codepen](https://codepen.io/Robert-Lo/pen/rNddRwv)|
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/qBooxVx) |
| MarsKuo#6015 | [Codepen](https://codepen.io/MarsKuo/pen/qBoYWrP) |
|Tsuei#9284|[CodePen](https://codepen.io/AlbertoLL/pen/abYGzpo)|
|RayRayHuang#1998|[CodePen](https://codepen.io/hongrueihuang/pen/oNqdgaB)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/bGvMdGO)|
| Carol Li #2269 | [Codepen](https://codepen.io/carolli834/pen/xxWjGJP) |
| 蘇蘇 #0426 | [Codepen](https://codepen.io/sabine1123/pen/ExELVLd) |
| NinaKuo#3332 |[Codepen](https://codepen.io/ninakuo0814/pen/abYGqwp)|
| john21429#9434 |[Codepen](https://codepen.io/john21429/pen/oNqdyXW)|
| Josh DB#3366 |[Codepen](https://codepen.io/joshjong/pen/wvmjdJN)|
| 許揚民 Evan#4546 |[Codepen](https://codepen.io/gitevanhsu/pen/LYdmaVr?editors=1010)|
| 黑白兔#0684 |[Codepen](https://codepen.io/johnny329/pen/poLVYdP)|
| Pandaa #7740 |[Codepen](https://codepen.io/pandaachu/pen/ZExoZrw)|
| Rikku#1756 |[Codepen](https://codepen.io/rikkubook/pen/yLKjWrO)|
| Wins#8457 |[Codepen](https://codepen.io/winszhuang/pen/vYRjqMY)|
|Judy☻#7874|[codepen](https://codepen.io/hsiaohan/pen/PoRaYNe?editors=1010)|
| Wendy Chang#8310 |[Codepen](https://codepen.io/Zhangbun/pen/zYWjZwV) |
|夕璇#5662|[Codepen](https://codepen.io/SiShiuan/pen/dymKyNQ?editors=1010) |
|emma#3398|[Codepen](https://codepen.io/itsems/pen/eYMKmLo?editors=1010) |
|我是誰|[codepan](https://codepen.io/wei-nie/pen/XWEYjJP?editors=1011)|
| 咻蹦#1526 |[codepan](https://codepen.io/emmasyu/pen/KKoegKy)|
| Emily Hsi #9066 |[codepan](https://codepen.io/EmilyHsi/pen/QWmQQLW)|
| james#1443 |[codepan](https://codepen.io/clothn0105700/pen/mdxKRWg?editors=0010)|
| 阿暟|[codepen](https://codepen.io/patrickrrr007/pen/MWVXJMQ?editors=1010)|
| ryo#0160|[codepen](https://codepen.io/ryo72/pen/ExERWKG)|
| Louise|[codepen](https://codepen.io/LouiseHuang/pen/abYKWNd)|
| Sabrina77#1675 |[codepen](https://codepen.io/sabrina-huang/pen/RwMJddX)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/ZExRPZa)|
|Justin|[CodePen](https://codepen.io/just-perfect/pen/LYdBpvX)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/RwMByLN)
|Cookie SSS#6991|[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/jOzvbGO?editors=1010)
|Rocker#6235|[Codepen](https://codepen.io/RockerLi/pen/YzaOGoX)
| VicSun | [Codepen](https://codepen.io/hsuan333/pen/eYMLvOR?editors=1010)|
| 雪莉#4827 | [Codepen](https://codepen.io/utshang216/pen/JjLmjMN)|
|Frank%5177|[codepen](https://codepen.io/Frankhu5150/pen/VwXEbmY?editors=0110)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/poLxwNm?editors=1010)|
|hsiuhsiu #7412|[CodePen](https://codepen.io/hsiuhsiu/pen/KKoGyQO?editors=1010)|
|Mori#5582|[CodePen](https://codepen.io/flower9312/pen/poLxpZP)|
|Maxxxxxxxxxxx#9711|[CodePen](https://codepen.io/MaxHarry/pen/VwXEBYP?editors=0110)
|魚魚#1220|[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/vYRVPMj)
|Rose Wu#1669|[CodePen](https://codepen.io/Rose-Wu/pen/vYRVMpb)
|SunnyCheng#4113|[CodePen](https://codepen.io/Sunny0509/pen/QWmZXJR?editors=1010)
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/zYWMQdL)|
|Emily #3648 |[CodePen](https://codepen.io/flien/pen/yLKqppv)|
|fannnny #7112 |[CodePen](https://codepen.io/fannyHO/pen/ExErjPb?editors=0010)|
|eching#9183 |[CodePen](https://codepen.io/echin/pen/RwMvMOp?editors=1010)|
|SleepWalk#1635 |[CodePen](https://codepen.io/arthurliinn/pen/mdxodjr)|
|Eileen#6454 |[CodePen](https://codepen.io/Eileen-io/pen/KKoEwaJ)|
|ninipopo#7983 |[CodePen](https://codepen.io/Robinnini/pen/RwMdoVq)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/vYMaqBK)