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 Dropdown List component as an example. To use the React Dropdown List component in the project, the @syncfusion/react-dropdowns package needs to be installed using the following command:

npm install @syncfusion/react-dropdowns --save

npm install @syncfusion/react-dropdowns --save

Import Syncfusion^® CSS styles

Syncfusion^® React components are styled using built-in themes. The necessary Material CSS styles for the Dropdown List 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-lists/styles/material.css';
@import '../../node_modules/@syncfusion/react-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/react-popups/styles/material.css';
@import '../../node_modules/@syncfusion/react-dropdowns/styles/material.css'

@import '../../node_modules/@syncfusion/react-base/styles/material.css';
@import '../../node_modules/@syncfusion/react-lists/styles/material.css';
@import '../../node_modules/@syncfusion/react-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/react-popups/styles/material.css';
@import '../../node_modules/@syncfusion/react-dropdowns/styles/material.css'

Add Syncfusion^® React component

Follow the below steps to add the React Dropdown List component to the project:

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

import { DropDownList } from '@syncfusion/react-dropdowns';

import { DropDownList } from '@syncfusion/react-dropdowns';

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

import React from 'react';
import { DropDownList } from '@syncfusion/react-dropdowns';
import './style.css';

export default function App() {
    const sportsData = [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' }
    ];
    const fields = { text: 'Game', value: 'Id' };
  return (
    <div className="component-section dropdownlist-container">
      <DropDownList
        dataSource={sportsData}
        fields={fields}
        placeholder="Select a game"
        style={{ width: '300px' }}
      />
    </div>
  );
}

import React from 'react';
import { DropDownList } from '@syncfusion/react-dropdowns';
import './style.css';

export default function App() {
    const sportsData = [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' }
    ];
    const fields = { text: 'Game', value: 'Id' };
  return (
    <div className="component-section dropdownlist-container">
      <DropDownList
        dataSource={sportsData}
        fields={fields}
        placeholder="Select a game"
        style={{ width: '300px' }}
      />
    </div>
  );
}

Run the project

To run the project, use the following command:

npm run develop

npm run develop

The output will appear as follows: