Creating your first Gatsby Site Part 2

By shane
Thu, 2019-09-05 19:02
Daily Dose of Drupal Episode #2

Share with Others

In this episode, we dive into components a bit more and learn about Layout components as well as create our own Header component. We also look at how to link between pages on your GatsbyJS website. This episode covers:

  1. Components and subcomponents
  2. Props in React
  3. The Gatsby Link component

The first thing we will look at is how components can be used to break down a page. Open the src/components/layout.js file.

If you look in the return statement, you will notice a Header component that passes in a siteTitle. Remember, this JSX. So let’s break down what this is doing.

First, the Header component is imported at the top of the page and is available in the src/components/header.js file. We are passing in a prop. A prop is a piece of data that can be passed down into a component. Think of it kind of like passing a parameter into a function.

Gatsby Header component

Inside the header.js file, you can see the siteTitle is available as a parameter in the arrow function and is then displayed in the markup down below.

Gatsby Header component

Now you may be wondering where this siteTitle data is coming from. If you look back in layout.js you will see a line that has the function useStaticQuery. This allows you to use GraphQL (which we will cover more in the future) to query your various data sources. These data sources could be an external API or in this case, internal site configuration. This is actually querying data that is created in the gatsby-config.js file.

The gatsby-config.js file is a special file that holds site information. It’s also a file where you will eventually tell Gatsby to load any plugins you want the site to use. If you look in this file, you can see under siteMetadata the title field is specified. Go ahead and change this field. If your Gatsby development server is running you will see the title of the site changes.

Gatsby Config File

The next thing we will look at is the Gatsby Link component. You can see the Link component being used in the src/components/header.js file as well as the src/components/pages/index.js file.

In the index.js file create a new link that links out to an /about/ page.

Gatsby Link component

If you save the file, you will not see the link show up (but it will not work yet). Feel free to add some additional HTML markup around the link if you don’t want it right up against the page-2 link.

We need to create this page, create a new file in the src/pages directory and call it about.js. Here is some example code to get your page component file started.

Gatsby About page component

In this example, we are importing React (so we can use JSX). We are importing the Link component, so we can create a Link back to the homepage, we are importing our Layout component (that is what we looked at in layout.js), and we are importing an SEO component (which adds some basic metatags to our site).

We create a React component using an arrow function. This react component contains JSX with some HTML markup. At the bottom we export our page component. If we don’t export the component, Gatsby will not be able to create the page.

The result is our simple about page.

Gatsby About Page