#Preact

In this document, you will learn how to build a Preact application using Rsbuild.

#Create a Preact application

Use create-rsbuild to create a Preact application with Rsbuild. Run the following command:

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

Then select Preact when prompted to "Select framework".

#Use Preact in an existing project

To compile Preact, you need to register the Rsbuild Preact Plugin. The plugin will automatically add the necessary configuration for Preact builds.

For example, register in rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginPreact } from '@rsbuild/plugin-preact';

export default defineConfig({
  plugins: [pluginPreact()],
});

#Preact Fast Refresh

Preact plugin uses @preact/prefresh and @rspack/plugin-preact-refresh to hot reload Preact components.

#Component recognition

Prefresh needs to be able to recognize your components. This means that components should start with a capital letter and hooks should start with use followed by a capital letter. This allows the plugin to effectively recognize these.

Do note that a component as seen below is not named:

export default () => {
  return <p>Want to refresh</p>;
};

Instead do:

const MyComponent = () => {
  return <p>Want to refresh</p>;
};

export default MyComponent;

When you are working with HOC's be sure to lift up the displayName so the plugin can recognize it as a component.