Shadcn UI с Reac t JS. Установка и компоненты. Проект Airbnb, часть 2

Telegram channel code: https://t.me/+friZxyBulgNmYjE6 Chat: https://t.me/+QAxmsKj2HyWfEKzz My original courses: 📦 HTML coder: https://webcademy.ru/htmlstart 🛠️ Frontend developer: https://webcademy.ru/frontend 🐘 PHP website development: https://webcademy.ru/phpcourse/ : ... https://webcademy.ru 00:00 Stream Start, Airbnb Continuation Plan 00:39 Why Shadcn UI and What It Provides 03:01 What Was Done in Part 1, Current Page Structure 08:04 Fixed Images in ListingCard via JSON Data 12:08 Added a Footer (Codex Based on a Screenshot) 13:19 Removing SCSS, Sticking with CSS + Tailwind 16:19 Correct Layout in RouterProvider for Link to Work in Header 18:37 Installing Tailwind CSS (Vite) According to the Docs 22:52 Create src/index.css and Include it in Main.jsx 24:03 Remove Reset CSS, Rename App Styles 25:47 Testing Tailwind with Classes (text, font-bold, underline) 26:48 Preparing for Shadcn UI: alias @ in vite.config 27:55 Creating jsconfig.json (baseUrl, paths) 31:57 Initializing Shadcn UI (npx shadcn@latest init) 35:06 Choosing a base color (Slate and similar gray palettes) 36:20 What Shadcn adds to index.css (+ tailwind-animate) 37:55 Installing Button and where it appears (components/ui) 39:34 Using Button, variants/sizes (without TS tooltips) 41:31 How to read component docs, installing via add 42:45 Radix UI vs. Base UI and which to choose 45:06 Setting up Alert, building your own wrapper component 47:58 Demo errors (alertAction, icons), manual edits 52:05 Installing all components in one command (--all) 54:19 Cleaning up the demo code from App 55:18 Moving on to Listing Options and the Select plan 55:58 Course block (advertisement/announcement) 59:19 Conclusion: what we did today, questions/chat, plans for the next stream