Библиотека компонентов Chakra UI. Быстрый старт!
HTML-код
- Опубликовано: 2 июл 2024
- Готовые библиотеки компонентов позволяют быстрее создавать рабочие приложения. Chakra UI предлагает базовый набор решений для React-приложений - сетку, блоки, формы, таблицы и многое другое. При этом библиотека предлагает гибкий подход к управлению темами. Можно взять готовую цветовую схему и при желании расширить ее, либо создать свою собственную.
00:00 Обзор возможностей Chakra UI
16:20 Базовый шаблон React Chakra
17:45 Кастомная шапка, светлая/темная темы
24:26 Контейнер и работа с текстом
27:27 Сетка со списком карточек
32:37 Адаптив через пропсы
35:23 Варианты и псевдосостояния
38:38 Кастомизация темы
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Крутая библиотека компонентов и не менее крутое объяснение! Спасибо большое!
Спасибо большое за твою работу, Михаил! Очень помог!💖💖💖
Спасибо большое за объяснение!
Спасибо за видео, как всегда все просто и понятно
Михаил, лучи добра Вам!
Спасибо. За крутой контент.
у вас классный и понятный контент
Круто! Лайк!
Спасибо, мне - как бэкендещику, помогло в создании сайта портфолио)
О! Видосик новый подвезли )
Отлично, раньше работал только с material-ui, интересно будет сравнить.
пока изучаю JS, но уверен чуть позже такие видео будут очень полезными, спасибо!
пока ты изучаешь JS выйдет еще 50 новых библиотек компонентов и к тому времени это будет не актуально
Вау, после бутстрапа выглядит как глоток свежего воздуха!
сделан на базе bootstrap
Классно! Видео по Ant Design в студию ))
Теперь в студии 😀
ruclips.net/video/LfKgQ5mAcRs/видео.html
с стороны оптимизации скорости первого отклика и загрузки всего контента лучше использовать модульный подход с навешиванием классов или props библиотеки компонентов?
Chakra UI - классная библиотека. Выглядит очень дружественно. В material ui и ant design намного больше иконок и компонентов, но это их и плюс и минус одновременно. Приходится тащить в приложение много неиспользуемого, раздувается вес приложения.
Жаль только, что у этой библиотеки нет собственного datePicker.
wow
про next js сделайте видео пж
Можете снять видео по Ant Design, было бы очень круто)
Да, в планах есть.
Спасибо за видео. А подскажи плез, когда ты прописываешь цвет, то вс код подсказывает тебе возможные значения, например 'grey.500'
У меня вебшторм, и такого не происходит, он подсказывает только названия самих пропов (maxWidth, padding и тд), но сами их значения, которые идут в кавычках - нет. Ты что-то ставил дополнительно поверх вс кода, чтобы был такой автокомплит?
Не припомню чего-то дополнительного. Vs code несколько иначе работает с typescript, а так как чакра написана на нем, то и автокомплит есть. Странно, что шторм не показывает.
бегло глянул начало, буду смотреть позже
По моему лучше tailwind нет для react только MUI и то бывает раздрожает
А как Вам tailwindCss? 🤔
Пока что никак. Руками до сих пор не потрогал, но с расстояния выглядит странно - это обилие классов. Мне нравится, что у них есть оптимизация стилевого бандла. Но вчитываться в набор строковых значений - на любителя. Да, в Чакре мы тоже можем много стилевых вещей набросать на компонент, но в виде объекта, как по мне, оно более читаемо, да и переиспользовать проще.
Material UI V5 ili Chakra UI ili Semantic UI :) Kotory vybrat dlja samovo prastovo ispolzivanyja.
Здравствуйте. Здесь не будет однозначного ответа. Кому-то проще будет с одним, кому-то с другим. Потом там разный набор готовых компонентов, а значит под разные задачи могут быть удобнее разные инструменты. Мне нравится Chakra UI, но иногда использую и другие библиотеки.
@@mishanep Добрый день Михаил, подскажите про переиспользуемые компонеты. Есть форма, она одинаковая как для создания, например пользователя, так и для редактирования. Форма состоит из примерно 10 инпутов. Обычно, если я не использую библиотеки компонентов, я создаю общий компонет формы и передаю туда данные, используя одну и ту же форму как для создания так и для редактирования. В Chakra UI какой лучше подход, сделать переиспользуемый компонент, или просто продублировать форму на странице создания и редактирования? Спасибо за ответ!
@@user-kj2wm8rg5z создать компонент собранный не из тегов инпутов, а из элементов библиотеки Чакра и переиспользовать форму