В этой статье мы расскажем о том, как настроить проект на базе Vite и React с использованием библиотеки компонентов shadcn UI. Установив Vite, автор столкнулся с отсутствием официальной документации по настройке для React, что побудило его найти решение и поделиться им.
📰 Читайте больше IT-новостей в нашем блоге
Первый шаг — создание нового проекта Vite. Для этого в терминале нужно ввести команду: `npm create vite@latest`. После этого добавляем Tailwind CSS, выполнив команду `npm install tailwindcss @tailwindcss/vite`. Это позволит нам использовать стили Tailwind в нашем приложении.
Далее необходимо настроить файлы приложения. В файле `src/index.css` заменяем содержимое на `@import ‘tailwindcss’;`. Также в проекте отсутствует файл `jsconfig.json`, который нужно создать с помощью команды `touch jsconfig.json`. В этот файл добавляем конфигурацию для компилятора JavaScript.
Следующий шаг — настройка `vite.config.js`. Необходимо удалить все существующие строки и вставить следующий код:
«`javascript
import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’
import tailwindcss from ‘@tailwindcss/vite’
import path from ‘path’
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘./src’),
},
},
})
«`
Теперь пора установить shadcn в проект, для этого выполняем команду `npx shadcn@latest init`. Вам будет предложено выбрать базовый цвет для компонентов. После этого можно добавлять компоненты, например, кнопку, с помощью команды `npx shadcn@latest add button`. Импортируем кнопку в `app.js` и используем ее в компоненте:
«`javascript
import { Button } from ‘@/components/ui/button’
function App() {
return (
)
}
export default App
«`
После выполнения команды `npm run dev` вы сможете увидеть результаты в браузере. В итоге, данный туториал предоставляет четкие инструкции по настройке shadcn с проектом на Vite и React, что может быть полезно разработчикам, работающим с этими технологиями.
Материал подготовлен Digital Agency PerfectWeb
