Gatsby's Building Blocks: Components and Pages [Part 3]

In the previous article, we learnt how to create a GatsbyJS site. In this article, we will learn how to work with Gatsby’s components and pages.

Gatsby is a powerful and flexible static site generator that uses the power of React and GraphQL to build blazing-fast websites. One of the reasons behind Gatsby’s popularity is its ability to break down a website into manageable and reusable components and pages.

In this article, we will learn React components, creating and using Gatsby components, building Gatsby pages, and briefly discuss GraphQL.

Understanding React Components

React is a popular JavaScript library for building user interfaces. At the heart of React are components which are the building blocks of a React application. Components allow developers to create reusable and modular pieces of code that can be easily combined to create complex user interfaces.

What are React Components?

React components are like functions that accept inputs, called “props” and return React elements that describe what should appear on the screen. Components can be defined using either JavaScript functions or ES6 classes.

Why Use React Components?

React components make it easier for developers to manage and maintain code by breaking down complex user interfaces into smaller, more manageable pieces. This approach promotes code reusability, modularity, and maintainability. On top of that, React components simplify state management and make it easier to debug applications.

Creating and Using Gatsby Components

Gatsby is built on top of React, and therefore, it leverages the power of React components. Gatsby components are similar to React components, with some additional features specific to Gatsby. In this section, we will discuss how to create and use Gatsby components.

Creating Gatsby Components

To create a Gatsby component, first, create a new folder inside the src directory of your Gatsby project. Name the folder components. Create a new JavaScript file inside the components folder with the desired component name, for example, Header.js.

Next, you need to define your component. You can use either a JavaScript function or an ES6 class. Here’s an example of a functional Gatsby component –

import React from "react"

const Header = () => {
  return (
    <header>
      <h1>Gatsby's Building Blocks</h1>
    </header>
  )
}

export default Header

Using Gatsby Components

To use a Gatsby component in another component or page, you need to import it. For example, to use the Header component on a page, first, import it at the top of the page –

import Header from "../components/Header"

Then, you can use the Header component within your page as follows –

const MyPage = () => {
  return (
    <div>
      <Header />
      {/* Rest of the page content */}
    </div>
  )
}

Building Gatsby Pages

Gatsby pages are the main building blocks of a Gatsby website. They are similar to components but represent entire pages on your site. In this section, we will discuss how to create Gatsby pages and link them together.

Creating Gatsby Pages

To create a Gatsby page, create a new JavaScript file inside your Gatsby project’s src/pages directory. The name of the file will determine the URL path of the page. For example, create a file called about.js to create an about page.

In this file, define your page component as you would with a regular React component. For example –

import React from "react"
import Header from "../components/Header"

const AboutPage = () => {
  return (
    <div>
      <Header />
      <h2>About Us</h2>
      <p>This is a sample Gatsby page that showcases Gatsby's building blocks.
      </p>
    </div> 
   ) 
}

export default AboutPage

Linking Gatsby Pages

To link Gatsby pages, use the Link component provided by the gatsby. First, import the Link component at the top of your file –

import { Link } from "gatsby"

Then, use the Link component to create links between pages. For example, to link from the index.js page to the about.js page, add the following code –

<Link to="/about">About Us</Link>

The above Link component will open the about.js page without page refresh.

Introduction to GraphQL

In this section, we will briefly discuss GraphQL. We will dedicated an entire article to learn GraphQL in detail.

GraphQL is a powerful query language for APIs that allows clients to request the data they need, making it a great fit for Gatsby. Gatsby uses GraphQL to source and transform data, enabling developers to easily create highly customizable websites.

Why Gatsby Uses GraphQL

Gatsby uses GraphQL for the following reasons:

• Flexibility: GraphQL allows developers to request specific data for their components, preventing over-fetching and under-fetching of data.
• Strong typing: GraphQL has a strong type system that helps catch errors during compilation and ensures that the data returned from queries matches the expected shape.
• Real-time updates: With GraphQL subscriptions, Gatsby can efficiently update components when the underlying data changes without manual refreshes.

How Gatsby Uses GraphQL

Gatsby uses GraphQL in two main ways –

• Data sourcing: Gatsby uses GraphQL to source data from local files, APIs, and databases.
• Data transformation: Gatsby uses GraphQL to transform data at build time, allowing developers to customize the data’s shape and format.

To use GraphQL in a Gatsby project, you need to define queries in your components or pages. You can write GraphQL queries using the graphql tag provided by the Gatsby package:

import { graphql } from "gatsby"

Then, define your GraphQL query within your component or page –

export const query = graphql`
  query {
    allMarkdownRemark {
      nodes {
        frontmatter {
          title
          date
        }
      }
    }
  }
`

After defining your query, Gatsby will pass the data to your component or page as a prop allowing you to access and display the data.

Conclusion

Gatsby’s building blocks, including components, pages, and GraphQL integration enable developers to create highly customizable and performant websites. By understanding and leveraging these core concepts, you can easily build powerful and scalable Gatsby projects.

This was a quick introduction to Gatsby pages and components. Gatsby is known as the static site generator, but it can also create dynamic, server-side rendered pages and even supports partial hydration. Partial hydration allows developers to create a page with static and dynamic components. We will learn more about it later in the series.