Getting Started with a Gatsby App using React Components

This guide walks you through setting up a Gatsby project and integrating the Syncfusion^® React components.

Gatsby is an open-source framework built on React that enables developers to create fast, modern websites and web applications. It combines the best features of React, GraphQL, and modern JavaScript to build a fast and scalable website.

Prerequisites

System requirements for Syncfusion^® React UI components

Set up the Gatsby project

1. To create a new Gatsby project, use one of the commands that are specific to either NPM or Yarn.

npm create gatsby

npm create gatsby

2. Using one of the above commands will lead you to set up additional configurations for the project, as below:

Define the project name: We can specify the name of the project directly. Let's specify the name of the project as my-project for this guide.

What would you like to call your site?
√ · my-project
What would you like to name the folder where your site will be created?
√ / my-project
√ Will you be using JavaScript or TypeScript?       
· TypeScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
√ Would you like to install additional features with other plugins?No items were selected

Thanks! Here's what we'll now do:

    Create a new Gatsby site in the folder my-project

? Shall we do this? (Y/n) » Yes

What would you like to call your site?
√ · my-project
What would you like to name the folder where your site will be created?
√ / my-project
√ Will you be using JavaScript or TypeScript?       
· TypeScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
√ Would you like to install additional features with other plugins?No items were selected

Thanks! Here's what we'll now do:

    Create a new Gatsby site in the folder my-project

? Shall we do this? (Y/n) » Yes

3. Upon completing the aforementioned steps to create my-project, run the following command to jump into the project directory:

cd my-project

cd my-project

Now that my-project is ready to run with default settings, let's add Syncfusion^® React component to the project.

Add Syncfusion^® React packages

This guide uses the React Toolbar component as an example. To use the React Toolbar component in the project, the @syncfusion/react-navigations package needs to be installed using the following command:

npm install @syncfusion/react-navigations --save

npm install @syncfusion/react-navigations --save

Import Syncfusion^® CSS styles

Syncfusion^® React components are styled using built-in themes. The necessary Material CSS styles for the Toolbar component and its dependents were imported into the src/pages/style.css file.

@import '../../node_modules/@syncfusion/react-base/styles/material.css';
@import '../../node_modules/@syncfusion/react-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/react-popups/styles/material.css';
@import '../../node_modules/@syncfusion/react-navigations/styles/material.css';

@import '../../node_modules/@syncfusion/react-base/styles/material.css';
@import '../../node_modules/@syncfusion/react-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/react-popups/styles/material.css';
@import '../../node_modules/@syncfusion/react-navigations/styles/material.css';

Add Syncfusion^® React component

Follow the below steps to add the React Toolbar component to the project:

1. Before adding the Toolbar component to your markup, import the Toolbar component in the src/pages/index.tsx file.

import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';

import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';

2. Then, add the Toolbar component in the application using the following code sample. .

import React from 'react';
import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';
import { Button, Color, Variant } from '@syncfusion/react-buttons';
import { MenuIcon } from '@syncfusion/react-icons';
import './style.css';

export default function App() {
  return (
    <div className="component-section toolbar-demo-container" style={{ margin: '15rem' }}>
      <Toolbar aria-label="Navigation header">
        <ToolbarItem>
          <Button variant={Variant.Standard} icon={<MenuIcon />} />
        </ToolbarItem>
        <ToolbarSpacer />
        <ToolbarItem>
          <Button variant={Variant.Standard}>Projects</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant={Variant.Standard}>Reports</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button title='Free Trial' color={Color.Primary} variant={Variant.Filled}>Free Trial</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

import React from 'react';
import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';
import { Button, Color, Variant } from '@syncfusion/react-buttons';
import { MenuIcon } from '@syncfusion/react-icons';
import './style.css';

export default function App() {
  return (
    <div className="component-section toolbar-demo-container" style={{ margin: '15rem' }}>
      <Toolbar aria-label="Navigation header">
        <ToolbarItem>
          <Button variant={Variant.Standard} icon={<MenuIcon />} />
        </ToolbarItem>
        <ToolbarSpacer />
        <ToolbarItem>
          <Button variant={Variant.Standard}>Projects</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant={Variant.Standard}>Reports</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button title='Free Trial' color={Color.Primary} variant={Variant.Filled}>Free Trial</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

Run the project

To run the project, use the following command:

npm run develop

npm run develop

The output will appear as follows: