How to use React and Gatsby.js?

Introduction

Pairing React’s component-based approach with Gatsby.js’s static site generation creates a dynamic duo for crafting high-performance websites. In this guide, we’ll show you how to integrate React into a Gatsby.js project with a hands-on example, plus we’ll cover some handy Gatsby CLI commands to streamline your workflow.

What Are React and Gatsby.js?

React: A popular JavaScript library for building user interfaces. It helps you create reusable components and manage state with ease, making it perfect for interactive applications.
Gatsby.js: A static site generator that works with React to build fast, SEO-friendly websites. It generates static HTML at build time, so your site loads quickly and performs well.

Getting Started with Gatsby and React

Let’s dive into setting up a Gatsby.js project and using React to build your site.

1. Install Gatsby CLI

First things first, you need to have Node.js and npm installed. Then, you can install the Gatsby CLI (Command Line Interface) globally.

npm install -g gatsby-cli

2. Create a New Gatsby Project

Next, create a new project using the Gatsby CLI. Just replace my-gatsby-site with whatever you’d like to call your project.

gatsby new my-gatsby-site
cd my-gatsby-site

This command sets up a new Gatsby project in a directory called my-gatsby-site.

3. Start the Development Server

Now, start the development server to see your new Gatsby site in action.

gatsby develop

Open your browser and go to http://localhost:8000 to check out your site.

Essential Gatsby CLI Commands

Here are some useful Gatsby CLI commands to help you manage your project.

gatsby new [site-name] [starter]: Create a new Gatsby site using a starter template. For example gatsby new my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-default.
gatsby develop: Start the development server. This command serves your site at http://localhost:8000 and watches for changes.
gatsby build: Build your site for production. It generates optimized static files in the public directory, ready for deployment.
gatsby serve: Serve the production build of your site locally. Great for previewing how your site will look once live.
gatsby clean: Clear out the .cache and public directories. Useful if you need to start fresh or clear cached data.
gatsby info: Get details about your Gatsby environment, including the Gatsby version and installed plugins.
gatsby build --prefix-paths: Build the site with prefix paths enabled, which is helpful if your site is hosted from a subdirectory.
gatsby develop --no-telemetry: Start the development server without sending anonymous usage data to Gatsby. Good for those who prefer privacy.
gatsby plugin --help: Get help with Gatsby plugins and their commands. This command helps you manage and troubleshoot plugins.
gatsby upgrade: Upgrade Gatsby and related packages to their latest versions. Keeps your project up-to-date with new features and fixes.

Adding a React Component

Let’s add a React component to your site. Create a new file named Greeting.js in the src/components directory.

// src/components/Greeting.js
import React from 'react';
const Greeting = () => {
  return <h1>Welcome to Your Gatsby Site!</h1>;
};
export default Greeting;

Using the React Component in a Page

To use your new Greeting component, import it into a Gatsby page. Open src/pages/index.js and update it.

// src/pages/index.js
import React from 'react';
import Greeting from '../components/Greeting';
const IndexPage = () => {
  return (
    <div>
      <h1>Hello from Gatsby!</h1>
      <Greeting />
    </div>
  );
};
export default IndexPage;

Now, visiting http://localhost:8000 will show "Hello from Gatsby!" followed by "Welcome to Your Gatsby Site!" from your Greeting component.

Example Building a Blog Page

Let’s expand this by creating a simple blog page.

1. Create a Blog Component

Add a new component for blog posts. Create a file named BlogList.js in src/components.

// src/components/BlogList.js
import React from 'react';
const BlogList = ({ posts }) => {
  return (
    <div>
      <h2>Blog Posts</h2>
      <ul>
        {posts.map((post, index) => (
          <li key={index}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};
export default BlogList;

2. Add Blog Data

Create a blog page with static data in src/pages/blog.js.

// src/pages/blog.js
import React from 'react';
import BlogList from '../components/BlogList';
const BlogPage = () => {
  const posts = [
    { title: 'Understanding Gatsby.js' },
    { title: 'Getting Started with React' },
    { title: 'Combining React and Gatsby' },
  ];

  return (
    <div>
      <h1>Blog</h1>
      <BlogList posts={posts} />
    </div>
  );
};
export default BlogPage;

Visit http://localhost:8000/blog to see your new blog page.

Benefits of using React with Gatsby.js

Performance: Gatsby’s static site generation ensures fast loading times, while React adds interactivity.
Component Reusability: React’s modular approach makes your code more manageable and reusable.
Optimized Experience: Gatsby includes optimizations like code splitting and image handling, while React ensures smooth user interactions.
Extensive Ecosystem: Both Gatsby and React have robust ecosystems with a variety of plugins and libraries to enhance your site.

Summary

Combining React with Gatsby.js gives you a powerful toolkit for building modern, high-speed websites. By setting up a Gatsby project and integrating React components, you can create dynamic and efficient web experiences. With the essential Gatsby CLI commands at your disposal, you’ll be well-equipped to manage and develop your project with ease. Enjoy building your fast and interactive web applications!