【GatsbyJS製ブログ】ヘッダーとフッターのパーツ化「exportとimport」

import React from 'react'

const Header = () =>{
    return(
        <header>
            <div>
                <div>
                    クマの生態ブログ
                </div>
            </div>
        </header>
    )
}
export default Header //Header関数をエクスポート。詳しくは後述。

import React from 'react'

const Footer = () =>{
    return(
        <footer>
            <div>
                Copyright © 2021 tomoki.dojo
            </div>
        </footer>
    )
}
export default Footer //Footer関数をエクスポート

import React from 'react'
import { Link } from "gatsby"
import Header from "../components/header" //ヘッダーをインポート
import Footer from "../components/footer" //フッターをインポート

const Layout = ({ location, title, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  const isRootPath = location.pathname === rootPath
  let header
  …
  header = (<Header />) //ここで、headerという変数にHeaderを代入
  return (
    <div className="global-wrapper" data-is-root-path={isRootPath}>
      <header className="global-header">{header}</header> //こんな感じで表示させたいヘッダーを指定できる。
      <main>
        {children}
　　　…
      </main>
      <Footer /> //こんな感じでフッターを指定してもOK。
    </div>
  )
}
export default Layout

const Header = () =>{ //アロー関数。詳しくは下記の「参考」をご覧ください。
    return(
        …
    )
}
export default Header 

import Header from "../components/header"
import Footer from "../components/footer"

header = (<Header />)
…
<header className="global-header">{header}</header>
…
<Footer />

<Header></Header>

const CreateList = ({posts}) =>{
  … // postsは記事のタイトル等のデータが配列としてまとまったもの。例えば次のようなことをします。

  for(let i = 0; i < posts.length; i++){ //for文でpostsデータから記事データを一つずつ抜いていく

    let post = posts[i] //で、postに入れておいて、

  … //例えば、
    <div>{post.frontmatter.title}</div> 
    //とかで記事タイトルを持ってくることができます。frontmatterについては別記事で。
  …
}

export default CreateList

…
import CreateList from "../components/createlist"
…
const Tags = ({ pageContext, data, location }) => {
//pageContextについては補足を見てください。dataには下のGraphQLから取得したデータが勝手に入っていきます。
//locationはトップページかどうか判断するための材料で、この記事とは関係ないので詳細は割愛。

  const posts = data.posts.nodes  //postsにGraphQLから取得したデータのうち必要な部分を渡しています。

  …
  <CreateList posts = {posts}></CreateList> //先ほどのCreateListにpostsデータを渡しています。
  …

}

export const pageQuery = graphql` 
//GraphQLでそのタグが引っ付いている記事情報を取得しています。で、取得したデータは上のdataに勝手に入っていきます。
  query($tag: String) { //補足参照
  …
  posts: allMdx(
            sort: { fields: [frontmatter___date], order: DESC }
            filter: {frontmatter: {tags: {eq: $tag}}} //補足参照
        ) {
            nodes {
                id
                excerpt
                fields {
                    slug
                }
                frontmatter {
                    date(formatString: "MMMM DD, YYYY")
                    title
                    description
  …