Preact Introduction and Installation — Lightweight React Alternative

In this tutorial, you will learn about Preact Introduction and Installation. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Preact: understand the 3kB React-compatible framework, install it, create a project, and explore the core concepts of this lightweight UI library.

In this lesson, you'll install Preact, create a project, understand its differences from React, and run the development server. Preact is a fast 3kB alternative to React with the same modern API but a fraction of the bundle size.

What You'll Learn

How to create a Preact project using Vite, understand the file structure, recognize the key differences from React, and run the dev server with hot module replacement.

Why It Matters

Preact gives you the same component model as React but with a 3kB footprint. This means faster page loads, lower bandwidth costs, and better performance on mobile devices with slow networks.

Real-World Use

Doda Browser uses Preact for its extension popup UI because the 3kB bundle loads instantly when users click the extension icon, even on slow connections.

flowchart LR
    A[Install Node.js] --> B[Create Preact Project]
    B --> C[Explore Structure]
    C --> D[Run Dev Server]
    D --> E[Build for Production]
    style B fill:#673ab8,color:#fff

Installation

Create a new Preact project using Vite:

npm create vite@latest my-preact-app -- --template preact
cd my-preact-app
npm install
npm run dev

The Vite template scaffolds a Preact project with HMR enabled. The dev server starts at http://localhost:5173.

Project Structure

my-preact-app/
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

The src/main.jsx file is the entry point. It renders the App component into the DOM using render() from Preact, which works identically to ReactDOM.createRoot().

Your First Component

// src/App.jsx
export default function App() {
  return <h1>Hello from Preact!</h1>;
}

Output: The page renders "Hello from Preact!" with a 3kB library overhead instead of React's 45kB. The component is a simple function that returns JSX.

Common Mistakes

1. Confusing Preact with React: Preact looks like React but has subtle differences. Event handlers use onChange (not onInput for some events) and class instead of className in JSX.
2. Using React-specific packages without compat: React libraries like react-router-dom need preact/compat to work. Install preact/compat and configure aliasing.
3. Forgetting to install preact/hooks: Hooks like useState and useEffect are in the preact/hooks module. Import from preact/hooks not react.
4. Expecting ReactDOM APIs: Preact uses preact directly, not react-dom. Use import { render } from 'preact' instead of ReactDOM.createRoot().
5. Not aliasing react to preact/compat: Third-party libraries that import from react will break unless you configure Vite to alias react to preact/compat.

Practice Questions

1. What command creates a new Preact project? Answer: npm create vite@latest my-preact-app -- --template preact. This scaffolds a Preact project with Vite.

2. What is the bundle size of Preact? Answer: Approximately 3kB (gzipped), compared to React's 45kB.

3. How do you render a Preact component to the DOM? Answer: Use import { render } from 'preact' and call render(<App />, document.getElementById('app')).

4. Where do you import hooks from in Preact? Answer: From preact/hooks, not from react. For example: import { useState, useEffect } from 'preact/hooks'.

Challenge

Create a Preact project, then configure Vite to alias react to preact/compat so that React libraries work seamlessly. Verify by installing and importing react-router-dom.

Mini Project

Scaffold a Preact project, create a simple counter component with useState, and verify that the counter updates correctly. Then run npm run build and check the bundle size of the output.

FAQ

What's Next

Learn about Preact JSX and Rendering to understand how Preact compiles JSX and renders components to the DOM.