Gatsby.js로 해보세요.

공식 사이트

https://www.gatsbyjs.com/

환경 구조

설치하다.

npm install -g gatsby-cli

템플릿 생성

gatsby new test-site

// スターターテーマを使うこともできる
gatsby new test-site https://github.com/gatsbyjs/gatsby-starter-hello-world

로컬 서버 시작

액세스

cd test-site
gatsby develop

http://localhost:8000
방문http://localhost:8000/___graphql으로도 Graph ql 볼 수 있음

gatsby 명령

프로덕션 구축

/public에서 컴파일된 파일 생성

gatsby build

제품 & 로컬 서버 만들기

gatsby serve

사이트 프레임워크를 만들어 보도록 하겠습니다.

-- src
|   |-- components //追加
|   |   |-- Layout
|   |   |   |-- Footer.jsx
|   |   |   `-- Header.jsx
|   |   `-- layout.jsx
|   `-- pages
|       |-- about.jsx // 追加
|       `-- index.jsx

Header.jsx

src/components/Layout/Header.jsx

import React from "react"

const Header = ({ location }) => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

export default Header;

Footer.jsx

src/components/Layout/Footer.jsx

import React from "react"

const Footer = ({ location }) => {

  return (
    <footer>
      <h1>footer</h1>
    </footer>
  )
}

export default Footer;

layout.jsx

src/components/layout.jsx

import React from 'react';
import Header from './Layout/Header';
import Footer from './Layout/Footer';

const Layout = ({ children, location }) => {
// childrenは <Layout /> コンポーネント内の記述が展開される

  return (
    <>
      <div className="site-wrap">
        <Header location={location} />
        {children}
        <Footer location={location} />
      </div>
    </>
  )
}

export default Layout;

index.jsx

src/pages/index.jsx

import React from "react"
import { Link } from 'gatsby'
import Layout from '../components/layout'

class Home extends React.Component {

  render() {

    return (
      <Layout location={this.props.location}>
        <h1>index-page</h1>
        <Link to="/about">Aboutページ</Link>
      </Layout>
    );

  }
}

export default Home;

about.jsx

src/pages/about.jsx

import React from "react"
import { Link } from 'gatsby'
import Layout from '../components/layout'

class About extends React.Component {

  render() {

    return (
      <Layout location={this.props.location}>
        <h1>about-page</h1>
        <Link to="/">indexに戻る</Link>
      </Layout>
    );

  }
}

export default About;

Graphql 사용

gatsby-config.js

module.exports = {
  /* Your site config here */
  siteMetadata: {
      siteName: `サイト名`,
      siteUrl: `https://hogehoge.net`,
      siteLogo: `/images/logo.png`,
      author: `author`,
    },
    /* plugins */
    plugins: [],
}

GraphQl

로컬 서버를 시작한 상태($gatsby develp액세스http://localhost:8000/___graphql
Explorer 상자(왼쪽 열)에서 가져올 데이터 선택
Execute(재생성 버튼)를 클릭하면
Code Exporter 상자(오른쪽 열)에서 쓰기 방식 내보내기

layout.jsx

src/components/layout.jsx

import React from 'react';
import { useStaticQuery } from 'gatsby';
import Header from './Layout/Header';
import Footer from './Layout/Footer';

const Layout = ({ children, location }) => {

  // graphqlで調べた書き方でデータを取得
  const { site } = useStaticQuery(
    graphql `
      query {
        site {
          siteMetadata {
            siteUrl
            siteName
          }
        }
      }
    `
  )

  // サイト名が取得できる
  // console.log(site.siteMetadata.siteName);

  return (
    <>
      <div className="site-wrap">
        <Header location={location} />
        {children}
        <Footer location={location} />
      </div>
    </>
  )
}

export default Layout;

props 좀 건네주세요.

layout.js

src/components/layout.jsx

 return (
    <>
      <div className="site-wrap">
        <Header
          location={location}
          siteName={site.siteMetadata.siteName}
        />
        {children}
        <Footer location={location} />
      </div>
    </>
  )

Header.js

src/components/Layout/Header.jsx

import React from "react"

const Header = ({ location, siteName }) => {

  return (
    <header>
      {/* サイト名が表示される */}
      {siteName} 
      <h1>header</h1>
    </header>
  )
}

export default Header;