Gatsby触ってみる【ビルディングブロック編】

2021/01/12

前回の続きからGatsbyチュートリアル進めていきます。

1. Get to Know Gatsby Building Blocks(ギャツビーのビルディングブロックを知る)

src/pages配下のindex.jsを開きます。

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

一般的な関数コンポーネントですね。
pages配下に置くとページコンポーネントになるようです。
index.jsがルートになり,名前によってアクセスするパスが変わります。

  • index.js → /
  • about.js → /about

のようにpages配下にファイルを置くとそれと連動してパスが切られます。

共通コンポーネントは,src/components配下に作成し,インポートして使用することができます。

// Headerコンポーネント
import React from "react"

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

// index.js
import React from "react"
import Header from "../components/header"

export default function Home() {
  return (
    <>
      <Header headerText="This is Header"/>
      <div>Hello world!</div>
    </>
  )
}

ページ間のリンクには<Link />コンポーネントを使用します。

import React from "react"
import Header from "../components/header"
import { Link } from "gatsby"

export default function Home() {
  return (
    <>
      <Header headerText="This is Header"/>
      <div>Hello world!</div>
      <Link to="/about">About</Link>
    </>
  )
}

カーソルがリンクの上にのった時点でページをプリロード?してくれているため,画面遷移が爆速に感じるようです。
ローカル実行かつデータ量が少ないページじゃあまり違いがわからないですねw

Gatsby触ってみる 記事一覧


書いた人: こへ
音楽と漫画と読書とアニメとスノボが好き。多趣味でいろんなことに興味有ります。 誰しもが一度は使った事があるもののIoT開発をしてます。
Twitterフォローお願いします。