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

在 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)，並試著定義三個不同的子元件練習來完成以下畫面。
示意圖：

完成畫面：

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

<!-- 解答：

// 建立子元件，並在父元件中引入
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>
}

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/jENGrPg) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/ZYzoMyg?editors=1010) |
| 3 | Noy(Toad) |[Codepen](https://codepen.io/MochiCodingPen/pen/NPKMZew) |
| 4 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/jENKmYP) |
| 5 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/wBwXdOB) |
| 6 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/QwLxvoN) |
| 7 | han | [Codepen](https://codepen.io/iamHanCheng/pen/QwLxvzy) |
| 8 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/jENKwNV?editors=0110) |
|9|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/QwLxgWK?editors=1011)|
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/EaYRXme?editors=0110) |
| 11 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/LEPrLrK) |
| 12 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/pvzKwQL)|
| 13 | Nocab |[Codepen](https://codepen.io/PeihanWang/pen/zxOazzL?editors=1010)|
| 14 | Toung | [Codepen](https://codepen.io/Toung/pen/dPbKzwW) |
| 15 | Amanda | [Codepen](https://codepen.io/cym199922/pen/QwLxqVj) |
| 16 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/bNbKYVp) |
| 17 | Clove | [Codepen](https://codesandbox.io/p/sandbox/2rtvhr) |
| 18 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/LEPrmEE) |
| 19 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/ByBVrgR)|
| 20 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/WbeymXR)|
| 21 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/ByBVEGx)|
| 22 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KwPeLbV?editors=0110)|
| 23 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/MYgXEXb)|
| 24 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/yyBqRgm)|
| 25 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/gbYjVVX)|
| 26 |Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/JoPaOEp?editors=1010) |
| 27 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/PwYywqq) |
| 28 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/qEWGzxg?editors=1111) |
| 29 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/LEYPbvy?editors=1010) |
| 30 | kun._c8_shake_it | [Codepen](https://codepen.io/barry91205/pen/PwoqOXa) |
| 31 | yun-lin | [Codepen](https://codepen.io/yunlinhsu/pen/PwoZXOe?editors=1011) |
| 32 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/LEYNKxM) |
| 33 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/emYdXwy?editors=1011) |
| 34 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/KwKmvdK) |
| 35 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/EaxvLxx?editors=0110) |
| 36 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/ogNPzVE?editors=1111) |
| 37 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/raaZYKL?editors=0010) |
| 38 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/OPVqadE) |
| 39 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/jEWrMqE) |

- 快速複製格式：

| 0 | user | [Codepen]() |