> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to Preact

> Fast 4kB alternative to React with the same modern API

Preact is a fast, lightweight JavaScript library for building user interfaces. At just 4kB, it provides the same modern API as React, including hooks, functional components, and class components, but with a significantly smaller footprint.

<CardGroup cols={2}>
  <Card title="Quick start" icon="rocket" href="/quickstart">
    Get up and running with Preact in minutes
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Learn how to install and set up Preact
  </Card>

  <Card title="API reference" icon="code" href="/api/render">
    Explore the complete Preact API
  </Card>

  <Card title="Hooks" icon="link" href="/api/hooks/use-state">
    Use hooks for state and side effects
  </Card>
</CardGroup>

## Why Preact?

Preact offers all the power of Virtual DOM components without the overhead:

* **Tiny size** - Just 4kB gzipped, so you can ship less JavaScript to your users
* **React-compatible** - Use the same API you already know, including ES6 classes, hooks, and functional components
* **Fast** - Highly optimized diff algorithm and seamless hydration from server-side rendering
* **Modern features** - JSX, Virtual DOM, DevTools, Hot Module Replacement, and Server-Side Rendering
* **Wide browser support** - Works in all modern browsers
* **Extensive ecosystem** - Access to preact/compat for React library compatibility

## Hello World

Here's a simple example to get you started with Preact:

```jsx theme={null}
import { h, render } from 'preact';

// Create your UI tree and append it to document.body
render(
  <main>
    <h1>Hello World!</h1>
  </main>,
  document.body
);
```

## Component-based architecture

Preact lets you build your UI by assembling trees of components. Components are functions or classes that return a description of what their tree should output:

<Tabs>
  <Tab title="Functional component">
    ```jsx theme={null}
    import { render } from 'preact';
    import { useState } from 'preact/hooks';

    const App = () => {
      const [input, setInput] = useState('');

      return (
        <div>
          <p>Do you agree to the statement: "Preact is awesome"?</p>
          <input 
            value={input} 
            onInput={e => setInput(e.target.value)} 
          />
        </div>
      );
    };

    render(<App />, document.body);
    ```
  </Tab>

  <Tab title="Class component">
    ```jsx theme={null}
    import { Component, render } from 'preact';

    class App extends Component {
      state = { input: '' };

      handleInput = (e) => {
        this.setState({ input: e.target.value });
      };

      render() {
        return (
          <div>
            <p>Do you agree to the statement: "Preact is awesome"?</p>
            <input 
              value={this.state.input} 
              onInput={this.handleInput} 
            />
          </div>
        );
      }
    }

    render(<App />, document.body);
    ```
  </Tab>
</Tabs>

## Core concepts

### Virtual DOM

Preact uses a Virtual DOM to efficiently update the browser's DOM. When you call `render()`, Preact creates a tree representation of your UI and updates only the parts that have changed.

### JSX syntax

While you can use Preact with standard JavaScript, JSX provides a more intuitive way to describe your UI. JSX looks like HTML but is actually JavaScript:

```jsx theme={null}
const element = <h1>Hello, world!</h1>;
```

### Components

Components let you split your UI into independent, reusable pieces. You can create components as functions or ES6 classes:

* **Functional components** - Simple functions that accept props and return JSX
* **Class components** - ES6 classes that extend `Component` and have lifecycle methods

### State and props

* **Props** - Read-only data passed from parent to child components
* **State** - Mutable data managed within a component that triggers re-renders when updated

## Next steps

<CardGroup cols={2}>
  <Card title="Install Preact" icon="download" href="/installation">
    Set up Preact in your project
  </Card>

  <Card title="Build your first app" icon="hammer" href="/quickstart">
    Follow our step-by-step quickstart guide
  </Card>
</CardGroup>