DEV Community 👩‍💻👨‍💻

Cover image for Install Preact with Typescript using Vite
larainfo
larainfo

Posted on • Originally published at larainfo.com

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
Enter fullscreen mode Exit fullscreen mode

Install vite via yarn:

yarn create vite
Enter fullscreen mode Exit fullscreen mode

Select preact project

 Project name:  preact-vite
? Select a framework:  - Use arrow-keys. Return to submit.
  vanilla
  vue
  react
  preact
  lit
  svelte
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now move to project directory and install & run npm:

cd preact-vite
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

preact with typescript using vite tool

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.