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.
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.
3. Upon completing the aforementioned steps to create my-project, run the following command to jump into the project directory:
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:
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.
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.
2. Then, add the Dropdown List component in the application using the following code sample.
.
Run the project
To run the project, use the following command:
The output will appear as follows: