前回の続きから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