Shadcn UI - создавать приложения на React еще не было так просто! Гайд за 30 минут

[@REDGroup]

Выглядит круто, надо пощупать.

[@2difficult2do]

👍Рассказ хорош, давай, давай вепред, контент в кайф, можно вот это всё почаще😻

[@zakharkibanov8929]

🧙‍♂красный нос господину за 3м столиком))) с комментарием согласен, подписка

[@dxmbro]

Экстримкод референс

[@loground]

Отличный гайд, спасибо! Я только начинаю и умираю от всего, связанного с вёрсткой. Эта "библиотека" выглядит как клёвое решение!

[@klamathmomento8280]

мне понравился такт и голос - ты крутая !

[@seryozhamangushev9638]

Это очень классная либа, а то надоело по 100 раз стилизацию ui пилить, подход просто поразил!

[@ТатьянаДжанаева-ю4з]

Супер, спасибо! желаю развития вашему каналу!

[@enotnt]

Девочка кодит такой кайф смотреть!)))

[@VizivikRu]

Да, это весьма удобно!

[@Marina-1-7]

Спасибо большое. Классный гайд по Shadcn 👍

[@whiteltd5970]

Спасибо и газ в пол! Узнал от вас про этот подход и вы не представляете как этот вариант нас сейчас спасет. У нас мини-команда мы делаем проект в котором сроки сдачи проекта горят, верстать нужно быстро и качественно. Подход с которым вы поделились, он нам поможет и я уверен, мы уложимся в срок и сдадим успешный кейс.

[@AlexanderBogdanov-dw6cw]

Огромное спасибо вам за видео

[@awenn2015]

Спс, давно искал как быстро делать интерфейсы для typescript из json обьекта 🎉

[@galichandreyschool]

Классный контент! 😊 Продолжайте, пожалуйста! Только вперёд! 😀👍

[@dmitry2095]

Нет ничего лучше, чем свой код написанный с нуля, который можно переносить в новый проект.

[@neproger3494]

Полина, молодец🤙

[@Phoenix_coding]

Канал - находка. Девушка умница - красавица

[@Phoenix_coding]

Как глоток свежего воздуха😊👍

[@spllit9212]

Теперь ждём видео по Tailwind

[@oleksiismirnov666]

Можно пожалуйста в отдельном видео о Tailwind и чем его использование отличается от простого прописывания всех стилей в атрибут style?

[@ooshkapooshkin8048]

это просто наборо стилей, которые созданы за тебя и которые дают применять стили просто вешая классы

[@cat.basilio]

Да, лучшая ui "библиотека" на данный момент.

[@alexanderkomanov4151]

Супер!!!!

[@Disorrder]

Хорошая технология, узнал о ней недавно, собираемся для продакшена делать свой UI kit, как раз смотрим на эту штуковину. Я бы не стеснялся называть её библиотекой, даже если авторы не хотят так её называть. Ну и что, что файлы компонентов в итоге лежат в src, а не node modules, всё равно это библиотека, ничто не мешает перенести эти файлы в другой проект или вообще собрать их в пакет. 🤷🏻‍♂️ Да, подход не совсем стандартный, но другого удобно термина не придумали, да и противоречий никаких нет. Можно назвать генератором, типа как yeoman, можно библиотечным генератором 🤷🏻‍♂️ Однако есть минус у такого подхода: если в компоненте есть какой-то баг, то его придётся исправлять каждому, после модификации уже не получится обновить 😅 Зато полный доступ ко всему коду, не надо придумывать слоты там всякие

[@tomtomson8099]

Там через консольные команды можно сделать дифф с тем, что у них в коде и принять изменения, если нужно

[@Akvi-v3b]

А если обычный ReactApp то не будет работать?И что если не использовать тайлвинт?

[@ilyagamepub]

Хорошее видео, очень понравился контент. Сам в разработке и очень приелись всякие мантины да antd, жаль в нашей компании не произойдет революции, но хоть на ютубе посмотрю на удобное решение😂

[@JIKAIII]

