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

2020年09月04日

JavaScript JSX React gatsby

gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(1) 今回:gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(2) 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を作って以下を記載

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 イエイ! pageは作成したファイルのファイル名に連動するのか。

Using sub-components

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

import React from "react"

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

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

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

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

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

import React from "react"

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

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

Using layout components

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

Using the <Link /> component

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を作って以下を記載

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 2020-09-04_17h36_06.jpg 画面遷移可能なことを確認

Deploying a Gatsby site

デプロイは後回し!

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

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


SaitoSystemService

埼玉在住のフリーランスSEです。 技術ブログや作品をここで紹介していきます。 よろしくお願いします。

Written by 齋藤 渓
埼玉在住のフリーランスSEです。技術ブログや作品をここで紹介していきます。よろしくお願いします。
Contact:
© 2020, 齋藤システムサービス by Gatsby