今天最一開始，我們要在我們的主元件中，去加入一個子元件( sub-components )。

• Sub-component

首先，我們新增src/components目錄，並新增header.js檔案，內容如下:

import React from "react"
export default () => <h1>This is a header.</h1>

在實作上，這個檔案可能是我們在做網頁layout的header的部分，然後我們把它跟footer跟頁面內容一起塞到主元件上。

在這邊，展示如何將其引入原本的app.js中:

import React from "react"
import Header from "../components/header"
export default () => (
  <div style={{ color: `purple` }}>
      <Header />
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
  </div>
)

首先先在app.js(主頁面)內，引入我們的Header元件，如此一來，就可以在JSX中以標籤的形式去使用它了!!

• layout component

然而，在實際使用上，我們可能會直接去做一個layout元件，在把我們的主頁面塞進去。做法如下:
首先，把剛剛的header.js改名為layout.js，並修改內容如下:

import React from "react"
export default ({ children }) => (
  <div>
    <h1>我是header</h1>
    {children}
    <h1>我是footer</h1>
  </div>
)

app.js修改如下:

import React from "react"
import Layout from "../components/layout"
export default () => (
  <Layout>
    <p>
      我是內容
    </p>
  </Layout>
)

用gatsby develop跑起來後，看到的畫面應該長得如下圖這樣。藉由觀察，可以看到在主畫面中，被夾在<Layout>標籤中的內容(就是<p>我是內容</p>)，被當成一個元件被傳進了layout.js，並且在layout.js回傳，被當作引數來放進Layout元件中。

今天就這樣了，明後天的話希望把react這邊做個小結，明天會提到用props把資料從父元件傳到子元件，並且怎麼去把陣列及物件型態的資料轉換成多個標籤並放進元件中。
後天應該會用函式跟react的事件監聽，做個簡單的小功能，可能是簡易版的todolist。