# 🏅Day 24 - React 元件練習 (1) - 元件建立

在開發專案時，一定會遇到有一區塊的程式碼內容都相同，這時通常會將此區塊的程式碼拆成一個元件，提高元件的重複，亦或是將一個頁面做為一個元件來切換等等。

在 React 中建立一個 function component 非常簡單，如同定義一個函式，並在父元件中引入即可。
舉例：

function Chid() { // 子元件
  return <p> Child </p> 
}

function Example() { // 父元件
  return <div>
    Example
    <Chid />
  </div>
}

## 補充
如果要在子元件再加入其他元件，可以運用 children 這個 props 來往下加入。
舉例:

function Main({children}) {
  return <div> Main {children}</div>
}
function Child() {
  return <div> Child </div>
}

function Example() {
  return <div>
    <Main>
      <Child />
    </Main>
  </div>
}

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/mdNGMKg)，並試著定義三個不同的子元件練習來完成以下畫面。
示意圖：

完成畫面：

<!-- 解答：

// 建立子元件，並在父元件中引入
function SideBar() {
  return <div style={{ width: "30%", border: "1px solid" }}> SideBar </div>
}
function Main({children}) {
  return <div style={{ width: "70%", border: "1px solid" }}> 
    <h3>Main</h3> 
    {children}
  </div>
}
function Child() {
  return <div> Child </div>
}
function Example() {
  return <div>
    <p>這是父元件 Example</p>
    <div style={{ display: "flex" }}>
      <SideBar />
      <Main>
        <Child />
      </Main>
    </div>
  </div>
}

-->
| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/YPWGjKg) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/myERPGj) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/bNegpOy?editors=1010)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/azZpNPW) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/VYjPjYB) |
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/LEZxNaO)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/VYjPaQr)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/YPWNWZd)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/xbOgOWz?editors=0010)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/pvbRbQw)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/VYjPjdR?editors=1010)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/JoKERdz)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/LEZxRbw?editors=0010)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/azZppOL)|
| 平平 |[Codepen](https://codepen.io/ypinpin/pen/JoKEERp)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/OPXWWJG)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/yyJgXNO?editors=0010)|
| FangFang |[Codepen](https://codepen.io/Fang-the-selector/pen/azZpybQ?editors=1010)|
| cindy |[Codepen](https://codepen.io/a50134/pen/gbMgGPo?editors=0010)|
| andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/qENRPXR?editors=0011)|
| Percy |[Codepen](https://codepen.io/Percy-Ku/pen/WbxRZMm?editors=0010)|
| 登登登 |[Codepen](https://codepen.io/Duncanin/pen/jEryGzo?editors=0010)|
| 7Red |[Codepen](https://codepen.io/cch2655/pen/VYjPrMV)|
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/qENRpZw?editors=0010)|
| wind |[Codepen](https://codepen.io/wind7y/pen/jEryzeV)|
|7lun|[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/YPWNpqQ)||
|Rogan|[Codepen](https://codepen.io/RoganHsu/pen/gbMgdEW)||
| 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYeJPbd?editors=0110)|
| Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ZYOeoVM)|
| Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ByzWOJL?editors=0011)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=NPrpQvb)|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/OPXWNar?editors=1010)|
| JiaMori |[Codepen](https://codepen.io/jiamori/pen/RNRgEvz)|
| 舜仁 |[Codepen](https://codepen.io/shunjen/pen/NPrgQZr)|
|ZoeKang|[Codepen](https://codepen.io/byehywmx-the-animator/pen/ZYOJOXg)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/MYevbaE)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/yyJzvpo?editors=0010)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/GgqyvPx?editors=1010)|
| tanuki |[Codepen](https://codepen.io/tanuki320/pen/LEZevqx)|
| 伊迪 |[Codepen](https://codepen.io/sorryFish/pen/emzKNWo)|