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

gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）
今回：gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）
gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要
gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成
gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ
gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング
gatsby入門 チュートリアルをこなす 6. 変圧器プラグイン※Transformer pluginsのgoogle翻訳
gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する
gatsby入門 チュートリアルをこなす 8. 公開するサイトの準備
gatsby入門 ブログ作ってサーバーにアップしてみる

チュートリアル

チュートリアルの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を作って以下を記載

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

イエイ！
pageは作成したファイルのファイル名に連動するのか。

Using sub-components

Headerコンポーネントを作る
以下ディレクトリを作成
src/components
src/components/header.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コンポーネントを追加する。

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>
  )
}

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

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

src/components/header.js

import React from "react"

export default function Header(props) {
  return <h1>{props.headerText}</h1>
}

src/pages/about.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>
  )
}

反映されていることを確認
propsを使うことでコンポーネントへ値の受け渡しができるから、再利用しやすいと。
。。。ルールきっちりしないと人それぞれのが出来そうね。

Using layout components

layout componentsは別チュートリアルで記載だと。

Using the <*Link />* component

src/pages/index.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を作って以下を記載

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>
  )
}

画面遷移可能なことを確認

Deploying a Gatsby site

デプロイは後回し！

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

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