Спасибо за видео, хорошая подача, интересная тема) Успехов в развитии канала)

[@romastyi83]

Хорошая технология говоришь? Для чего она вообще, если ее нельзя использовать на реальных проектах? Дизайнер сделал макет и где там прилепить тайлвинд?

[@cranberry888]

очень классный гайд, понраивлось как ты объясняешь продолжай в том же духе можешь пожалуйста посоветовать как выучить typescript, handbook на официальном сайте это норм ресурс?

[@polinajs]

всегда сложно советовать как учить что-либо, потому что кому-то handbook'a и правда достаточно, а кому-то очень тяжело читать любые документации. Пробуй, там понятно будет. По личному мнению TS очень хорошо учится на практике, можно сразу на Реакте его учить, он довольно интуитивен. Сделать минимальный CRUD проект. Я сама так и выучила, меня просто закинули на проект с TS'ом, хочешь не хочешь научилась:) А углубленно, как база освоится, можно и по видосам на ютюбе, их довольно много

[@ilyamahin4875]

Семантически правильнее писать не div а header =>

[@rejke8217]

Спасибо за интересный рассказ, очень крутое решение, если в проекте используется tailwind. Кстати про проверку callback'a на существование, может быть знаешь, может быть будет полезна инфа: вместо onClick && onClick(e) можно написать onClick?.(e)

[@АнастасияК-н5ф]

Видео отличное, но непонятно как устанавливать на nuxt 3

[@puryganikita3975]

То как вы описываете процесс кастомизации, после слова "материал" дает понять, что сложен он для вас просто из-за отсутствия понимания концепции Модуль-Слот. В том же mui достаточно просто посмотреть слот через код элемента и забить стилизацию в тему. Но нет, лучше потратить время на сырую либу, которую в продакшн тянуть все равно, что убить проект до его начала.

[@bezborodovanton]

Здравствуйте, я только начал изучать реакт. Можете подробнее расписать свой комментарий для новичков - вы против того, чтобы использовать Shadcn и за то, чтобы использовать mui? Я насколько понимаю, shadcn - это просто хорошие "заготовки" для компонентов, и используя такие заготовки, можно не тянуть лишние зависимости в проект. А mui - наоборот, это готовая библиотека с ui компонентами, которые тянутся целиком в проект и будут в коде, даже если вы не используете всех возможностей этой библиотеки. Моя цель - научиться делать легковесные приложения на реакте, что бы вы порекомендовали мне как начинающему разработчику?

[@puryganikita3975]

@@msttont Сам автор позиционирует эту библиотеку, как "решение для быстрой верстки на хакатоне". Используйте, что душе угодно. С удовольствием понаблюдаем за стремительным увеличением штата, из-за проблем с масштабируемостью. Практика показывает, что, в большинстве случаев, чем проще решение, чем оно более высокоуровневое, тем больше проблем в ближайшем будущем. Сравнивать инструмент для верстки и полноценную UI библиотеку, на мой взгляд вообще глупо)

[@7iomka]

Я бы посмотрел в сторону компромиссных либ типа mantine, у которых с кастомизацией стилей по слотам через классы просто сказка@@bezborodovanton

[@apluspeace]

У меня есть вопросик. После того как поменял сss переменную --primary на синий, кнопка на hover становится полностью белой, в видео я такого не вижу. С чем это может быть связано?

[@apluspeace]

Понял, запятые не удалил скопировав из палитры гугла

[@МойМульт-е2х]

подскажите хакатону по вебу пожайлуста

[@Кашель-о5у]

За luicide спасибо

[@VolodkaBobovich]

Сними еще ролики про Tailwind и React-Hook-Form

[@noname-nh8mx]

React-Hook-Form никому не советую изучать\использовать. Подходит только для простейших кейсов, где не нужно думать над оптимизацией. Если форма становится сложнее чем авторизация - начинаются пляски с бубном невообразимых масштабов

[@arya3961]

@@noname-nh8mx, а что посоветуете тогда?

[@hungrycoder339]

