Frameworks
Vite
Vapor UI 컴포넌트를 Vite와 React에서 사용하는 방법Vite + React
Vite는 빠른 개발 서버와 최적화된 빌드를 제공하는 모던 프론트엔드 빌드 도구입니다. React와 함께 사용하면 뛰어난 개발자 경험을 제공합니다.
프로젝트 생성
Vite React 프로젝트를 생성하고 기본 의존성을 설치합니다.
# Vite React 프로젝트 생성 (TypeScript 템플릿)
npm create vite@latest
# 프로젝트 폴더로 이동
cd my-vapor-vite-app
# 기본 의존성 설치
npm installVite 설정
Vite 설정을 구성합니다.
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
});컴포넌트 사용 예시
import { Card, Text } from '@vapor-ui/core';
export default function HomePage() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<Card.Root className="max-w-md">
<Card.Body>
<div className="flex flex-col gap-4">
<Text asChild typography="heading1" foreground="normal-200">
<h1>Welcome to Vapor UI!</h1>
</Text>
<Text>
이것은 Vite와 React와 함께 Vapor UI 컴포넌트를 사용하는 예시입니다.
</Text>
</div>
</Card.Body>
</Card.Root>
</main>
);
}