Цель обучения

Получить целостное представление о каждом инструменте стека (React, TypeScript, Vite, Tailwind CSS, Shadcn UI) и понять, как они взаимодействуют. В результате вы сможете самостоятельно создать и настроить проект с нуля, используя все указанные технологии без конфликтов и постоянных обращений к инструкциям.

Структура курса (3-5 встреч по 1-1,5 часа)

Сессия 1: Введение в React и TypeScript

• Что такое React и почему он нужен для UI
• Основы TypeScript: зачем типы, как их писать в компонентах
• Отличие React от Vite: React - библиотека, Vite - сборщик

Сессия 2: Vite как инструмент сборки

• Как Vite ускоряет разработку (HMR, быстрая сборка)
• Почему React можно запустить без Vite (через CRA или Webpack), но Vite удобнее
• Установка и конфигурация Vite для React + TypeScript

Сессия 3: Tailwind CSS и PostCSS

• Принцип работы Tailwind CSS - utility-first подход
• Роль PostCSS в обработке Tailwind-директив
• Почему возникает ошибка Unknown at rule @tailwind и как её исправить

Сессия 4: Shadcn UI и интеграция с остальным стеком

• Как Shadcn UI работает поверх Tailwind и React
• Добавление компонента Button, настройка всех зависимостей
• Решение ошибки Cannot find module '@/components/ui/button'

Сессия 5: TypeScript, пути и финальная сборка

• Настройка tsconfig.json для alias (@ как корень проекта)
• Проверка работы dev и build (продакшн сборка)
• Типизация props и стейта, специфические моменты для компонентов Shadcn

Формат работы

• После каждой встречи - домашнее задание (добавить новый компонент, починить ошибку, написать типы)
• Финальный результат: полностью настроенный проект, в котором вы понимаете каждый инструмент

Чего мы достигнем

• Чёткое понимание функций React, Vite, Tailwind, Shadcn и TypeScript
• Готовый шаблон с правильным alias, без предупреждений и стандартных ошибок
• Навык добавления новых UI-компонентов и их кастомизации
• Уверенность в самостоятельной разработке без копирования туториалов