Остается воспрос, как быстро это работает. Потянет ли в больших проектах? Насколько тяжелый будет готовый билд с таким количеством пакетов и т.д.

[@VolodkaBobovich]

Сейчас это никого не колышет. Работает - и ладно. А за оптимизацию можно еще столько же денежек постричь.

[@Fortyna007]

Это же по сути те же самые простые компоненты, написанные на Tailwind

[@igork5095]

Ничего не понял )) чем эта библиотека, а это по всем признакам библиотека, лучше Material Ui или скажем Chakra Ui. В которых элементарно меняются стили, задаются свои таким же образом . Причем даже проще.здесь мы передаем класс пропсами , так ещё нужно понять что делает этот класс. В Chakra например мы просто пропсами передали стиль который хотим переопределить и все )) . Опять же устанавливать каждый компонент отдельно, возможно в этом и есть какой-то смысл, но мне , так, на вскидку )) показалось это вообще неудобно.

[@artemsharapanyk3352]

Полезная штука, девочка ты молодец!

[@KnowingCat]

зашел, посмотрел. пара десятков зависимостей почти на 8 метров. Нах она такая нужна. А да, для петов разве что. Ну и на собраниях самых лютых бездельников, называемых хатаконами =)

[@АренШмакр]

Где видео?

[@mur3636]

Классное видео, но устал наблюдать как вручную происходит форматирование отступов. Используй cmd+alt+F и все отсутпы автоматически выровняются. ))

[@Skywrathes]

Не могу понять как это использовать с next

[@polinajs]

Точно так же абсолютно как и без next. На сайте shadcn есть раздел next в installation. Установка даже проще, чем с vite

[@Skywrathes]

@@polinajs Но я хочу без tailwind

[@polinajs]

@@Skywrathes тогда shadcn не подходит

[@valer0chka189]

Antd, mui?

[@igorsenichev3779]

Спасибо, интересно и полезно! Бубет круто, если снимете видео подробное про Taiwind css для работы в нем. Развития вашему каналу 👍

[@АлександрКасатов]

Еще одна новейшая беспрецедентная и переворачивающая мир технология на голову бедного фронтендера) Для прототипирования выглядит хорошо (собственно также хорошо, как и все существующие уже библиотеки), для использования с реальным дизайном - больше времени потратишь на кастомизацию, чем на создание своей либы с нуля по ui-kit. Потому что для того, чтобы все сделать правильно, придется углубляться в доку, изучить best practicies, погуглить "а как в этой библиотеке сделать то-то..."., и так далее. По сути выглядит как очередная надеющаяся стать хайповой штука, не имеющая под собой ничего особо нового.

[@aximas778]

Классная технология, теперь общие компонентики можно и не создавать в ручную

[@bro_zen]

Только не вайт а вит. Vite (French word for "quick", pronounced /vit/, like "veet")

[@KimarTV]

Это под vue работает или только под реакт?

[@mur3636]

Переходи на react а то так и будешь все время в роли догоняющего со своим vue ))

[@aleksandrkrais7504]

​@@mur3636, какой-то глупый совет, ты бы его переосмыслил, что ли. или ты из разряда react-разработчиков?:)

[@akella6084]

@@mur3636 Vue сейчас гораздо лучше, чем React.

[@alex_akuna]

Это только для реакта?

[@ViperWenom]

Для vue есть quasar

[@cdeblog]

Вит читается как Вит, а не Вайт 😊 За обзор лайк, подписка, но библиотека так себе, особенно эти всякие тайлвиндв 😱

[@soul_loneliness]

Спасибо за обзор! Что то новенькое, правда непонятно зачем каждый компонент одтельно ставить через npx, просто привык что поставил либу всё, тягай какие хочешь компоненты без доп установок

[@polinajs]

Это для того, чтобы не перегружать свой проект. Либы скачиваются в node_modules, а эта штука в нашу папку компонентов. Поэтому часто мы хотим этими моментами управлять и не качать себе лишнего

[@relaxingwunderings]

Очень классно) жду новых новостей от вас от ui сайтов про фронтенд...

[@soul_loneliness]

