Спасибо и газ в пол! Узнал от вас про этот подход и вы не представляете как этот вариант нас сейчас спасет. У нас мини-команда мы делаем проект в котором сроки сдачи проекта горят, верстать нужно быстро и качественно. Подход с которым вы поделились, он нам поможет и я уверен, мы уложимся в срок и сдадим успешный кейс.
Хорошее видео, очень понравился контент. Сам в разработке и очень приелись всякие мантины да antd, жаль в нашей компании не произойдет революции, но хоть на ютубе посмотрю на удобное решение😂
Спасибо за интересный рассказ, очень крутое решение, если в проекте используется tailwind. Кстати про проверку callback'a на существование, может быть знаешь, может быть будет полезна инфа: вместо onClick && onClick(e) можно написать onClick?.(e)
Хорошая технология, узнал о ней недавно, собираемся для продакшена делать свой UI kit, как раз смотрим на эту штуковину. Я бы не стеснялся называть её библиотекой, даже если авторы не хотят так её называть. Ну и что, что файлы компонентов в итоге лежат в src, а не node modules, всё равно это библиотека, ничто не мешает перенести эти файлы в другой проект или вообще собрать их в пакет. 🤷🏻♂️ Да, подход не совсем стандартный, но другого удобно термина не придумали, да и противоречий никаких нет. Можно назвать генератором, типа как yeoman, можно библиотечным генератором 🤷🏻♂️ Однако есть минус у такого подхода: если в компоненте есть какой-то баг, то его придётся исправлять каждому, после модификации уже не получится обновить 😅 Зато полный доступ ко всему коду, не надо придумывать слоты там всякие
очень классный гайд, понраивлось как ты объясняешь продолжай в том же духе можешь пожалуйста посоветовать как выучить typescript, handbook на официальном сайте это норм ресурс?
всегда сложно советовать как учить что-либо, потому что кому-то handbook'a и правда достаточно, а кому-то очень тяжело читать любые документации. Пробуй, там понятно будет. По личному мнению TS очень хорошо учится на практике, можно сразу на Реакте его учить, он довольно интуитивен. Сделать минимальный CRUD проект. Я сама так и выучила, меня просто закинули на проект с TS'ом, хочешь не хочешь научилась:) А углубленно, как база освоится, можно и по видосам на ютюбе, их довольно много
У меня есть вопросик. После того как поменял сss переменную --primary на синий, кнопка на hover становится полностью белой, в видео я такого не вижу. С чем это может быть связано?
То как вы описываете процесс кастомизации, после слова "материал" дает понять, что сложен он для вас просто из-за отсутствия понимания концепции Модуль-Слот. В том же mui достаточно просто посмотреть слот через код элемента и забить стилизацию в тему. Но нет, лучше потратить время на сырую либу, которую в продакшн тянуть все равно, что убить проект до его начала.
Здравствуйте, я только начал изучать реакт. Можете подробнее расписать свой комментарий для новичков - вы против того, чтобы использовать Shadcn и за то, чтобы использовать mui? Я насколько понимаю, shadcn - это просто хорошие "заготовки" для компонентов, и используя такие заготовки, можно не тянуть лишние зависимости в проект. А mui - наоборот, это готовая библиотека с ui компонентами, которые тянутся целиком в проект и будут в коде, даже если вы не используете всех возможностей этой библиотеки. Моя цель - научиться делать легковесные приложения на реакте, что бы вы порекомендовали мне как начинающему разработчику?
@@msttont Сам автор позиционирует эту библиотеку, как "решение для быстрой верстки на хакатоне". Используйте, что душе угодно. С удовольствием понаблюдаем за стремительным увеличением штата, из-за проблем с масштабируемостью. Практика показывает, что, в большинстве случаев, чем проще решение, чем оно более высокоуровневое, тем больше проблем в ближайшем будущем. Сравнивать инструмент для верстки и полноценную UI библиотеку, на мой взгляд вообще глупо)
React-Hook-Form никому не советую изучать\использовать. Подходит только для простейших кейсов, где не нужно думать над оптимизацией. Если форма становится сложнее чем авторизация - начинаются пляски с бубном невообразимых масштабов
Хорошая технология говоришь? Для чего она вообще, если ее нельзя использовать на реальных проектах? Дизайнер сделал макет и где там прилепить тайлвинд?
Спасибо за обзор! Что то новенькое, правда непонятно зачем каждый компонент одтельно ставить через npx, просто привык что поставил либу всё, тягай какие хочешь компоненты без доп установок
Это для того, чтобы не перегружать свой проект. Либы скачиваются в node_modules, а эта штука в нашу папку компонентов. Поэтому часто мы хотим этими моментами управлять и не качать себе лишнего
@@polinajs о эт круто, устил видимо этот момент, тогда достаточно знать какие компоненты понадобятся выкачать пачкой, поднастроить под себя вот тебе и своя кастомная либа, пока минусов не видно👍
Ничего не понял )) чем эта библиотека, а это по всем признакам библиотека, лучше Material Ui или скажем Chakra Ui. В которых элементарно меняются стили, задаются свои таким же образом . Причем даже проще.здесь мы передаем класс пропсами , так ещё нужно понять что делает этот класс. В Chakra например мы просто пропсами передали стиль который хотим переопределить и все )) . Опять же устанавливать каждый компонент отдельно, возможно в этом и есть какой-то смысл, но мне , так, на вскидку )) показалось это вообще неудобно.
зашел, посмотрел. пара десятков зависимостей почти на 8 метров. Нах она такая нужна. А да, для петов разве что. Ну и на собраниях самых лютых бездельников, называемых хатаконами =)
vite (на французском - быстрый) читается как вит, не вайт 😱 видос огонь, долго тупил с псевдонимами папок, потому что компоненты в /src/features привык создавать, и вроде осознавал в чем собака зарыта, но не понимал. 10 минут видоса могли сэкономить несколько часов
Еще одна новейшая беспрецедентная и переворачивающая мир технология на голову бедного фронтендера) Для прототипирования выглядит хорошо (собственно также хорошо, как и все существующие уже библиотеки), для использования с реальным дизайном - больше времени потратишь на кастомизацию, чем на создание своей либы с нуля по ui-kit. Потому что для того, чтобы все сделать правильно, придется углубляться в доку, изучить best practicies, погуглить "а как в этой библиотеке сделать то-то..."., и так далее. По сути выглядит как очередная надеющаяся стать хайповой штука, не имеющая под собой ничего особо нового.
недавно попробовал чакру на небольшом проекте где очень важен page speed insights performance. Чакра тащит за собой css in js, который снимает этак 10-20 баллов на мобиле из-за увеличения main thread work + подключение провайдера (что полного, что base) затаскивает порядка 80кб неиспользуемого кода (увеличивает метрику unused js и тоже снимает порядка 10 баллов). В итоге пришлось убирать чакру (заменил mantine, там таких проблем не обнаружил )
@@e_viskhan не, но подозреваю что примерно как у чакры из-за motion-а. Любят в последнее время компонентные либы css in js. Мантин из этого ряда выделяется, одна из немногих либ которая написана на css модулях. Возможно css in js не будет проблемой для pagespeed если юзаешь серверные компоненты (но это не точно, только в планах потыкать)
@@Farruh_13 Знаешь дружок, в мире есть много удивительных вещей, о которых ты еще не знаешь. Сарказм, юмор. Они не всегда бывают острыми, конечно. Особенно в корне.
@@CJIu3eHb ты должен переосмыслить значение слова сарказм, а на счёт юмора скажу что ты не шутник, прокачай свой юмор потому что твой коммент не просто не смешной, а просто даже непонятно что это шутка
Не вайт а ВИТ от французского слова "быстрый"! Из доки: 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
👍Рассказ хорош, давай, давай вепред, контент в кайф, можно вот это всё почаще😻
🧙♂красный нос господину за 3м столиком))) с комментарием согласен, подписка
Экстримкод референс
Выглядит круто, надо пощупать.
Классный контент! 😊 Продолжайте, пожалуйста! Только вперёд! 😀👍
Супер, спасибо! желаю развития вашему каналу!
Отличный гайд, спасибо! Я только начинаю и умираю от всего, связанного с вёрсткой. Эта "библиотека" выглядит как клёвое решение!
Спасибо большое. Классный гайд по Shadcn 👍
Это очень классная либа, а то надоело по 100 раз стилизацию ui пилить, подход просто поразил!
Спасибо за видео, хорошая подача, интересная тема)
Успехов в развитии канала)
мне понравился такт и голос - ты крутая !
Спасибо и газ в пол! Узнал от вас про этот подход и вы не представляете как этот вариант нас сейчас спасет. У нас мини-команда мы делаем проект в котором сроки сдачи проекта горят, верстать нужно быстро и качественно. Подход с которым вы поделились, он нам поможет и я уверен, мы уложимся в срок и сдадим успешный кейс.
Как глоток свежего воздуха😊👍
Спс, давно искал как быстро делать интерфейсы для typescript из json обьекта 🎉
Да, это весьма удобно!
Теперь ждём видео по Tailwind
Да, лучшая ui "библиотека" на данный момент.
Нет ничего лучше, чем свой код написанный с нуля, который можно переносить в новый проект.
Огромное спасибо вам за видео
Полина, молодец🤙
Супер!!!!
Хорошее видео, очень понравился контент. Сам в разработке и очень приелись всякие мантины да antd, жаль в нашей компании не произойдет революции, но хоть на ютубе посмотрю на удобное решение😂
Канал - находка. Девушка умница - красавица
Спасибо за интересный рассказ, очень крутое решение, если в проекте используется tailwind. Кстати про проверку callback'a на существование, может быть знаешь, может быть будет полезна инфа: вместо onClick && onClick(e) можно написать onClick?.(e)
Хорошая технология, узнал о ней недавно, собираемся для продакшена делать свой UI kit, как раз смотрим на эту штуковину.
Я бы не стеснялся называть её библиотекой, даже если авторы не хотят так её называть. Ну и что, что файлы компонентов в итоге лежат в src, а не node modules, всё равно это библиотека, ничто не мешает перенести эти файлы в другой проект или вообще собрать их в пакет. 🤷🏻♂️ Да, подход не совсем стандартный, но другого удобно термина не придумали, да и противоречий никаких нет. Можно назвать генератором, типа как yeoman, можно библиотечным генератором 🤷🏻♂️
Однако есть минус у такого подхода: если в компоненте есть какой-то баг, то его придётся исправлять каждому, после модификации уже не получится обновить 😅
Зато полный доступ ко всему коду, не надо придумывать слоты там всякие
Там через консольные команды можно сделать дифф с тем, что у них в коде и принять изменения, если нужно
За luicide спасибо
очень классный гайд, понраивлось как ты объясняешь
продолжай в том же духе
можешь пожалуйста посоветовать как выучить typescript, handbook на официальном сайте это норм ресурс?
всегда сложно советовать как учить что-либо, потому что кому-то handbook'a и правда достаточно, а кому-то очень тяжело читать любые документации. Пробуй, там понятно будет. По личному мнению TS очень хорошо учится на практике, можно сразу на Реакте его учить, он довольно интуитивен. Сделать минимальный CRUD проект. Я сама так и выучила, меня просто закинули на проект с TS'ом, хочешь не хочешь научилась:) А углубленно, как база освоится, можно и по видосам на ютюбе, их довольно много
Полезная штука, девочка ты молодец!
Спасибо, интересно и полезно!
Бубет круто, если снимете видео подробное про Taiwind css для работы в нем.
Развития вашему каналу 👍
А если обычный ReactApp то не будет работать?И что если не использовать тайлвинт?
Классное видео, но устал наблюдать как вручную происходит форматирование отступов. Используй cmd+alt+F и все отсутпы автоматически выровняются. ))
У меня есть вопросик. После того как поменял сss переменную --primary на синий, кнопка на hover становится полностью белой, в видео я такого не вижу. С чем это может быть связано?
Понял, запятые не удалил скопировав из палитры гугла
Можно пожалуйста в отдельном видео о Tailwind и чем его использование отличается от простого прописывания всех стилей в атрибут style?
это просто наборо стилей, которые созданы за тебя и которые дают применять стили просто вешая классы
То как вы описываете процесс кастомизации, после слова "материал" дает понять, что сложен он для вас просто из-за отсутствия понимания концепции Модуль-Слот. В том же mui достаточно просто посмотреть слот через код элемента и забить стилизацию в тему. Но нет, лучше потратить время на сырую либу, которую в продакшн тянуть все равно, что убить проект до его начала.
Здравствуйте, я только начал изучать реакт. Можете подробнее расписать свой комментарий для новичков - вы против того, чтобы использовать Shadcn и за то, чтобы использовать mui? Я насколько понимаю, shadcn - это просто хорошие "заготовки" для компонентов, и используя такие заготовки, можно не тянуть лишние зависимости в проект. А mui - наоборот, это готовая библиотека с ui компонентами, которые тянутся целиком в проект и будут в коде, даже если вы не используете всех возможностей этой библиотеки. Моя цель - научиться делать легковесные приложения на реакте, что бы вы порекомендовали мне как начинающему разработчику?
@@msttont Сам автор позиционирует эту библиотеку, как "решение для быстрой верстки на хакатоне". Используйте, что душе угодно. С удовольствием понаблюдаем за стремительным увеличением штата, из-за проблем с масштабируемостью. Практика показывает, что, в большинстве случаев, чем проще решение, чем оно более высокоуровневое, тем больше проблем в ближайшем будущем. Сравнивать инструмент для верстки и полноценную UI библиотеку, на мой взгляд вообще глупо)
Я бы посмотрел в сторону компромиссных либ типа mantine, у которых с кастомизацией стилей по слотам через классы просто сказка@@bezborodovanton
Сними еще ролики про Tailwind и React-Hook-Form
React-Hook-Form никому не советую изучать\использовать. Подходит только для простейших кейсов, где не нужно думать над оптимизацией. Если форма становится сложнее чем авторизация - начинаются пляски с бубном невообразимых масштабов
Семантически правильнее писать не div а header =>
Хорошая технология говоришь? Для чего она вообще, если ее нельзя использовать на реальных проектах? Дизайнер сделал макет и где там прилепить тайлвинд?
Видео отличное, но непонятно как устанавливать на nuxt 3
подскажите хакатону по вебу пожайлуста
Остается воспрос, как быстро это работает. Потянет ли в больших проектах? Насколько тяжелый будет готовый билд с таким количеством пакетов и т.д.
Сейчас это никого не колышет. Работает - и ладно. А за оптимизацию можно еще столько же денежек постричь.
Это же по сути те же самые простые компоненты, написанные на Tailwind
Классная технология, теперь общие компонентики можно и не создавать в ручную
Antd, mui?
Где видео?
Это под vue работает или только под реакт?
Переходи на react а то так и будешь все время в роли догоняющего со своим vue ))
@@mur3636, какой-то глупый совет, ты бы его переосмыслил, что ли. или ты из разряда react-разработчиков?:)
@@mur3636 Vue сейчас гораздо лучше, чем React.
Спасибо за обзор! Что то новенькое, правда непонятно зачем каждый компонент одтельно ставить через npx, просто привык что поставил либу всё, тягай какие хочешь компоненты без доп установок
Это для того, чтобы не перегружать свой проект. Либы скачиваются в node_modules, а эта штука в нашу папку компонентов. Поэтому часто мы хотим этими моментами управлять и не качать себе лишнего
Очень классно) жду новых новостей от вас от ui сайтов про фронтенд...
@@polinajs о эт круто, устил видимо этот момент, тогда достаточно знать какие компоненты понадобятся выкачать пачкой, поднастроить под себя вот тебе и своя кастомная либа, пока минусов не видно👍
Radix также разбит на мини пакеты с компонентами
Вит читается как Вит, а не Вайт 😊
За обзор лайк, подписка, но библиотека так себе, особенно эти всякие тайлвиндв 😱
Ничего не понял )) чем эта библиотека, а это по всем признакам библиотека, лучше Material Ui или скажем Chakra Ui. В которых элементарно меняются стили, задаются свои таким же образом . Причем даже проще.здесь мы передаем класс пропсами , так ещё нужно понять что делает этот класс. В Chakra например мы просто пропсами передали стиль который хотим переопределить и все )) . Опять же устанавливать каждый компонент отдельно, возможно в этом и есть какой-то смысл, но мне , так, на вскидку )) показалось это вообще неудобно.
Это только для реакта?
Для vue есть quasar
++
Только не вайт а вит. Vite (French word for "quick", pronounced /vit/, like "veet")
зашел, посмотрел. пара десятков зависимостей почти на 8 метров. Нах она такая нужна. А да, для петов разве что. Ну и на собраниях самых лютых бездельников, называемых хатаконами =)
vite (на французском - быстрый) читается как вит, не вайт 😱
видос огонь, долго тупил с псевдонимами папок, потому что компоненты в /src/features привык создавать, и вроде осознавал в чем собака зарыта, но не понимал. 10 минут видоса могли сэкономить несколько часов
Тема хорошая, но это никакая не технология, а вверх на radix ui component library
теииил=( ненавижу... хотя написаный форм уже ништяк... надо будет тестануть
Не могу понять как это использовать с next
Точно так же абсолютно как и без next. На сайте shadcn есть раздел next в installation. Установка даже проще, чем с vite
@@polinajs Но я хочу без tailwind
@@Skywrathes тогда shadcn не подходит
Еще одна новейшая беспрецедентная и переворачивающая мир технология на голову бедного фронтендера) Для прототипирования выглядит хорошо (собственно также хорошо, как и все существующие уже библиотеки), для использования с реальным дизайном - больше времени потратишь на кастомизацию, чем на создание своей либы с нуля по ui-kit. Потому что для того, чтобы все сделать правильно, придется углубляться в доку, изучить best practicies, погуглить "а как в этой библиотеке сделать то-то..."., и так далее. По сути выглядит как очередная надеющаяся стать хайповой штука, не имеющая под собой ничего особо нового.
Искал рецепт классического приготовления борща, а выдало данные видео...(((
Tailwind зло 😢Пожалуйста, не надо его рекламировать)
а как мы иначе будем определять кого не брать на работу? Тайлвинд нравится? - Да -ОТКАЗАНО
Ссылка на онлифанс?
Bootstrap уже давно использует такие классы
только сам бутстрап устарел чу-чуть)
верно, так и сказала в видео 07:17 :D
Не понятно чем вам Chakra не устраивает
недавно попробовал чакру на небольшом проекте где очень важен page speed insights performance. Чакра тащит за собой css in js, который снимает этак 10-20 баллов на мобиле из-за увеличения main thread work + подключение провайдера (что полного, что base) затаскивает порядка 80кб неиспользуемого кода (увеличивает метрику unused js и тоже снимает порядка 10 баллов). В итоге пришлось убирать чакру (заменил mantine, там таких проблем не обнаружил )
@@noname-nh8mx случайно такой же анализ для mui не делал? было бы интересно прочитать
@@e_viskhan не, но подозреваю что примерно как у чакры из-за motion-а. Любят в последнее время компонентные либы css in js. Мантин из этого ряда выделяется, одна из немногих либ которая написана на css модулях.
Возможно css in js не будет проблемой для pagespeed если юзаешь серверные компоненты (но это не точно, только в планах потыкать)
Нафиг этот tailwaind
не вайт а вит(Vite)
Всё хорошо рассказано, только Vite не "вайт", а "вит" произносится, это даже описано в официально доке:) Немного режет слух.
Может ты и "вуй" как "вью" произносишь?!
@@CJIu3eHbв корне тупой комментарий
@@Farruh_13 Знаешь дружок, в мире есть много удивительных вещей, о которых ты еще не знаешь. Сарказм, юмор. Они не всегда бывают острыми, конечно. Особенно в корне.
@@CJIu3eHb ты должен переосмыслить значение слова сарказм, а на счёт юмора скажу что ты не шутник, прокачай свой юмор потому что твой коммент не просто не смешной, а просто даже непонятно что это шутка
Ты уверена, что ты работаешь там где нужно?
Vite - "вит", а не "вайт"
Нахрена ты полезла в программирование. Иди рожай
Ты что завидуешь?
Зачем тебе лапуля ИТ, с твоими данными лучше на порнохабе быть, больше пользы
Не ожидала под таким видео увидеть на столько сексисткий комментарий. Радуйся, что твое место на порнохабе не заняли, а то тебе там самое место
@@Kleo_Wyatt вы не в тренде! Самые высокооплачиваемые профессии сейчас это - проститука, таксист и блогер!
@@Kleo_Wyatt ты борщ сварила?
@@Mr.Bellamy лучше задай этот вопрос своей маме
@@Kleo_Wyatt ладно не агрись, солнце, все норм будет. Научишься ещё борщ варить, не расстраивайся
Не вайт а ВИТ от французского слова "быстрый"! Из доки: 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
Вася, кому какое дело?
Буква Ю - похую.
Вася всем п...й ;)
То чувсво когда все вокруг пишут проекты, а ты гуглишь как правильно произнести название плагина и поправляешь всех😢
++