Skip to main content

Components

Pages​

  1. Add some more content and styles to the page.

    src\pages\index.js​

    import React from "react";

    export default function Home() {
      return (
        <div>
          <h1>Home</h1>
          <img src="https://source.unsplash.com/random/400x200" alt="" />
        </div>
      );
    }

  2. Create another page.

    src\pages\about.js​

    import React from "react";

    export default function About() {
      return (
        <div>
          <h1>About</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
            quam mollitia ut, odit suscipit velit molestias, ratione vel minus
            iure esse! Nam autem vitae distinctio minima facere. Consectetur,
            error molestiae.
          </p>
        </div>
      );
    }

    TIP: Install the extension ES7, React, JS, Snippets. Then use these code snippets to make this quicker:

    • rfc (generates a React functional component)
    • lorem (generates lorem ipsum text to fill out the page)
      • Note this snippet is built into VS Code

Components​

Layout Component​

  1. Create a components directory under src.

  2. Create a layout component for shared layout.

    src\components\layout.js​

    import React from "react";

    export default function Layout({ children }) {
      return <div>{children}</div>;
    }

  3. Add it to both pages.

    You will see no visual changes at this point.

    src\pages\index.js​

    import React from "react"
    + import Layout from "../components/layout"

    export default function Home() {
    return (
    -   <>
    +      <Layout>
        <h1>Home</h1>
        <img src="https://source.unsplash.com/600x300/?house" alt="house" />
    +      </Layout>
    -   </>
    )
    }

    src\pages\about.js​

    import React from "react"
    import Layout from "../components/layout"

    export default function About() {
    return (
    +    <Layout>
        <h1>About</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quam
            mollitia ut, odit suscipit velit molestias, ratione vel minus iure esse!
            Nam autem vitae distinctio minima facere. Consectetur, error molestiae.
        </p>
    +    </Layout>
    )
    }

Subcomponents​

  1. Create a reusable header component

    src\components\header.js​

    You will need to create the components directory.

    import React from "react";

    export default function Header() {
      return (
        <header>
          <nav>Home | About</nav>
        </header>
      );
    }

  2. Add a reusable footer component.

    src\components\footer.js​

    import React from "react";

    export default function Footer() {
      return (
        <footer>
          <nav>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Careers</a>
            <span> &#169; Acme Inc.</span>
          </nav>
        </footer>
      );
    }

  3. Add both of these to the layout component.

    src\components\layout.js​

    import React from "react"
    + import Footer from "./footer"
    + import Header from "./header"

    export default function Layout({ children }) {
    return (
        <div>
    +      <Header />
           {children}
    +      <Footer />
        </div>
    )
    }

  4. Surround both index.js and about.js pages with the Layout component (layout.js).

  1. Update the header to link to the pages you previously created. Use the Link component built-in to Gatsby.

    src\components\header.js​

    + import { Link } from "gatsby"
    import React from "react"

    export default function Header() {
    return (
        <header>
        <nav>
    -         Home | About
    +        <Link to="/">Home</Link> |<Link to="/about">About</Link>
        </nav>
        </header>
    )
    }