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

デプロイは後回し！

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

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