🏅Day 24 - React 元件練習 (1) - 元件建立

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

Image Not Showing Possible Reasons

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

Image Not Showing Possible Reasons

完成畫面：

Image Not Showing Possible Reasons

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

Image Not Showing Possible Reasons

| 0 | user | [Codepen]() |