# 🏅 Day 17 -React 基礎練習 (2) - JSX 屬性練習
在撰寫 React 會大量使用到 JSX 的部分，除了基本的樣板以外，今天也持續介紹常見的 JSX 使用，一起來練習看看吧！
### JSX 最外層只能有一個根元件
一個元件不能返回多個元素，就像一個函數不能返回多個值一樣。
錯誤示範：
```jsx=
const element = <h2> Hello！</h2><h2> 你好！</h2>
```
正確示範：
```jsx=
const element = <div><h2> Hello！</h2><h2> 你好！</h2></div>
```
### JSX 中的 class
在 JSX 同樣可以加入 class 來指定樣式，但要注意屬性名稱需改為 className。
例如：
```jsx=
const element = <div className="card"><h2> Hello！</h2><h2> 你好！</h2></div>
```
### JSX 中的屬性代入
在 JSX 中需要被視為 JavaScript 處理的部分，都需要使用大括號 {} 包住。
例如：
```jsx=
const imgUrl = "https://i.pravatar.cc/150?img=38";
<img src={imgUrl} />
```
### JSX 中的 style
在 JSX 中使用 style 設定樣式，需在大括號內使用物件的方式設定，物件內的樣式屬性用駝峰命名法（camelCase）撰寫。
例如：
```jsx=
const element = <div style={
{
backgroundColor: 'black',
color: 'white'
}
}>
<h2> Hello！</h2><h2> 你好！</h2>
</div>
```
### JSX 中的 for
在 JSX 中使用到 for 屬性時，需注意要將屬性名稱改為 htmlFor。
例如：
```jsx=
<label htmlFor="firstName">名字：</label>
<input id="firstName" type="text"/>
```
## 題目
### 練習一
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/OJKZvLr?editors=1011)，利用 products 中的資料撰寫 JSX 完成以下畫面：
<img src="https://hackmd.io/_uploads/H1ppnAlbkx.png" width="300"/>
### 練習二
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/xxvjWEL?editors=1010)，並撰寫 JSX 完成以下畫面：
備註：
- 畫面需求的 HTML 格式結構可以參考 HTML 中的註解。
<!-- 解答：
練習一：
```
// 練習區塊
const element = (
<div className="card mb-3">
<img
src={products[0].imageUrl}
className="card-img-top primary-image"
alt="主圖"
/>
<div className="card-body">
<h5 className="card-title">
{products[0].title}
<span className="badge bg-primary ms-2">{products[0].category}</span>
</h5>
<p className="card-text">商品描述：{products[0].description}</p>
<p className="card-text">商品內容：{products[0].content}</p>
<div className="d-flex">
<p className="card-text text-secondary">
<del>{products[0].origin_price}</del>
</p>
元 / {products[0].price} 元
</div>
</div>
</div>
);
// 區塊結束
```
練習二：
```
// 練習區塊
const element = <form className="p-4" style={{
background: "url('https://images.unsplash.com/photo-1600303881706-b8a373dc73c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat",
backgroundSize: "cover"
}}>
<div className="mb-3">
<label htmlFor="email" className="form-label">Email address</label>
<input type="email" className="form-control" id="email"/>
</div>
<div className="mb-3">
<label htmlFor="password" className="form-label">Password</label>
<input type="password" className="form-control" id="password"/>
</div>
<button type="submit" className="btn">Submit</button>
</form>;
// 區塊結束
```
-->
| Column 1 | Column 2 |
| -------- | -------- |
| Jin |[Codepen](https://codepen.io/Jin-L/pen/myEPdOR)|
| cks40660 |[練1](https://codepen.io/CKS40660/pen/ByzKapw) , [練2](https://codepen.io/CKS40660/pen/VYjawWj)|
| Eileen |[練1](https://codepen.io/Eileen-io/pen/zxBqxGq) , [練2](https://codepen.io/Eileen-io/pen/gbMrbrj)|
| Nooooora | [練習一](https://codepen.io/Nora-Ch/pen/LEZNEzO?editors=1111) , [練習二](https://codepen.io/Nora-Ch/pen/LEZNEgd)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/RNRawEL?editors=1111)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/LEZNYXR)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/PwzNwXv)|
| 7Red |[練習一](https://codepen.io/cch2655/pen/yyJONJb), [練習二](https://codepen.io/cch2655/pen/yyJONVX)
| 老屠 |[練習一](https://codepen.io/fsgfxvlb-the-selector/pen/PwzNqNo?editors=0011), [練習二](https://codepen.io/fsgfxvlb-the-selector/pen/qENZdNM)|
| Tetsu | [練習一](https://codepen.io/ttgchang/pen/ogLxgBG), [練習二](https://codepen.io/ttgchang/pen/yyJONXo)|
| jchunnn | [練習一](https://codepen.io/jchunnn/pen/qENZBeR?editors=1111), [練習二](https://codepen.io/jchunnn/pen/JoKXogv?editors=1010)|
| Owen He | [練習一](https://codepen.io/owen1120/pen/bNepdvB?editors=1011), [練習二](https://codepen.io/owen1120/pen/PwzNqxz?editors=1010)|
| 舜仁 | [練習一](https://codepen.io/shunjen/pen/VYjaLOY), [練習二](https://codepen.io/shunjen/pen/EayKVWq)|
| ROGAN | [練習一](https://codepen.io/RoganHsu/pen/JoKXdRa?editors=1011), [練習二](https://codepen.io/shunjen/pen/EayKVWq)|
| RUDY | [練習一](https://codepen.io/Rudy-crw/pen/OPXNJdZ?editors=1010), [練習二](https://codepen.io/Rudy-crw/pen/JoKXYmX?editors=0010)|
| andy | [練習一](https://codepen.io/ewnblckz-the-styleful/pen/emzZJov?editors=0010), [練習二](https://codepen.io/ewnblckz-the-styleful/pen/zxBqqxP?editors=1010)|
| KOMATSU PEI | [練習一](https://codepen.io/Komatsu2021/pen/WbxwNXy?editors=1011), [練習二](https://codepen.io/Komatsu2021/pen/NPrNWwM?editors=1011)|
| Melanie | [練習一](https://codepen.io/pnrcspte-the-animator/pen/MYeyaGR), [練習二](https://codepen.io/pnrcspte-the-animator/pen/ogLxxPR)|
| Jenna | [練習一](https://codepen.io/abiscc14/pen/RNRaRNa), [練習二](https://codepen.io/abiscc14/pen/WbxwxbX)|
| cindy |[練習一](https://codepen.io/a50134/pen/azZNZxd?editors=1011), [練習二](https://codepen.io/a50134/pen/emzZzPq?editors=1010)
| 7lun |[練習一](https://codepen.io/mfyvqhsn-the-bold/pen/vEKGXOW?editors=0010), [練習二](https://codepen.io/mfyvqhsn-the-bold/pen/vEKGXKd?editors=1010)
| 小懿 |[練習一](https://codepen.io/YT-the-vuer/pen/QwENEzJ?editors=0010), [練習二](https://codepen.io/YT-the-vuer/pen/JoKXKqK?editors=1011)
| Antonio |[練習一](https://codepen.io/gwhvusel-the-builder/pen/dPXMPNZ), [練習二](https://codepen.io/gwhvusel-the-builder/pen/xbOVbLr)
| FangFang |[練習一](https://codepen.io/Fang-the-selector/pen/ogLxzyE?editors=1111), [練習二](https://codepen.io/Fang-the-selector/pen/bNepBwE?editors=1010)
| Percy |[練習一](https://codepen.io/Percy-Ku/pen/QwENGmp), [練習二](https://codepen.io/Percy-Ku/pen/pvbyNLr)
| 平平 |[練習一](https://codepen.io/ypinpin/pen/ZYOWpoO), [練習二](https://codepen.io/ypinpin/pen/NPrNRQq)
| Miikaa |[練習一](https://codepen.io/Miikaa/pen/KwMzaJJ), [練習二](https://codepen.io/Miikaa/pen/vEKGgvZ)|
| 登登登 |[練習一](https://codepen.io/Duncanin/pen/qENZrOR?editors=0010), [練習二](https://codepen.io/Duncanin/pen/GgqZWjG?editors=0010)
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/QwENdJZ?editors=0011)
| 社子畢卡索 |[練習一](https://codepen.io/pen?template=ByzKWVE), [練習二](https://codepen.io/pen?template=ByzKWMg)
| wind |[練習一](https://codepen.io/wind7y/pen/emzZRLw), [練習二](https://codepen.io/wind7y/pen/zxBqzmY)|
| kuolun |[練習一](https://codepen.io/kuolun/pen/NPrNYZL), [練習二](https://codepen.io/kuolun/pen/PwzNeWB)|
| 星雪糖 |[練習一](https://codepen.io/vfpofbgm-the-scripter/pen/LEZNmEx?editors=1011), [練習二](https://codepen.io/vfpofbgm-the-scripter/pen/dPXMePW?editors=0010)|
| Leonard |[練習一](https://codepen.io/hyyfjqra-the-sans/pen/MYeyqQw?editors=0011), [練習二](https://codepen.io/hyyfjqra-the-sans/pen/dPXMqKd?editors=0010)|
| ZoeKang | [練習一](https://codepen.io/byehywmx-the-animator/pen/azZNRQR), [練習二](https://codepen.io/byehywmx-the-animator/pen/WbxwaWj)|
| 蛋白 | [練習一商品小卡](https://codepen.io/sjlu-0/pen/qENZgoQ), [練習二登入畫面](https://codepen.io/sjlu-0/pen/ByzKMxj)|
| Eric | [練習一](https://codepen.io/wc-su/pen/raLLBGY) , [練習二](https://codepen.io/wc-su/pen/RNRRbLm) |
| Wafa | [練習一](https://codepen.io/dqricwgo-the-reactor/pen/JoKKXwe?editors=1011) , [練習二](https://codepen.io/dqricwgo-the-reactor/pen/gbMMMog?editors=1010) |
| JiaMori | [練習一](https://codepen.io/jiamori/pen/RNRRjaP) , [練習二](https://codepen.io/jiamori/pen/myEEqqE) |
| Vergil | [練習一](https://codepen.io/aglgvsie/pen/ZYOBjwx) , [練習二](https://codepen.io/aglgvsie/pen/LEZbJXN) |
| tanuki | [練習一](https://codepen.io/tanuki320/pen/wBWgzrq?editors=0111) , [練習二](https://codepen.io/tanuki320/pen/VYjPmqQ?editors=0010) |
|TWLeoC|[練習一](https://codepen.io/TWLeoC/pen/QwEgYqO?editors=1111) , [練習二](https://codepen.io/TWLeoC/pen/pvbwGWL?editors=1011)|
|伊迪|[練習一](https://codepen.io/sorryFish/pen/dPXRrJW) , [練習二](https://codepen.io/sorryFish/pen/ZYOyPRY)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/XJKadRP)|
|Wen|[練習一](https://codepen.io/hsiao-kevin/pen/yyJPMMd?editors=1011) , [練習二](https://codepen.io/hsiao-kevin/pen/yyJPMom?editors=1010)|
Sign in with Wallet
Connect another wallet