Preact

Source file extensions: .js|.jsx|.ts|.tsx

Preact is a fast 3kB alternative to React with the same modern API.

Component

Greetings.jsx

/** @jsx h */
import { h } from 'preact';

export function MyComponent(props) {
  return <div>My name is {props.name}.</div>;
}

preact/compat

Preact can have React compatibility with aliases to preact/compact.

Aliases are supported through the alias field in package.json:

package.json

{
  ...
  "alias": {
    "react": "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat",
    "react/jsx-runtime": "preact/jsx-runtime"
  },
  ...
}

Stories

Preact JSX can be used in stories with the pragma @jsx.

/** @jsx h */
import { h } from 'preact';
import MyCounter from './index.js';

export const story1 = () => <MyCounter></MyCounter>;

Documentation

See MDX.

References