---
# System prepended metadata

title: "\U0001F3C5 Day 7｜元件建立"
tags: [2022 React 新手讀書會]

---

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

![](https://i.imgur.com/keMkywu.png)
在 React 中建立一個 function component 非常簡單，如同定義一個函式，並在父元件中引入即可。
舉例：
```jsx=
function Chid() { // 子元件
  return <p> Child </p> 
}

function Example() { // 父元件
  return <div>
    Example
    <Chid />
  </div>
}
```
## 補充
如果要在子元件再加入其他元件，可以運用 children 這個 props 來往下加入。
舉例:
```jsx=
function Main({children}) {
  return <div> Main {children}</div>
}
function Child() {
  return <div> Child </div>
}
```
```jsx=
function Example() {
  return <div>
    <Main>
      <Child />
    </Main>
  </div>
}
```

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

完成畫面：
![](https://i.imgur.com/R8TQU05.png)



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
// 建立子元件，並在父元件中引入
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)|