Getting Started with a Preact App using React Components

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

Preact is a fast and lightweight JavaScript library for building user interfaces. It's often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it a good choice for projects where file size and load times are critical factors.

Prerequisites

System requirements for Syncfusion^® React UI components

Set up the Preact project

To create a new Preact project, use either an NPM or Yarn command:

npm init preact

Using one of the above commands will prompt you to configure the project as follows:

1. Define the project name: Specify the name of the project directly. For this guide, let's name the project my-project.

┌  Preact - Fast 3kB alternative to React with the same modern API
│
◆  Project directory:
│  my-project
└

2. Choose TypeScript as the framework variant to build this Preact project using Typescript and React.

┌  Preact - Fast 3kB alternative to React with the same modern API
│
◆  Project language:
│  ○ JavaScript
│  ● TypeScript
└

3. Then configure the project as below for this guide.

┌  Preact - Fast 3kB alternative to React with the same modern API
│
◆ Use router?
│
│    Yes / > No
│
◆ Prerender app (SSG)?
│
│    Yes / > No
│
◆ Use ESLint?
│
│    Yes / > No
│ 
└

4. After completing the above steps to create my-project, run the following command to navigate into the project directory:

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

To use Syncfusion^® React Chip components in the project, install the corresponding npm package. This guide uses the React Chip component as an example. To use the React Chip component in the project, the @syncfusion/react-buttons package needs to be installed using the following command:

npm install @syncfusion/react-buttons --save

Import Syncfusion^® CSS styles

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

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

Add Syncfusion^® React component

Follow the steps below to add the React Chip component to your project:

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

import { Chip } from '@syncfusion/react-buttons';

2. Next, add the Chip component in the application using the following code sample.

import { Chip, ChipProps } from '@syncfusion/react-buttons';
import './style.css'
import { render } from 'preact';

export default function App() {
     const people: ChipProps[] = [
        { text: 'Primary', value: 'primary', color: 'Primary' },
        { text: 'Info', value: 'info', color: 'Info' },
        { text: 'Error', value: 'error', color: 'Error' },
        { text: 'Success', value: 'success', color: 'Success' },
        { text: 'Warning', value: 'warning', color: 'Warning' }
    ];

    return (
        <div className="component-section" style={{ margin: '15rem' }}>
            {people.map((chip: ChipProps) => (
                <Chip key={chip.value} text={chip.text} value={chip.value} color={chip.color} />
            ))}
        </div>
    );
}

render(<App />, document.getElementById('app'));

Run the project

To run the project, use the following command:

npm run dev

The output will appear as follows:

See also

• Getting Started with Syncfusion^® React UI Component using Vite