---
# System prepended metadata

title: "\U0001F3C5 Day 9 ｜元件拆分練習"
tags: [2023 React 入門攻略工作坊]

---

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/gOQZbXY?editors=0010)，將重複的部分（`.col-lg-6`）拆分為元件，並使用 props 讓呈現結果相同。


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

<!-- 解答： 
```
function PostCard({post}) {
  return (<div className="col-lg-6">
        <article className="card mb-3">
  <div className="row g-0">
    <div className="col-4">
      <img  src={post.img_url} alt={post.title} className="img-fluid rounded-start h-100" />
    </div>
    <div className="col-8">
      <div className="card-body">
        <h5 className="card-title">{post.title}</h5>
        <p className="card-text">{post.description}</p>
        <time className="card-text"><small className="text-body-secondary">{post.created_at}</small></time>
      </div>
    </div>
  </div>
</article>
      </div>)
}

function App() {
  const postData = [...]
  return (
    <div className="container">
      <div className="row">
      {postData.map(post => <PostCard key={post.id} post={post}/>)}
        </div>
    </div>
  );
}
      
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
```
-->


回報區
---


|  #  | Discord  | CodePen / 答案                                         |
|:---:|:-------- |:------------------------------------------------------ |
| 1 | Evan | [codepen](https://codepen.io/evanz1215/pen/VwqZBgq) |
| 2 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/XWorBvV) |
| 3 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/yLGBxLX) |
| 4 | yuchih | [Codepen](https://codepen.io/hijachu/pen/MWZgqeO?editors=1010) |
| 5 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/KKbPxzm) |
| 6 | LiShang | [Codepen](https://codepen.io/LiShang/pen/YzdKOrK) |
| 7 | HsienLu | [Codepen](https://codepen.io/Hsienlu/pen/RwEbYQP?editors=0011) |
| 8 | smalljie | [Codepen](https://codepen.io/smalljie/pen/KKbPxav) |
| 9 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/NWeKLbb) |
| 10 | shcopy | [Codepen](https://codepen.io/shcopy/pen/RwEbBqd) |
| 11 | Wendy3 | [Codepen](https://codepen.io/wendy03/pen/OJrLojX) |
| 12 | Sui | [Codepen](https://codepen.io/suihsilan/pen/poqzOQV?editors=0010) |
| 13 | Alpha | [Codepen](https://codepen.io/alphatero/pen/dywbgoG) |
| 14 | cataska | [Codepen](https://codepen.io/lovecankill/pen/QWzLZjx) |
| 15 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/OJrLBNx) |
| 16 | NoZ | [Codepen](https://codepen.io/fgfjgror/pen/PoXYyPK?editors=0010) |
| 17 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/xxmKyEb) |
| 18 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/PoXYyNK?editors=0011) 
| 19 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/XWoryWK)
| 20 | David0799 | [Codepen](https://codepen.io/David0799/pen/jOXNvMm)
| 21 | MotoRin | [Codepen](https://codepen.io/sakimoto/pen/poqzqEr) |
| 22 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/jOXNXaL) |
| 23 | Aden | [Codepen](https://codepen.io/Osases/pen/GRPKzRr) |
| 24 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/poqzGvO?editors=0010) |
| 25 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/NWeKogz?editors=0010) |
| 26 | collinkao | [Codepen](https://codepen.io/collin0825/pen/rNoBPZa?editors=0010) |
| 27 | Kaya | [Codepen](https://codepen.io/laron9486/pen/WNLeaYP)  |
| 28 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/bGObZWP?editors=1010) |
| 29 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/YzdKgEj?editors=0010) |
| 30 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/GRPKebb?editors=1010) |
| 31 | 汪汪 | [Codepen](https://codepen.io/hunwooooof/pen/rNoBbrZ) |
| 32 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/bGObJag?editors=1010) |
| 33 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/QWzLRJY?editors=0011) |
| 34 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/KKbPjdP) |
| 35 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/MWZgRPX?editors=0010) |
| 36 | connieK | [Codepen](https://codepen.io/eaksloky-the-sans/pen/oNJvrWE?editors=0010) |
| 37 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/mdabZog) |
| 38 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/poqzMBV) |
| 39 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/VwqwZXp?editors=1010) |
| 40 | Steve Tseng | [Codepen](https://codepen.io/hifly0921/pen/BavaBxx) |
| 41 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/wvRvBzG) |
| 42 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/Yzdzqwq) |
| 43 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/bGOGpMK) |
| 44 | Kent | [Codepen](https://codepen.io/labkunz/pen/zYyYBgP?editors=0010) |
| 45 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/RwEwGKX) |
| 46 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/MWZWKZG?editors=0010) |
| 47 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/poqoRQy?editors=0010) |
| 48 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/JjwjNXP?editors=1010) |
| 49 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/QWzWEPy) |
| 50 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/bGOGYXN?editors=0010) |
| 51 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/wvRvXJP) |
| 52 | 妤ㄦ | [Codepen](https://codepen.io/bmtuepzo-the-sans/pen/eYbYLaj?editors=0010) |
| 53 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/QWzWZLO?editors=0010) |
| 54 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/bGOGmWa?editors=0010) |
| 55 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/bGOGxWp?editors=0010) |
| 56 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/XWoWBoR?editors=0010) |
| 57 | azami | [Codepen](https://codepen.io/azami/pen/poqorqp) |
| 58 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/Jjwjwdv) |
| 59 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/abPbevE?editors=0010) |
| 60 | Che1z | [Codepen](https://codepen.io/Shih-Min-Hung/pen/dywyxXg)|
| 61 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/ExGxqXE)|
| 62 | Iris | [Codepen](https://codepen.io/iris831206/pen/xxmbbyQ?editors=0010) |
| 63 | Liam | [Codepen](https://codepen.io/liamkkobe/pen/YzdPXbZ?editors=0110) |
| 64 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/wvRBzVo) |
| 65 |Alice | [Codepen](https://codepen.io/AliceZhao/pen/dywPNyN?editors=0010) |
| 66 |SKey | [Codepen](https://hackmd.io/f2dA8KRGS9mDM9pumk_-Xw?view) |
| 67 | Jasmin | [Codepen](https://codepen.io/thejasmin/pen/zYyxLmK) |
| 68 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/abPzaby?editors=0010) |
| 69 | Jie016 | [codepen](https://codepen.io/Jie-Kuo/pen/VwqwLYe) |
| 70 | Lulu | [codepen](https://codepen.io/Lin-Lulu/pen/QWzWNOV?editors=0010) |
| 71 | Emily4869 | [codepen](https://codepen.io/aptx4869Emily/pen/LYMEKRR?editors=0010) |
| 72 | curry | [Codepen](https://codepen.io/Ted19851223/pen/BavNzPq?editors=1010) |
| 73 | Ken| [Codepen](https://codepen.io/Ken720053/pen/ZEVGLvz?editors=0010) |
| 74 | Yiren | [Codepen](https://codepen.io/Yiren_Liou/pen/OJrVpXq) |
| 75 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/OJrVpmY) |
| 76 | Tian | [Codepen](https://codepen.io/ccyy915/pen/xxmGYGa) |
| 77 | Cami | [Codepen](https://codepen.io/fayevivi/pen/MWZapbw?editors=0010) |
| 78 | hungya | [Codepen](https://codepen.io/hungya777/pen/NWeGXOK?editors=1010) |
| 79 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/GRPpMPo?editors=0110) |
| 80 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/RwEPXev) |
| 81 | Overy | [Codepen](https://codepen.io/tupbsair-the-vuer/pen/JjwYmRB?editors=0010) |
| 82 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/yLGOowL) |
| 83 | DavidTsai | [Codepen](https://codepen.io/David-Tsai/pen/YzdqPmL?editors=0010) |
| 84 | Owen | [Codepen](https://codepen.io/owen-dong/pen/jOXqRgj?editors=0010) |
| 85 | Jujube | [Codepen](https://codepen.io/tendayling/pen/LYMZVaB) |
| 86 | EdHsu | [Codepen](https://codepen.io/Ed-Hsu/pen/RwEROzL) |
| 86 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/LYMRLOg?editors=0011) |
| 87 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/rNoyEza?editors=0110) |
| 88 | Lydia | [Codepen](https://codepen.io/ling-chen-the-flexboxer/pen/GRzRwvR?editors=0010) |


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