# 🏅Day27 - React 元件練習 (4) - 元件拆分練習

今天要練習的是拆分元件的技巧，將多個重複區塊做成元件，以此來簡化程式結構
## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/JjgeKjV?editors=1010)，將重複的部分（`.col-lg-6`）拆分為元件，並使用 props 讓呈現結果相同。

<!-- 解答：

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 />);

-->

| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/LEZRBRM) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYOemOQ?editors=1010) |
| 7Red | [codepen](https://codepen.io/cch2655/pen/ogLWePR) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/XJKRaoP) |
| 叮咚 | [codepen](https://codepen.io/pinchieh-lin/pen/NPrjvMb) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/raLmzXq?editors=1011)|
| cks40660| [CodePen](https://codepen.io/CKS40660/pen/LEZyzNY)|
| Melanie| [CodePen](https://codepen.io/pnrcspte-the-animator/pen/PwzmJzp)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/GgqmvGJ)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/ogLWGmY)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/emzWGxq)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/wBWdrMe?editors=0010)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/NPrjwaV) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JoKNOpy?editors=0010) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=gbMWvbw) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/QwEvrEN?editors=0010) |
| wind | [Codepen](https://codepen.io/wind7y/pen/MYemXrZ) |
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/raLmrNN)|
| Percy |[Codepen](https://codepen.io/Percy-Ku/pen/qENRPGP?editors=0010)|
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/Eaympem?editors=1010)|
| FangFang |[Codepen](https://codepen.io/Fang-the-selector/pen/XJKRymb?editors=0010)|
| 登登登 |[Codepen](https://codepen.io/Duncanin/pen/EaymOgK?editors=0010)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/yyJbQoL)|
| andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/azZWPRR?editors=1010)|
| Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/QwEvzQG?editors=1011)|
| Rogan |[Codepen](https://codepen.io/RoganHsu/pen/bNeRGpm?editors=1010)|
| Eileen |[Codepen](https://codepen.io/Eileen-io/pen/gbMRbwJ)|
| KOMSTSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/JoKNyvw?editors=1010)|
| 平平 |[Codepen](https://codepen.io/ypinpin/pen/LEZLZBj)|
| Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/EayXyzm)|
| 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/pvbrgGR?editors=0010)|
|ZoeKang|[Codepen](https://codepen.io/byehywmx-the-animator/pen/dPXzXmW)|
|舜仁|[Codepen](https://codepen.io/shunjen/pen/ZYOJBGa)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/KwMvNav)|
|JiaMori|[Codepen](https://codepen.io/jiamori/pen/dPXVWXw)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/emzGVbr?editors=0011)|
|Wen|[Codepen](https://codepen.io/jiamori/pen/dPXVWXw)|