Vite를 사용하여 Typescript로 Preact 설치

섹션에서는 vite 도구를 사용하여 typescript와 함께 preactjs를 설치합니다. Vite는 더 빠른 개발 경험을 제공하는 최신 빌드 도구입니다. 동일한 최신 API를 사용하는 React에 대한 빠른 3kB 대안.

PreactJS 기능

1. 친숙한 React API 및 패턴: ES6 클래스, 후크 및 기능적 구성 요소

2.간단한 preact/compat 별칭을 통한 광범위한 React 호환성

3. 필요한 모든 것: JSX, VDOM, DevTools, HMR, SSR.

4. 서버 사이드 렌더링에서 고도로 최적화된 diff 알고리즘 및 원활한 수화

5. 모든 최신 브라우저 및 IE11 지원

6. 플러그형 스케줄러를 사용한 투명한 비동기 렌더링

7.Preact CLI를 사용한 즉각적인 프로덕션 등급 앱 설정

Preact용 Vite 프로젝트 만들기

npm을 통해 vite 설치:

npm create vite@latest

원사를 통해 vite 설치:

yarn create vite

사전 프로젝트 선택

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

다음 Typescript로 preact 선택

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

이제 프로젝트 디렉토리로 이동하여 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>
    </>
  )
}