@@polinajs о эт круто, устил видимо этот момент, тогда достаточно знать какие компоненты понадобятся выкачать пачкой, поднастроить под себя вот тебе и своя кастомная либа, пока минусов не видно👍

[@shittywizzard5727]

Radix также разбит на мини пакеты с компонентами

[@pryanik150]

Tailwind зло 😢Пожалуйста, не надо его рекламировать)

[@Mr.Bellamy]

а как мы иначе будем определять кого не брать на работу? Тайлвинд нравится? - Да -ОТКАЗАНО

[@mskamFlint]

Искал рецепт классического приготовления борща, а выдало данные видео...(((

[@nick-ui]

Тема хорошая, но это никакая не технология, а вверх на radix ui component library

[@alext6516]

vite (на французском - быстрый) читается как вит, не вайт 😱 видос огонь, долго тупил с псевдонимами папок, потому что компоненты в /src/features привык создавать, и вроде осознавал в чем собака зарыта, но не понимал. 10 минут видоса могли сэкономить несколько часов

[@zi0wiz]

теииил=( ненавижу... хотя написаный форм уже ништяк... надо будет тестануть

[@Kira_sk]

Не понятно чем вам Chakra не устраивает

[@noname-nh8mx]

недавно попробовал чакру на небольшом проекте где очень важен page speed insights performance. Чакра тащит за собой css in js, который снимает этак 10-20 баллов на мобиле из-за увеличения main thread work + подключение провайдера (что полного, что base) затаскивает порядка 80кб неиспользуемого кода (увеличивает метрику unused js и тоже снимает порядка 10 баллов). В итоге пришлось убирать чакру (заменил mantine, там таких проблем не обнаружил )

[@e_viskhan]

@@noname-nh8mx случайно такой же анализ для mui не делал? было бы интересно прочитать

[@noname-nh8mx]

@@e_viskhan не, но подозреваю что примерно как у чакры из-за motion-а. Любят в последнее время компонентные либы css in js. Мантин из этого ряда выделяется, одна из немногих либ которая написана на css модулях. Возможно css in js не будет проблемой для pagespeed если юзаешь серверные компоненты (но это не точно, только в планах потыкать)

[@martinika-2005]

++

[@lambientos]

Нафиг этот tailwaind

[@igorshingelevich7627]

Ссылка на онлифанс?

[@mfs9408]

Пришёл на проект, в котором shadCn и tailwind. Это просто какой то кошмар. Вместо того, чтобы быстро писать компоненты в одну строчку, я пишу их в 10 и параллельно изучаю ужаснейшую документацию. Не используйте это говно. Оно настолько корявое и сломанное, что вместе с tailwind вы это никогда не отдебажите. Может только если для пет проектов. Для себя определил, что если при устройстве на следующую работу я услышу эти 2 заветных слова, компания сразу пойдёт лесом ввиду своей полной некомпетентности.

[@polinajs]

можно узнать в чем проблема конкретно shadcn? и что именно там сломано. Под капотом стоит обычный radix может проблема с ним?

[@mfs9408]

@@polinajs Так это 2 сорта одного и того же. Библиотека под капотом другой библиотеки на основе плохого фреймворка. Вот только сегодня встретил: компонент autocomplete (combobox в документации). В зависимостях имеет библиотеку cmdk. Проблема в том, что если ты поставишь версию выше 0.2.0 (а по умолчанию ставится версия 1.0.0), то вы выбрать в открывающемся списке ничего не сможете. У вас элементы будут disabled. Ещё drawer кажется, который сбоку выезжает. Чтобы изменить ширину, на которую выезжает этот элемент, нужно ставить min-w вместо обычной w. Часто ломается overlay у диалога. Или чтобы изменить цвет placeholder у select, нужно идти в SelectPrimitive.Trigger и добавлять data-[placeholder]:, что как бы вообще неочевидно и надо идти гуглить. И так во всём. Если вы введете shadcn fix на ютубе, вы сразу найдете ролики, которые чинят диалоговое окно и календарь. Поиграться с этим - да. Норм. Но тянуть такое в коммерческий проект нельзя. Это будет одна сплошная головная боль. Кроме того, ужасная документация. Сам стиль кода. Взять условный аватар. Чтобы поместить аватарку, мне нужно импортировать минимум 3 компонента и написать 4-5 строчек кода. Зачем? Почему это не работает в одну строчку? Да, я могу создать ещё один компонент, но тогда вот какая "родословная" получается: radix -> shadcn -> разработчик. То есть в конце концов разработчик всё равно дописывает необходимый код. И у меня опять возникает вопрос: зачем? Имхо, как говорится, но разрабу нельзя давать так глубоко менять код, потому что он наговнокодит. Мне приходится работать с этим говном после индусов и такие перлы как z-[9999] в порядке вещей здесь, что тоже приходится часто дебажить. А дебажить это с tailwind === сломать глаза.

[@alexflatiz8120]

Bootstrap уже давно использует такие классы

[@shittywizzard5727]

только сам бутстрап устарел чу-чуть)

[@polinajs]

верно, так и сказала в видео 07:17 :D

[@trackzatrackom]

Ты уверена, что ты работаешь там где нужно?

[@thefact4529]

не вайт а вит(Vite)

[@bjol_Dg]

Vite - "вит", а не "вайт"

[@foxtrotkilo2843]

Всё хорошо рассказано, только Vite не "вайт", а "вит" произносится, это даже описано в официально доке:) Немного режет слух.

[@CJIu3eHb]

Может ты и "вуй" как "вью" произносишь?!

[@Farruh_13]

​@@CJIu3eHbв корне тупой комментарий

[@CJIu3eHb]

@@Farruh_13 Знаешь дружок, в мире есть много удивительных вещей, о которых ты еще не знаешь. Сарказм, юмор. Они не всегда бывают острыми, конечно. Особенно в корне.

[@Farruh_13]

@@CJIu3eHb ты должен переосмыслить значение слова сарказм, а на счёт юмора скажу что ты не шутник, прокачай свой юмор потому что твой коммент не просто не смешной, а просто даже непонятно что это шутка

[@hieverybody359]

Нахрена ты полезла в программирование. Иди рожай

[@Aidar_123]

Ты что завидуешь?

[@Edvard-Aliev]

Зачем тебе лапуля ИТ, с твоими данными лучше на порнохабе быть, больше пользы

[@Kleo_Wyatt]

Не ожидала под таким видео увидеть на столько сексисткий комментарий. Радуйся, что твое место на порнохабе не заняли, а то тебе там самое место

[@Edvard-Aliev]

@@Kleo_Wyatt вы не в тренде! Самые высокооплачиваемые профессии сейчас это - проститука, таксист и блогер!

[@Mr.Bellamy]

@@Kleo_Wyatt ты борщ сварила?

[@Kleo_Wyatt]

@@Mr.Bellamy лучше задай этот вопрос своей маме

[@Mr.Bellamy]

@@Kleo_Wyatt ладно не агрись, солнце, все норм будет. Научишься ещё борщ варить, не расстраивайся

[@777Vasya77]

Не вайт а ВИТ от французского слова "быстрый"! Из доки: Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It

[@Bliqu1]

Вася, кому какое дело?

[@quazijay]

Буква Ю - похую.

[@БольшойБрат-з4р]

Вася всем п...й ;)

[@narwhal6422]

То чувсво когда все вокруг пишут проекты, а ты гуглишь как правильно произнести название плагина и поправляешь всех😢

[@evgeniymakhnin267]

Tailwind и ShadCN это топ для более быстрой разработки))) Команда Vercel реально крутые вещи делает)))

[@Flipeee0]

Не очень понял в чем смысл, tree shaking и так весь мертвый код почистит (компоненты которые не используются) в бандле, да и любой норм ui kit даст кучу возможностей кастомизации, для мвп и админок самое то, для биг проектов как будто проще с 0 все написать по макетикам из фигмы. Еще и тэйлвинд тащить 🥴

[@mayyakim-l9v]

++