gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[今回：gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# チュートリアル
チュートリアルの1.Get to Know Gatsby Building Blocksの続き
https://www.gatsbyjs.com/tutorial/part-one/#building-with-components
からチュートリアルをこなしていきます。
## Building with components
コンポーネントを使った構築
componentsは使いまわせる感じのUI部品という感じか。
### Using page components
src/pages/about.jsを作って以下を記載

```js:src/pages/about.js
import React from "react"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <h1>About Gatsby</h1>
      <p>Such wow. Very React.</p>
    </div>
  )
}
```
作成したらアクセス
```http://localhost:8000/about```
![2020-09-04_16h49_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/03f0ec82-d7e8-501d-8051-3e8984eff4ba.jpeg)
イエイ！
pageは作成したファイルのファイル名に連動するのか。

### Using sub-components
Headerコンポーネントを作る
以下ディレクトリを作成
```src/components```
src/components/header.jsを作って以下を記載

```js:src/components/header.js
import React from "react"

export default function Header() {
  return <h1>This is a header.</h1>
}
```

src/pages/about.jsにHeaderコンポーネントを追加する。

```js:src/pages/about.js
import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header />
      <p>Such wow. Very React.</p>
    </div>
  )
}
```
![2020-09-04_17h04_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/d7bcd433-e7bb-2e18-d191-37b4dcfd9d3e.jpeg)

Headerが反映されていることを確認

次、Headerを以下のように修正

```js:src/components/header.js
import React from "react"

export default function Header(props) {
  return <h1>{props.headerText}</h1>
}
```
src/pages/about.jsを以下のように修正

```js:src/pages/about.js
import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header headerText="About Gatsby" />
      <p>Such wow. Very React.</p>
    </div>
  )
}
```
![2020-09-04_17h11_53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/27b41f00-bd09-8861-8d48-3a2dcca8b5a3.jpeg)
反映されていることを確認
propsを使うことでコンポーネントへ値の受け渡しができるから、再利用しやすいと。
。。。ルールきっちりしないと人それぞれのが出来そうね。
### Using layout components
layout componentsは別チュートリアルで記載だと。
### Using the <*Link />* component
src/pages/index.jsを以下のように修正

```js:src/pages/index.js
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <Link to="/contact/">Contact</Link>
      <Header headerText="Hello Gatsby!" />
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}
```
src/pages/contact.jsを作って以下を記載

```js:src/pages/contact.js
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Contact() {
  return (
    <div style={{ color: `teal` }}>
      <Link to="/">Home</Link>
      <Header headerText="Contact" />
      <p>Send us a message!</p>
    </div>
  )
}
```
![2020-09-04_17h35_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/20aa93a3-93c4-96fa-63d5-710a6e669f26.jpeg)
![2020-09-04_17h36_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/6840016b-0701-9f69-ff8c-bf3f95ab6b8b.jpeg)
画面遷移可能なことを確認

### Deploying a Gatsby site
デプロイは後回し！

このチュートリアルは以上。
今回はここまで。

ありがとうございました。