install preact with typescript using vite

In section we will install preactjs with typescript using vite tool. Vite is modern build tool which provide faster development experience. Fast 3kB alternative to React with the same modern API.


PreactJS Features

1.Familiar React API & patterns: ES6 Class, hooks, and Functional Components

2.Extensive React compatibility via a simple preact/compat alias

3.Everything you need: JSX, VDOM, DevTools, HMR, SSR.

4.Highly optimized diff algorithm and seamless hydration from Server Side Rendering

5.Supports all modern browsers and IE11

6.Transparent asynchronous rendering with a pluggable scheduler

7.Instant production-grade app setup with Preact CLI


Create Vite Project For Preact

Install vite via npm:

npm create [email protected]

Install vite via yarn:

yarn create vite

Select preact project

✔ Project name: … preact-vite
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
  react
❯  preact
  lit
  svelte

Next Select preact with typescript

✔ Project name: … preact-vite
✔ Select a framework: › preact
? Select a variant: › - Use arrow-keys. Return to submit.
  preact
❯  preact-ts

Now move to project directory and install & run npm:

cd preact-vite
npm install
npm run dev


src/app.tsx

import { useState } from 'preact/hooks'
import preactLogo from './assets/preact.svg'
import './app.css'

export function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://preactjs.com" target="_blank">
          <img src={preactLogo} class="logo preact" alt="Preact logo" />
        </a>
      </div>
      <h1>Vite + Preact + TypeScript</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/app.tsx</code> and save to test HMR
        </p>
      </div>
      <p class="read-the-docs">
        Click on the Vite and Preact logos to learn more
      </p>
    </>
  )
}
preact with typescript using vite tool