在撰寫 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} />

### JSX 中的 style
在 JSX 中使用 style 設定樣式，需在大括號內使用物件的方式設定，物件內的樣式屬性用駝峰命名法（camelCase）撰寫。

例如：

const element = <div style={
  {
    backgroundColor: 'black',
    color: 'white'
  }
 }>
    <h2> Hello！</h2><h2> 你好！</h2>
</div>

### JSX 中的 for
在 JSX 中使用到 for 屬性時，需注意要將屬性名稱改為 htmlFor。
例如：

<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 中的註解。

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

<!-- 解答：
練習一：

// 練習區塊
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>;
// 區塊結束

-->

回報區
---

| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 1 | Sonia | [練習一](https://codepen.io/YUJOU/pen/wBwpqQK?editors=1011) / [練習二](https://codepen.io/YUJOU/pen/xbKpLMJ?editors=1011) |
| 2 | LinaChen | [練習一](https://codepen.io/LinaChen/pen/RNbxLYG) / [練習二](https://codepen.io/LinaChen/pen/dPbJVQY) |
| 3 | Nocab | [練習一](https://codepen.io/PeihanWang/pen/raBpGPR?editors=1011) / [練習二](https://codepen.io/PeihanWang/pen/QwLaqRx?editors=1010) |
| 4 | 泊岸 | [練習一](https://codepen.io/qoq77416416/pen/qEWpVWO?editors=1011) / [練習二](https://codepen.io/qoq77416416/pen/KwPZypr?editors=1010) |
| 5 | 嚼勁先生 | [練習一](https://codepen.io/James520284/pen/xbKpXex) / [練習二](https://codepen.io/James520284/pen/QwLaONZ) |
| 6 | 4chan| [練習一](https://codepen.io/ijuolaqc-the-looper/pen/gbYoXrX) / [練習二](https://codepen.io/ijuolaqc-the-looper/pen/WbedXRa) |
| 7 | Toung | [練習一](https://codepen.io/Toung/pen/OPLzOJO) / [練習二](https://codepen.io/Toung/pen/xbKpPgZ) |
| 8 | 毛巾 | [練習一](https://codepen.io/bqdcjboa-the-solid/pen/pvzpdEY) / [練習二](https://codepen.io/bqdcjboa-the-solid/pen/MYgrObd) |
| 9 | Satar | [練習一](https://codepen.io/SatarKuo/pen/QwLaOpz) / [練習二](https://codepen.io/SatarKuo/pen/WbedXzP?editors=0010) |
|10|Hailey|[練習一](https://codepen.io/sxbokfja-the-flexboxer/pen/emOyerN?editors=0011) / [練習二](https://codepen.io/sxbokfja-the-flexboxer/pen/raBpYvO?editors=1011)|
| 11 | 邵 | [練習一](https://codepen.io/ukscrlno-the-typescripter/pen/qEWpVKr?editors=1011) / [練習二](https://codepen.io/ukscrlno-the-typescripter/pen/emOyeLp?editors=1011) |
| 12 | tim | [練習一](https://codepen.io/jskrtivy-the-animator/pen/bNbaYLQ?editors=1010) / [練習二](https://codepen.io/jskrtivy-the-animator/pen/OPLzOoB) |
| 13 | Jasmine | [練習一](https://codepen.io/Jasmine-Lin-the-vuer/pen/azoEVWd) / [練習二](https://codepen.io/Jasmine-Lin-the-vuer/pen/JoPMONK) |
| 14 | Yen | [練習一](https://codepen.io/yuxxxlouyen/pen/dPbJdbL) / [練習二](https://codepen.io/yuxxxlouyen/pen/PwYEQPZ) |
| 15 | Amanda | [練習一](https://codepen.io/cym199922/pen/ogvpqMw) / [練習二](https://codepen.io/cym199922/pen/dPbJmaZ) |
| 16 | Aaron 謝宗佑 | [練習一](https://codepen.io/aaron-hsieh/pen/qEWpYRx) / [練習二](https://codepen.io/aaron-hsieh/pen/raBpvmm) |
| 17 | Noy(Toad) | [練習一](https://codepen.io/MochiCodingPen/pen/ByBJPYP?editors=1111) / [練習二](https://codepen.io/MochiCodingPen/pen/KwPZBeL?editors=1011)
| 18 | Kaya | [練習一](https://codepen.io/kayaribi/pen/YPKYORg) / [練習二](https://codepen.io/kayaribi/pen/YPKYJZz)
| 19 | GAVI| [練習一](https://codepen.io/qbafldcv-the-scripter/pen/emOyVjQ?editors=1111) / [練習二](https://codepen.io/qbafldcv-the-scripter/pen/vEBpdzG?editors=1010)|
| 20 | Clove_墨 | [練習一](https://codesandbox.io/p/sandbox/mm4k9y) / [練習二](https://codesandbox.io/p/sandbox/mm4k9y) |
| 21 | MY | [練習一](https://codepen.io/ahmomoz/pen/OPLgXpP) / [練習二](https://codepen.io/ahmomoz/pen/JoPJMjV) |
| 22 | Johnson | [練習一](https://codepen.io/crpbugqy-the-typescripter/pen/ZYzrXXx) / [練習二](https://codepen.io/crpbugqy-the-typescripter/pen/XJrZeeB) |
| 23| 爆漿 | [練習一](https://codepen.io/nvdwwlbx-the-vuer/pen/ogvqWZQ?editors=1111) / [練習二](https://codepen.io/nvdwwlbx-the-vuer/pen/jENzmzB?editors=1011) |
| 24| Rogan | [練習一](https://codepen.io/RoganHsu/pen/emOMjxa) / [練習二](https://codepen.io/RoganHsu/pen/pvzLZYq) |
| 25 | 阿佑 | [練習一](https://codepen.io/ans9323052/pen/zxOWyao) / [練習二](https://codepen.io/ans9323052/pen/qEWoLGp) |
| 26 | mercury2508. | [練習一](https://codepen.io/Mercury2508/pen/xbKWQow) / [練習二](https://codepen.io/Mercury2508/pen/JoPLwoX) |
| 27 | Ariel | [練習一](https://codepen.io/ariel0510/pen/GgKdyNO?editors=1011) / [練習二](https://codepen.io/ariel0510/pen/XJrqVzb?editors=1011) |
| 28 | 蘑菇星星 | [練習一](https://codepen.io/brrrieon-the-vuer/pen/azoGxPm?editors=1011) / [練習二](https://codepen.io/brrrieon-the-vuer/pen/mybLYbj?editors=1010) |
| 29 | Rochel | [練習一、二](https://codepen.io/rochelwang1205/pen/zxOagvb) |
| 30 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/JoPaoyg?editors=0011)|
| 31 | Fabio20 | [練習一](https://hackmd.io/QDFTdcQFTlK7tNnDDhqmZw) / [練習二](https://codepen.io/fabio7621/pen/emOLGVm?editors=1010) |
| 32 | Joannehu | [練習一](https://codepen.io/nelbabkv-the-flexboxer/pen/XJrwZZR?editors=1011) / [練習二](https://codepen.io/nelbabkv-the-flexboxer/pen/qEWGKWr?editors=1010) |
| 33 | kun._c8_shake_it | [練習一](https://codepen.io/barry91205/pen/bNGbZXd) / [練習二](https://codepen.io/barry91205/pen/NPWKmKG?editors=1010) |
| 34 |yun-lin| [練習一](https://codepen.io/yunlinhsu/pen/GgRgPda?editors=1010) / [練習二](https://codepen.io/yunlinhsu/pen/QwWwzzK?editors=1010) |
| 35 | jinliu214 | [練習一](https://codepen.io/jinliu214/pen/MYWwmPB?editors=0011) / [練習二](https://codepen.io/jinliu214/pen/JojdNxg?editors=0011) |
| 36 | yaoling.liang | [練習一](https://codepen.io/Yao-Ling-L-/pen/dPyMzOX?editors=1010) / [練習二](https://codepen.io/Yao-Ling-L-/pen/yyLOoVG) |
| 37 | KOMATSU PEI | [練習一](https://codepen.io/Komatsu2021/pen/azbzeEE) / [練習二](https://codepen.io/Komatsu2021/pen/LEYEwer?editors=1010) |
| 38 | 郭芙蘭 | [練習一](https://codepen.io/flora_Kuo/pen/WbNGRdw?editors=1011) / [練習二](https://codepen.io/flora_Kuo/pen/VYwKPxg?editors=1111) |
| 39 | 姜承 | [練習一](https://codepen.io/Troy0718/pen/PwoadZx?editors=1011) / [練習二](https://codepen.io/Troy0718/pen/azbKadJ?editors=1010) |
| 40 | chris | [練習一](https://codepen.io/chris-chen-the-selector/pen/xbxMgyj?editors=1010) / [練習二](https://codepen.io/chris-chen-the-selector/pen/jEOdBNy?editors=1010) |
| 41 | shin_kai | [練習一](https://codepen.io/KAI-SHIN-the-animator/pen/VYeYOqd) / [練習二](https://codepen.io/KAI-SHIN-the-animator/pen/azdzgXQ) |
<br>

- 快速複製格式：

| 0 | user | [練習一]() / [練習二]() |