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>
</>
)
}
Top comments (0)