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

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

完成畫面：

回報流程

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

回報區

#	Discord	CodePen / 答案
1	MY	Codepen
2	Sonia	Codepen
3	Noy(Toad)	Codepen
4	LinaChen	Codepen
5	Jasmine	Codepen
6	4chan	Codepen
7	han	Codepen
8	Satar	Codepen
9	Hailey	CodePen
10	tim	Codepen
11	毛巾	Codepen
12	邵	Codepen
13	Nocab	Codepen
14	Toung	Codepen
15	Amanda	Codepen
16	Yen	Codepen
17	Clove	Codepen
18	mercury2508.	Codepen
19	Kaya	Codepen
20	Aaron 謝宗佑	Codepen
21	嚼勁先生	Codepen
22	ya_meow	Codepen
23	Johnson	Codepen
24	泊岸	Codepen
25	anderson666	Codepen
26	Fabio20	Codepen
27	Rochel	Codepen
28	蘑菇星星	Codepen
29	Ariel	Codepen
30	kun._c8_shake_it	Codepen
31	yun-lin	Codepen
32	yaoling.liang	Codepen
33	郭芙蘭	Codepen
34	Joannehu	Codepen
35	KOMATSU PEI	Codepen
36	姜承	Codepen
37	jinliu214	Codepen

• 快速複製格式：

| 0 | user | [Codepen]() |