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

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

完成畫面：

## 回報流程
將答案寫在 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 | collinkao |[codepen](https://codepen.io/collin0825/pen/rNQXWaB?editors=0010)|
| 2 | yuchih |[Codepen](https://codepen.io/hijachu/pen/NWEQbKL?editors=1010)|
| 3 | Billy.Ji |[Codepen](https://codepen.io/yaj55ushydna/pen/abQeBdd)|
| 4 | Berlin | [codepen](https://codepen.io/3qberlin/pen/mdQNOwx) |
| 5 | LiShang | [codepen](https://codepen.io/LiShang/pen/KKrONqj) |
| 6 | Wendy3 | [codepen](https://codepen.io/wendy03/pen/PoxMboQ) |
| 7 | MotoRin | [codepen](https://codepen.io/sakimoto/pen/XWyvNPj) |
| 8 | David0799 | [codepen](https://codepen.io/David0799/pen/LYXwbLy) |
| 9 | Wei_Rio | [codepen](https://codepen.io/wei_wu/pen/zYMgobZ) |
| 10 | SKey | [codepen](https://codepen.io/Dale-Chien/pen/poQMRJy)
| 11 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/KKrOaWg) |
| 12 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/qBQeRxJ?editors=0110) |
| 13 | HsienLu |[CodePen](https://codepen.io/Hsienlu/pen/mdQNRBZ?editors=1111)|
| 14 | NoZ | [codepen](https://codepen.io/fgfjgror/pen/wvQVgbz?editors=1010) |
| 15 | AYA | [codepen](https://codepen.io/NoNameNote/pen/wvQVgVo) |
| 16 | 喃喃 | [codepen](https://codepen.io/VeLario/pen/vYQogNQ?editors=0010) |
| 17 | smalljie | [codepen](https://codepen.io/smalljie/pen/LYXwxBM) |
| 18 | Evan | [codepen](https://codepen.io/evanz1215/pen/NWEQpgw) |
| 19 | cataska | [codepen](https://codepen.io/lovecankill/pen/oNQKZBN) |
| 19 | Ann Chou | [codepen](https://codepen.io/annchou_illu/pen/bGQXqwR) |
| 20 | ryan.chou | [codepen](https://codepen.io/csw8524/pen/abQeJao) |
| 21 | 羅羅 | [codepen](https://codepen.io/bjqs02/pen/bGQXWem) |
| 22 | 瑀君 | [codepen](https://codepen.io/yennnnn/pen/KKrOmNY) |
| 23 | Iris | [codepen](https://codepen.io/iris831206/pen/WNYVjpP) |
| 24 | Jie016 | [codepen](https://codepen.io/Jie-Kuo/pen/PoxMmVX) |
| 25 | Leo | [codepen](https://codepen.io/Aruminiya/pen/GRwVmPY) |
| 26 | Sui | [codepen](https://codepen.io/suihsilan/pen/rNQXwLw?editors=0110) |
| 27 | yi0863 | [codepen](https://codepen.io/YI0305/pen/XWyvgVV) |
| 28 | jasperlu005 | [codepen](https://codepen.io/uzzakuyr-the-reactor/pen/mdQNMBr) |
| 29 | HanHan | [codepen](https://codepen.io/Emma-Yang/pen/gOQVxPM) |
| 30 | billy_ti | [codepen](https://codepen.io/Ti-Show/pen/YzRmrLe) |
| 31 | ejchuang | [codepen](https://codepen.io/EJChuang/pen/ZEmgyZr) |
| 32 | 地球儀 | [codepen](https://codepen.io/dayday1222/pen/QWJeqbJ?editors=1010) |
| 33 | Yen | [codepen](https://codepen.io/TZU-HUANG-YEN/pen/LYXwzZb) |
| 34 | 王偉青 | [codepen](https://codepen.io/lovegull/pen/RwqXjPq?editors=0010) |
| 35 | besspeng | [codepen](https://codepen.io/besspengcl/pen/gOQVXRN) |
| 36 | wendy | [codepen](https://codepen.io/siaochanwu/pen/LYXwOdg)|
|37 | 汪汪 |[Codepen](https://codepen.io/hunwooooof/pen/BaGELpO)|
| 38 | 變羊魔法 | [codepen](https://codepen.io/cssf998811/pen/zYMgpMV) |
| 39 | jerry456789 | [codepen](https://codepen.io/aria198a/pen/XWyvZwp?editors=1010) |
| 40 | rainnping | [codepen](https://codepen.io/rainnping/pen/XWyvqjx) |
| 41 | aray | [codepen](https://codepen.io/ceqchksj-the-flexboxer/pen/abQeYgR?editors=0010) |
| 42 | Liam | [codepen](https://codepen.io/liamkkobe/pen/ExOqLNr) |
| 43 | JohnChien | [codepen](https://codepen.io/glqwazid-the-selector/pen/poQMVba) |
| 44 | 泊岸#3466 | [codepen](https://codepen.io/qoq77416416/pen/ZEmgMNP?editors=1010) |
| 45 | lingchang | [codepen](https://codepen.io/ling-chang/pen/JjegmBW) |
| 46 | PollyPO_Lee | [codepen](https://codepen.io/pollypo1986/pen/ExOqXPw) |
| 47 | chichi | [codepen](https://codepen.io/chichihuang/pen/GRwVmGB) |
| 48 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/rNQXowq) |
| 49 | LinaChen | [codePen](https://codepen.io/LinaChen/pen/LYXwqVZ) |
| 50 | LuLu | [codePen](https://codepen.io/Lin-Lulu/pen/mdQNvMp) |
| 51 | 金魚 | [codepen](https://codepen.io/cso-goldfish/pen/poQMGBv) |
| 52 | Amberhh | [codepen](https://codepen.io/Amberhh/pen/KKrOLgJ?editors=1010) |
| 53 | Ingrid | [codepen](https://codepen.io/ingrid-chi/pen/JjegqjY) |
| 54 | azami | [codepen](https://codepen.io/azami/pen/GRwVVzW) |
| 55 | Tian | [codepen](https://codepen.io/ccyy915/pen/dywbbgV) |
| 56 | Sebastian | [codepen](https://codepen.io/SebastianWei/pen/LYMPYdB?editors=0010) |
| 57 | BalaBambe | [codepen](https://codepen.io/bambe-chen/pen/zYyOBqZ) |
| 58 | Che1z | [codepen](https://codepen.io/Shih-Min-Hung/pen/rNoBMKQ) |
| 59 | Nikki.Kang | [codepen](https://codepen.io/Nikki-Kang/pen/KKbPgEe) |
| 60 | Kaya | [Codepen](https://codepen.io/laron9486/pen/GRwVmRO) |
| 61 | zona | [Codepen](https://codepen.io/w242920/pen/dywbpYE) |
| 62 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/VwqZPpB) |
| 63 | shangchu | [codepen](https://codepen.io/shangchu0412/pen/zYyOZEM) |
| 64 | Johnson3669 | [codepen](https://codepen.io/crpbugqy-the-typescripter/pen/xxQvvEM) |
| 65 | Aden | [codepen](https://codepen.io/Osases/pen/poqzaXz) |
| 66 | rChinnnn | [codepen](https://codepen.io/rChinnnn/pen/OJaKavJ) |
| 67 | shcopy | [codepen](https://codepen.io/shcopy/pen/JjegbPX) |
| 68 | Jasmin | [codepen](https://codepen.io/thejasmin/pen/NWeKEaK) |
| 69 | Daphne | [codepen](https://codepen.io/DaphneShen/pen/dywbwJx) |
| 70 | Alice | [codepen](https://codepen.io/AliceZhao/pen/GRPKzEv) |
| 71 | Steve Tseng | [codepen](https://codepen.io/hifly0921/pen/jOXONNz) |
| 72 | Kent | [codepen](https://codepen.io/labkunz/pen/gOZOrqe) |
| 73 | RJ | [codepen](https://codepen.io/RJ-S/pen/JjwPJrp) |
| 73 | Cami | [codepen](https://codepen.io/fayevivi/pen/ZEVELEY) |
| 74 | Mocha | [codepen](https://codepen.io/MochaLee/pen/abPbywj?editors=1010) |
| 75 | 精靈 | [codepen](https://codepen.io/vesbexih-the-bashful/pen/mdadMRN) |
| 76 | Rxzan | [codepen](https://codepen.io/Tzuru-Chen/pen/NWeWXJg) |
| 77 | 妤ㄦ | [codepen](https://codepen.io/bmtuepzo-the-sans/pen/MWZWqap) |
| 78 | jiun7523 | [codepen](https://codepen.io/jiun-jiun/pen/xxmKOpY) |
| 79 | Overy | [codepen](https://codepen.io/tupbsair-the-vuer/pen/qBLBMdK) |
| 80 | SkyWoW | [codepen](https://codepen.io/WoW-Sky/pen/qBLBJOe?editors=1010) |
| 81 | 小明#4408 | [codepen](https://codepen.io/ujlylmbv-the-lessful/pen/QWzWXNo?editors=0110) |
| 82 | hungya | [codepen](https://codepen.io/hungya777/pen/ZEVEdJb?editors=1010) |
| 83 | yoyo#2678 | [codepen](https://codepen.io/djmliogn-the-flexboxer/pen/RwEwzzq?editors=1010) |
| 84 | PoWei#8484 | [codepen](https://codepen.io/harrison-wei-lai/pen/ZEVEgra?editors=1010) |
| 85 | Ataraxia | [codepen](https://codepen.io/ataraxia8888/pen/XWorWoZ) |
| 86 | Owen | [codepen](https://codepen.io/owen-dong/pen/QWzWemd?editors=0110) |
| 87 | Emily4869 | [codepen](https://codepen.io/aptx4869Emily/pen/NWePVEy) |
| 88 | curry | [codepen](https://codepen.io/Ted19851223/pen/BavygYO?editors=1111) |
| 89 | Ed Hsu | [codepen](https://codepen.io/Ed-Hsu/pen/ZEVGzqm) |
| 90 | Ken | [codepen](https://codepen.io/Ken720053/pen/OJrVWVO) |
| 91 | Yiren | [codepen](https://codepen.io/Yiren_Liou/pen/vYvOXww)|
| 92 | Carey#1010 | [codepen](https://codepen.io/Leo4077/pen/jOXPBXM)|
| 93 | DavidTsai | [codepen](https://codepen.io/David-Tsai/pen/VwqeYmM?editors=0010) |
| 94 | Jujube | [codepen](https://codepen.io/tendayling/pen/NWerPme) |
| 95 | Lydia | [codepen](https://codepen.io/ling-chen-the-flexboxer/pen/eYbEELZ?editors=1011) |
| 96 | Rochel | [codepen](https://codepen.io/rochelwang1205/pen/gOqKONa) |

| 0 | user | [codepen]() |