Publish and Reuse React Components to Build Gatsby Sites Faster

Publish and Reuse React Components to Build Gatsby Sites, Faster

How to reuse components across Gatsby projects.

GatsbyJS is a great way to build modern websites. It’s a popular framework that lets you enjoy the powers of the modern web stack, with relative ease of use, and without too much overhead.

As part of Gatsby’s “Modern Web” approach, it utilizes React to let you build user interfaces with components. This also means you can build reusable components that can later be used to build new sites and pages.

Reusing components between Gatsby sites is a great way to deliver faster, manage component updates and changes in your different sites, and provide your users with a consistent look and feel at every touchpoint.

In this demo, I’ll use Bit to publish components from a marketing site built with Gatsby , and use them to quickly compose a new gatsby site.

These are the steps we’ll go through:

1. Build a Gatsby marketing site — “Buy a Goldfish” :tropical_fish:
2. Use Bit to publish the site’s components
3. Build a new Gatsby site using components published from “Buy a Goldfish” :v:

So, what’s Bit?

When we share and reuse our components across projects — we can build sites faster and safer. We don’t have to waste time reinventing the wheel and can make sure we create a consistent experience for our users.

Bit is a platform that makes it easy to publish and document components from any project. It provides both a CLI tool for isolating and publishing components and a cloud hub to host and display them. Pretty useful when building different Gatsby websites with the same components.

1. Build My “Buy a Goldfish” Gatsby Web Site

I’ll be building a landing page for my goldfish business. I’m positive this will draw interest from many goldfish enthusiasts around the world.

My Site’s Structure

The styling in this project is done using styled-components. Every component is themed using the theme object (in the theme.js file) which will be published as well.

I’ve also classified my components into four groups: common, elements, blocks, and sections.

• common: These components are used on every page and have a “general effect” on the page.
• elements: These are very basic components, which means they are highly reusable and agnostic to their surrounding.
• blocks: These are complex, template-like, reusable components
• sections: These are very concrete component compositions that make up the page sections.

|-- src
   |-- components
      |-- common
         |-- Seo.js
         |-- Layout.js
         |-- theme.js 
      |-- sections
         |-- HeaderSection.js
         |-- GetStartedSection.js
         |-- etc.
      |-- elements
         |-- Button.js
         |-- TextInput.js
         |-- etc.
      |-- blocks
         |-- Features.js
         |-- HeaderForm.js
         |-- etc.

Reusable components

In this demo, I decided to publish my blocks, elements, and common components — and leave out the more concrete ‘sections’.

In general, there’s no absolute right or wrong to which components should be published. It all depends on the way you intend to use your collection. For example, it wouldn’t make much sense to publish very large compositions to a collection that serves as a design system but it does make sense for us since we’re using our collection to compose other, similar, websites.

Sharing Concrete or “Smart” Components

As mentioned earlier, there’s no reason why you shouldn’t share anything that you might find useful. It doesn't have to be solely pure and “dumb” UI components. It should be anything that’s useful for you and your team.

For example, in this demo, I’ve published the SEO component which queries data from the site metadata and tags the website accordingly. It may not seem like a very reusable component but in the context of Gatsby, it actually is.

The query should be structured the same across our different Gatsby projects. That’s also the case if we were to use the same headless CMS for multiple projects. If a specific logic is something we often use, then it should be a reusable component.

Publishing Components with Bit

To get started I’ll first install Bit on my machine:

$ npm install bit-bin --global

I’ll then head over to my project’s root directory and initialize a Bit workspace:

$ bit init

It’s time to start tracking my components. I’ll add all three groups and tag each of them with the corresponding namespace to make them easier to find and manage both in my local project and in their shared collection. I’ve used the * sign to select all components under each directory.

$ bit add src/components/elements/* --namespace elements
$ bit add src/components/blocks/* --namespace blocks 
$ bit add src/components/common/* --namespace common

I’ll then set up a compiler for the tracked components. That would essentially decouple them from my build setup and make sure they run in other projects.

bit import bit.envs/compilers/react --compiler

I’ll then ‘tag’ them (the -a or --all flag is used to select all tracked components that have been changed since the last tag).

$ bit tag -a

It’s time to head over to Bit.dev and create a new collection for my soon-to-be-published components. It’s free and takes about 1 minute.

I can now publish (“export”) my tagged components:

$ bit export eden.buy-a-goldfish// Publish to <user-name>.<collection-name>

And here’s the end result (notice I’ve also added example code so that I can now visually see and try-out the components):

Reusing component to build a new website

The response to my marketing page was good — I’ve received many emails that show me without a doubt that people are truly looking for a convenient golden pet

So, I've decided to launch a new marketing page with a simple “Buy Now” button and a different message.

To make things as simple as possible, I’ll start a new Gatsby project using the gatsby-starter-default starter.

gatsby new new-marketing-site https://github.com/gatsbyjs/gatsby-starter-default

I’ll use a few of my recently published components to create a simpler version of my previous header:

$ npm i @bit/eden.buy-a-goldfish.common.layout
$ npm i @bit/eden.buy-a-goldfish.blocks.header
$ npm i @bit/eden.buy-a-goldfish.blocks.header-text-group
$ npm i @bit/eden.buy-a-goldfish.elements.button

We can install Bit components using NPM or Yarn (we can also clone them into our repository using bit import so that we could modify them and push them back to their collection with a bumped version — but that’s beyond the scope of this tutorial).

As you can see, for the demo, I’ve used NPM.

I’ll then use these components in the index.js page.

I’d like to show some features on my new marketing page. For that, I'll install my Feature component. As you can see, it was built as a compound component so that it would be easy to add and customize new features listed on it (using JSX).

That’s great but that also creates much boilerplate. To make it easy on me and save me some time I’ve copied the example code presented on its page on Bit.dev .

$ npm i @bit/eden.buy-a-goldfish.blocks.features