How to Gatsby: The Complete Course/

...

/

Building Our Project Components

Building Our Project Components

Learn how to build reusable components in Lark.

We'll cover the following...

So far, we haven’t done much in our Lark project. Let’s get back to it for a moment and build out some components we’ll use later in the project.

These components, for now, are presentational and won’t do much till later on. We will be using dummy data for these components until we learn about sourcing and querying for data in Gatsby. Also, the components will be implemented with minimal styling, with the styling done inline.

What we’ll build

These components include the header, footer, and a card component for our individual post item.

To view our implemented changes, let’s click the “Run” button below and open the link below the code.

Note: On a local server, we can fire up the server by running npm run start and visiting localhost:8000.

import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"

const Header = ({ siteTitle }) => (
  <header
    style={{
      background: `rebeccapurple`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
Project structure

Initially, we see a welcome page that says “Gatsby Default Starter” at the top. The files we work with are located in the src/components directory. Let’s begin by looking at them one by one.

The header.js file

Currently, this component exists in the project. This results in the top purple bar with the “Gatsby Default Starter” text in the image above. We agree that this could be visually improved, and we should create our custom header. So, that’s what we’ll do just now.

We can copy the code present in the code widget below and paste it into the header.js file.

Press + to interact
import * as React from "react"
import PropTypes from "prop-types"
const Header = ({ siteTitle }) => (
  <header style={styles.wrapper} >
    <a href='/' style={styles.siteTitle}>{siteTitle}</a>
    <nav style={styles.nav}>
      <ul style={styles.navList}>
        <a href='/' style={styles.navListItem}>Blog</a>
        <a href='/me' style={styles.navListItem}>Me</a>
        <a href='/works' style={styles.navListItem}>Works</a>
      </ul>
    </nav>
  </header>
)
Header.propTypes = {
  siteTitle: PropTypes.string,
}
Header.defaultProps = {
  siteTitle: ``,
}
const styles = {
  wrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '0 50px',
    borderBottom: '1.7px solid #00baba',
    marginBottom: '50px',
    backgroundColor: '#00baba',
  },
  siteTitle: {
    margin: 0,
    padding: 0,
    color: '#fff',
    fontWeight: 600,
    textDecoration: 'none'
  },
  nav: {
    display: 'flex',
    justifyContent: 'flex-end',
    width: '30%',
  },
  navList: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    padding: '20px 0',
    margin: 0,
  },
  navListItem: {
    listStyle: 'none',
    margin: 0,
    color: '#fff',
    fontWeight: 500,
  }
}
export default Header

Changes made

The changes we made are basic React UI operations and include the following:

  • On lines 17–19 and 21–23, we set the prop types and default props, respectively.

  • As we are not using any styling libraries yet, but instead using React’s inline styling, lines 25–61 construct the style objects used in the header component.

  • We then export the header component on line 63, which is then directly imported and used in the layout.js file.

We do something similar to most of the changes described above when creating other components. Once we’ve done this, our UI has ...