⚡️ Быстрый курс React Select | Выпадающее меню - ЛЕГКО! (почти)
HTML-код
- Опубликовано: 13 июн 2024
- 🔥 Оформить премиум подписку - htmllessons.ru/premium?...
► Интенсив React с нуля (приложение для тренировок) - htmllessons.ru/int/show/3?utm...
💸 Поддержать - www.donationalerts.com/r/redg...
В этом крутом ролике мы разберем react select.
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 150 лайков и я снимаю еще быстрый курс
Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте htmllessons.ru/premium
Скачать 🖥 исходник проекта в нашем хранилище - htmllessons.ru/repositories#s...
#ReactSelect #React #БыстрыйКурс #RedGroup
Мы узнаем что такое React Select и в каких условиях его использовать. Произведем установку библиотеки и tailwind для удобства написания стилей. Покажу как сделать обычный select с одиночным выбором, а потом множественный выбор. Сделаем типизацию (Typescript), хоть и библиотека плохо типизирована из коробки. Разберем 3 варианта стилизации и расскажу почему я остановился на classNamePrefix. Добавим немного анимации при удалении и при открытие меню. А в конце отвечу на ваши вопросы.
Тайм коды:
00:00:00 - Начало
00:05:38 - Что это такое?
00:07:20 - Установка
00:11:25 - Обычный select с одним выбором
00:22:50 - Multiple (множественный выбор)
00:30:00 - Опции
00:33:00 - Типизация
00:39:10 - Стилизация (свои стили)
00:57:10 - Анимация
01:04:45 - Ответы на вопросы
► Интенсив Node.js + Express - Backend с нуля - htmllessons.ru/int/show/2?utm...
► Интенсив по верстке сайта с 0 - htmllessons.ru/int/show/1?utm...
👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
► Оформить подписку на нашем сайте - htmllessons.ru/premium
► Эксклюзивный контент - boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи - / @redgroup
► Научим разрабатывать сайты - htmllessons.ru/
► Личный Instagram - / maxzbs
► Личный RUclips - / @maxhustleinsilence
► Получи до 4000 руб. на первое бронирование через Airbnb - abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - htmllessons.ru/ext/donate
► Мой сетап VS Code - • Настройка Visual Stud...
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия - создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 150 лайков и я снимаю еще быстрый курс
Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!
Скачать 🖥 исходник проекта в нашем хранилище - htmllessons.ru/storage#storage_file_40
Тайм коды:
00:00:00 - Начало
00:05:38 - Что это такое?
00:07:20 - Установка
00:11:25 - Обычный select с одним выбором
00:22:50 - Multiple (множественный выбор)
00:30:00 - Опции
00:33:00 - Типизация
00:39:10 - Стилизация (свои стили)
00:57:10 - Анимация
01:04:45 - Ответы на вопросы
Супер видео, очень пригодилось! побольше таких)
Лучший, спасибо за видос!
Спасибо добрый человек! супер полезно!
Спасибо большое за видео. Случайно на него наткнулась, очень своевременно! Все доступно, понятно. 💥👍👍👍
Спасибо, рад слышать!
Спасибо за урок. Годный селект получился
где ты был недели три назад, приходилось копать селект. спасибо большое
Спасибо за видик. Единственное хотелось бы услышать пару слов про то как встраивать селект в форму, и про интеграцию с hook-form.
Хорошо, что последние записи пошли с typescript
Спасибо, помог :D
Крутяк!!!!
Поздравляю с преобретением. Теперь разработка стала еще интереснее. Шрифт конечно лучший у маков, и все как-то ровно)
Спасибо, за это маки и полюбил, шрифты сглаженные, нет багов и идеальный экран retina
Спасибо за твои старания. У меня вопрос, возможно ли сделать так что при нажатии на какую-нибудь options во второй раз удалять её. Благодарю заранее. В обычном примере singleSelect
Рад слышать! Честно не сталкивался, но в доке видел что-то про удаление
как ты скопировал стили? или префиксы 47:02
Привет! Когда примерно будет доступен новый интенсив на реакте для подписчиков htmllessons(в котором будет админ панель и т.д)?
Привет, сейчас идёт запись backend интенсива для этого же проекта, а потом front end.
как сделать зависимые списки выпадающие? чтобы при выборе одного из пунктов первого списка второй список изменялся
Макс, вопрос по React Select: Как ты обойти проблему со следующим. Выбираем элемент из списка, он помещается в input, но когда нажимаем на этот input, то курсор не подхватывает то, что введено в input а встает так будто он пустой, как это исправить?
Лайк и коммент поставил))
мб кто подскажет пожалуйста, а что есть в react native по типу такого как react select на данный момент
а как в обычном css стилизовать select, чет я потерялся помогите пж
Слишком обширный вопрос, чекайте документацию
спасибо за работу и качественную подачу, но у меня осталась задача которую я не могу решить. С помощью обычного селекта встроенного в html у меня работает функционал когда при выборе одной из опций создается блок с информацией но я не понимаю как сделать это с react-select. Как мне решить эту задачу?
При изменение состояния создавать блок
@@REDGroup то есть добавить слушатель событий чтобы добавлять определенный блок при выборе определенного опшина?
Может где-то прослушал или не услышал, не увидел. Как установить дефотное значение в обычном селекте?? defaultValue - чет ничего не показывает, defaultInputValue - устанавливает дефолтное значение, но при клике не выпадает полный список, только после повторного клика появляется выбор но спадает дефотное занчение.
defaultValue работает в него передать объект с label и value
@@REDGroup огромнейшая благодарочка)))
@@REDGroup Не хочет работать(((( defaultValue={{value: 1, label: 'red'}}, передаю объект и не отображает.
Тут уже нужно смотреть весь проект индивидуально
@@REDGroup Все, понял, у меня стоял параметр value={}, без него надо было))
Не удалось решить ту ошибку тайпскрипта, когда он ругался на onChange из за типизации параметров функции? В мультиселекте в частности это инетерсует
Там вроде обнова вышла и пофиксилось
@@REDGroup не, я пробовал сегодня ставить свежий проект реакта выдает ошибку, пробовал типизировать через const onChange = (option: MultiValue) и подобное не проходило. в итоге сделал const onChange = (newValue: unknown) но это костыль мне кажется
У тебя есть тг канал?
Кстати только сегодня опять об этом подумал и решил создать. Ссылка уже в сообществе
Час это нифига не быстро
Спасибо за видик. Единственное хотелось бы услышать пару слов про то как встраивать селект в форму, и про интеграцию с hook-form.