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 vite@latest

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>
    </>
  )
}

Blog

Install Preact with Typescript using Vite

saim

Create Vite Project For Preact

Join Our Newsletter. No Spam, Only the good stuff.

Related