---
tags: 2022 React 新手讀書會
---
# 🏅 Day 7｜元件建立
在開發專案時，一定會遇到有一區塊的程式碼內容都相同，這時通常會將此區塊的程式碼拆成一個元件，提高元件的重複，亦或是將一個頁面做為一個元件來切換等等。

在 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 / 答案 |
|:------------------------:|:------------------------------------------------------------------------:|
| Rice#8043 | [CodePen](https://codepen.io/riecball/pen/WNzZENN?editors=1010) |
| LEO#7779 | [CodePen](https://codepen.io/nekorice/pen/GRxGwqz) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/jOzKQVb) |
| CofCat#9226 | [codePen](https://codepen.io/cofcat456/pen/ExEROgv) |
| DIANAxAKKO#4298 | [Codepen](https://codepen.io/redfire29/pen/PoRaxeY?editors=1010) |
| hw#0715 | [Codepen] |
| 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/qBoKQro?editors=1010) |
| Vita Ora#4585 | [Codepen](https://codepen.io/showlovezz/pen/yLKEQMa?editors=0110) |
| 葉秋#2335 | [Codepen](https://codepen.io/as880074/pen/abYKQJV) |
| Ayre#0016 | [Codepen](https://codepen.io/yichunlin09/pen/GRxGwWe?editors=0011) |
| AllenW#1132 | [Codepen](https://codepen.io/AllenW/pen/mdxKQEa) |
| Eric Su#7798 | [Codepen](https://codepen.io/wc-su/pen/YzavJEr) |
| 棒腿#9350 | [Codepen](https://codepen.io/frankHsu/pen/MWVXzmJ) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/jOzKQwq) |
| 𝔼.𝕎#4742 | [Codepen](https://codepen.io/kidult316/pen/qBoKQoy) |
| Arista#5802 | [Codepen](https://codepen.io/arista-hsieh/pen/MWVXZgr) |
| Bumble幫啵#0255 | [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/YzavRdM) |
| Kimi#2092 | [Codepen](https://codepen.io/a3216lucy/pen/YzavRLB) |
| 魚魚#0937 | [Codepen](https://codepen.io/fish0522/pen/jOzKQgm) |
| Kenge#3690 | [Codepen](https://codepen.io/pgkusn/pen/mdxKaRV) |
| hw#0715 | [Codepen](https://codepen.io/Lhwei/pen/rNdKowq?editors=0110) |
| Paper#1658 | [Codepen](https://codepen.io/paper_hsiao/pen/XWEYoEO) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/JjLZwLg?editors=0010) |
| yunyun#5215 | [Codepen](https://codepen.io/yun_yunni/pen/qBoKLJB) |
| 真．穎旻粉撕#4995 | [Codepen](https://codepen.io/gbnbihif/pen/zYWayjb) |
| Dylan_Lin#7320 | [Codepen](https://codepen.io/lin-dylan/pen/yLKEQba?editors=1111) |
| huch09#1426 | [Codepen](https://codepen.io/subarashii-huch09/pen/abYKQea?editors=0110) |
| ChloeLo#4858 | [Codepen](https://codepen.io/chloelo/pen/gOeKZdm) |
| Mitour#0672 | [CodePen](https://codepen.io/mitour/pen/xxWzmMK?editors=0011) |
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/JjLZwMQ?editors=1010) |
| wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/vYRrvrG) |
| aki | [codepen](https://codepen.io/aki168/pen/vYRrvwy) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/oNqymzY) |
| Vada Chen#2055 | [Codepen](https://codepen.io/vadachen/pen/ZExRVJj?editors=0010) |
| zzly#9134 | [CodePen](https://codepen.io/ly00/pen/poLKGVM) |
| 栗栗#5900 | [CodePen](https://codepen.io/daylilystudio/pen/qBoKvqx) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/rNdKRLy) |
| Wu#0167 | [CodePen](https://codepen.io/Xander0705/pen/WNzyPqV) |
| C#4593 | [CodePen](https://codepen.io/ShaniMa/pen/MWVXxmb) |
| IceSam#7836 | [Codepen](https://codepen.io/sam-hsu/pen/ZExRZEr) |
| hiYifang #0736 | [Codepen](https://codepen.io/hiYifang/pen/GRxGzgv) |
| JC#8568 | [Codepen](https://codepen.io/jcsamoyed/pen/qBoKwNw) |
| RON#2813 | [Codepen](https://codepen.io/Ron115/pen/jOzKRyG) |
| Yanyan#3555 | [Codepen](https://codepen.io/wei-yi-lee/pen/VwXdgeP) |
| ZengZeng | [Codepen](https://codepen.io/tyzyoko/pen/bGvKJvr) |
| 吉利#3810 | [Codepen](https://codepen.io/gillianyy/pen/QWmrjXa) |
| Joechiboo#3960 | [Codepen](https://codepen.io/joe-chiboo/pen/KKoeLyY) |
| SHIN#6075 | [Codepen](https://codepen.io/shin9626/pen/vYRrMzK) |
| IreneLee#7932 | [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/VwXdOXz) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/ZExRNmG) |
| YenYing#4029 | [Codepen](https://codepen.io/yenying0804/pen/mdxKYew?editors=0010) |
| wenyun#2362 | [Codepen](https://codepen.io/wenyuncc/pen/XWEYwZm?editors=0110) |
| charlottelee849#0366 | [Codepen](https://codepen.io/charlotte-lee/pen/RwMJzae) |
| Chelly#6129 | [Codepen](https://codepen.io/chellyhsu/pen/WNzyqRb) |
| MarsKuo#6015 | [Codepen](https://codepen.io/MarsKuo/pen/WNzyVNR) |
| NinaKuo#3332 | [Codepen](https://codepen.io/ninakuo0814/pen/JjLZQza) |
| YuZhun#1362 | [Codepen](https://codepen.io/danzhun/pen/GRxGbLK) |
| 小夜#3809 | [Codepen](https://codepen.io/Naito_K/pen/rNdKgEL?editors=0110) |
| Midnightdinner#6220 | [Codepen](https://codepen.io/woowooyong/pen/dymKBgw) |
| Mr.Sean#3825 | [Codepen](https://codepen.io/sean_1215/pen/VwXdJgR) |
| yoshidc#0455 | [Codepen](https://codepen.io/yoshiyyc/pen/LYdrMJE) |
| Stanley#2505 | [Codepen](https://codepen.io/bigbearada/pen/mdxjdNb) |
| Yihan#5560 | [Codepen](https://codepen.io/h513hh513h/pen/ExEpxyX?editors=0110) |
| Otis#8455 | [Codepen](https://codepen.io/humming74/pen/BarPyvd) |
| easton#3863 | [Codepen](https://codepen.io/EastonIsCodingNow/pen/VwXBLPp) |
| 眼睛 #0314 | [Codepen](https://codepen.io/thrizzacode/pen/oNqMXaw) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/WNzKvja) |
| GL#2256 | [Codepen](https://codepen.io/4genie/pen/ZExjGKg) |
| TedWang | [Codepen](https://codepen.io/wangtaiyan/pen/mdxjJMq) |
| lingxuan | [Codepen](https://codepen.io/lingxuan0618/pen/MWVBwMa) |
| Kelvin#3296 | [Codepen](https://codepen.io/kelvinchang/pen/qBoKgxR) |
| 城堡#2126 | [Codepen](https://codepen.io/tthcastle/pen/KKoBwZQ) |
| Claire#2116 | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/JjLBYNM) |
| JimHwang#3594 | [Codepen](https://codepen.io/jimh1129/pen/WNzKQqG) |
| ねこ*#9385 | [Codepan](https://codepen.io/kunpao0104/pen/ExEpVdQ) |
| 喬喬#2824 | [Codepan](https://codepen.io/joanne-wei/pen/wvmxMdg?editors=1010) |
| Ryder#7398 | [Codepan](https://codepen.io/rider159159/pen/OJvwMgR) |
| rainbow#3329 | [Codepan](https://codepen.io/g901612002/pen/PoRBZgj) |
| 山貓(焜)#7041 | [Codepan](https://codepen.io/pen?template=VwXBeBL) |
| 雅帆 | [Codepan](https://codepen.io/yafanchung/pen/bGvjNwg?editors=1010) |
| Carolkiki2003 #7399 | [Codepan](https://codepen.io/wasfzuig/pen/wvmxGgj) |
| kyle890721#1016 | [Codepan](https://codepen.io/KYLE890721/pen/poLZgmO) |
| niel#2413 | [Codepen](https://codepen.io/danielhsu/pen/VwXBpOe) |
| Tsuei#9284 | [Codepen](https://codepen.io/AlbertoLL/pen/MWVBmQM) |
| YJ#1839 | [Codepen](https://codepen.io/cshjufxc/pen/JjLBNeE) |
| Ada | [Codepen](https://codepen.io/zggsoagv-the-scripter/pen/KKoBvzq) |
| Yiling#4054 | [Codepen](https://codepen.io/lin010/pen/jOzpLvZ) |
| Overy#4545 | [Codepen](https://codepen.io/oceanwhale52hz/pen/xxWJLpB) |
| Timothy#5863 | [Codepen](https://codepen.io/timothy_hippo/pen/xxWzQyJ?editors=0011) |
| 彼得#1923 | [Codepen](https://codepen.io/shiou-ho/pen/rNdrGmX) |
| Doris#1140 | [Codepen](https://codepen.io/doris79588/pen/XWEBeGX) |
| React-慧茹(拉拉醬)＃3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/abYjLMm) |
| Morris#8755 | [Codepen](https://codepen.io/morrisss/pen/rNdrzWv) |
| Shau#6400 | [Codepen](https://codepen.io/shau-chen/pen/jOzpaOg) |
| moitw | [codepen](https://codepen.io/tsuifei/pen/qBoyVxo?editors=1010) |
| JasonLu | [codepen](https://codepen.io/wnptocip/pen/PoRBEzP) |
| JessSong#5050 | [codepen](https://codepen.io/jssanji03/pen/YzajrGN) |
| 鮪杰寶貝 | [codepan](https://codepen.io/wei-nie/pen/mdxjXdR?editors=1111) |
| KuoMin#4931 | [codepan](https://codepen.io/KuoMin/pen/NWYBywL) |
| andersonshen#4675 | [codepan](https://codepen.io/luxyenni-the-bold/pen/jOzpZQR) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/zYWLjgX) |
| Neal#0665 | [Codepen](https://codepen.io/neallkf/pen/LYdBrjZ?editors=0110) |
| Mao#5230 | [Codepen](https://codepen.io/taomaomao/pen/rNdrqaR?editors=0011) |
| 紅豆豆#0518 | [Codepen](https://codepen.io/zoseqlpc/pen/eYMjPRw?editors=0110) |
| Robert Lo#9653 | [Codepen](https://codepen.io/Robert-Lo/pen/QWmBPpp) |
| Anson#3594 | [Codepen](https://codepen.io/huanmingchang/pen/VwXBxVL?editors=1010) |
| 翔#0859 | [Codepen](https://codepen.io/energy95272z/pen/PoRBMZw) |
| Nico#8739 | [Codepen](https://codepen.io/Nicof2e/pen/bGvjXYB) |
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/jOzpwJM) |
| kevinhes#2881 | [CodePen](https://codepen.io/kevinhes/pen/JjLajpO) |
| EvaLin#4546 | [Codepen](https://codepen.io/evalin0316/pen/ZExMQEy) |
| Evileye#0666 | [Codepen](https://codepen.io/gn-lin/pen/jOzvVbz?editors=1010) |
| Wins#8457 | [Codepen](https://codepen.io/winszhuang/pen/eYMLZYQ) |
| Chaim#5739 | [Codepen](https://codepen.io/hgit915/pen/BarPKKY) |
| 座標33129#8748 | [Codepen](https://codepen.io/ad80352/pen/poLOVGp) |
| JimmyChang#5558 | [Codepen](https://codepen.io/JimmyChangWenChi/pen/xxWJYQE) |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/KKoxrvP) |
|灰塵貓#7994|[Codepen](https://codepen.io/rjk66268/pen/NWYLJVW?editors=0011)|
| 許揚民 Evan#4546 | [Codepen](https://codepen.io/gitevanhsu/pen/QWmZWVL) |
| shin#5792 | [Codepen](https://codepen.io/hah1030/pen/ZExqEmO?editors=0110) |
| lloydd#8224 | [Codepen](https://codepen.io/thanatus25/pen/bGvmNEN) |
| Evonne#7078| [Codepen](https://codepen.io/Hsu1Fang/pen/ExEdPoL?editors=1010) |
| Rikku#1756| [Codepen](https://codepen.io/rikkubook/pen/OJvBMGN) |
| Rocker#6235| [Codepen](https://codepen.io/RockerLi/pen/ZExqWEo) |
| 雪莉#4827| [Codepen](https://codepen.io/utshang216/pen/gOeBmGV) |
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/zYWmwNe)|
|emma#3398|[Codepen](https://codepen.io/itsems/pen/VwXEWdy?editors=0110)|
|anby#7112|[Codepen](https://codepen.io/andy-ch-bo-an/pen/mdxzpvb)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/PoRyEgP)|
|蘇蘇#0426|[Codepen](https://codepen.io/sabine1123/pen/dymgQqV)|
|Louise|[Codepen](https://codepen.io/LouiseHuang/pen/rNdqoOj)|
|hsiuhsiu #7412|[Codepen](https://codepen.io/hsiuhsiu/pen/ZExmXQv?editors=0110)|
|Mori#5582|[Codepen](https://codepen.io/flower9312/pen/jOzQZOy)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/oNqQKdd)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/vYRQoPb?editors=1010)|
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/XWEorqP)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/qBoLvWG)
|陳sam#9117|[Codepen](https://codepen.io/euldpliv/pen/PoRVLJb)
|Rose#1669|[Codepen](https://codepen.io/Rose-Wu/pen/YzagKJg)
|hobby#6565|[Codepen](https://codepen.io/hobbyling/pen/mdxoErJ)
|eching#9183|[Codepen](https://codepen.io/echin/pen/qBovRPG)
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/vYRPZdO)
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/WNzWbzg)
|larahuang#8309|[Codepen](https://codepen.io/lara1105huang/pen/GRxLGjG)
|鉛筆#7763|[Codepen](https://codepen.io/zoeguava/pen/XWEQyGP)
|SunnyCheng#4113|[Codepen](https://codepen.io/Sunny0509/pen/dymEYOg)
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/KKojGgG)|
|龜人#7922|[Codepen](https://codepen.io/dullshen/pen/GRxVKPQ)|
KyleLin#0561|[Codepen](https://codepen.io/thenkyle/pen/QWmeMyE)|
Kninipopo#7983|[Codepen](https://codepen.io/Robinnini/pen/eYrmVwL?editors=1010)
|SleepWalk#1635|[Codepen](https://codepen.io/arthurliinn/pen/NWMMGjz?editors=1111)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/VwNGpGG)|