⚡️Быстрый курс по React Hook Form | Формы в React - Легко!

🔥 Оформить премиум подписку - htmllessons.ru/premium?...
► Интенсив React с нуля (приложение для тренировок) - htmllessons.ru/int/show/3?utm...
В этом крутом ролике мы разберем react hook form
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 160 лайков и я снимаю следующий быстрый курс
Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте htmllessons.ru/premium
👉 Исходник - htmllessons.ru/repositories#s...
#ReactHookForm #React #RedGroup
Мы узнаем что-такое React Hook Form, для чего используется данная библиотека. Используем хук useForm, покажу как получать данные и отправлять на сервер. Произведем базовую интеграцию с TypeScript. Разберем несколько вариантов подключения через простой register и продвинутый через controller. Напишем базовую валидацию полей и выведем сообщения об ошибке. Научимся сбрасывать форму, отслеживать изменения с помощью watch, одноразово получать состояние с помощью formState. В самом конце сделаем крутую практику - форма доставки. Приятного просмотра!
Тайм коды:
00:00 - Начало
00:31 - Что это такое?
02:12 - Установка React Hook Form
05:47 - Хук useForm
06:18 - Функция submit
06:47 - Как работать с TypeScript?
09:34 - Базовое подключение (register)
10:28 - Валидация (обязательное поле и прочие условия)
10:58 - Сообщение об ошибке
13:41 - С помощью регулярных выражений
17:09 - Сброс формы
17:54 - useForm опции
19:26 - Получаем значения (getValues)
21:46 - Отслеживание изменений (watch)
22:58 - Состояние формы (formState)
23:57 - Заполнить поля (setValue)
25:50 - Сложные подключения (Controller) на примере выпадающего меню
36:38 - Практика: Форма доставки
► Интенсив 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/storage
► Научим разрабатывать сайты - htmllessons.ru/
► Личный Instagram - / maxzbs
► Личный KZbin - / @maxhustleinsilence
► Получи до 4000 руб. на первое бронирование через Airbnb - abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - htmllessons.ru/ext/donate
► Мой сетап VS Code - • Настройка Visual Stud...
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия - создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊

[@REDGroupPlus]

Свежий курс - kzbin.info/www/bejne/fnqxlIyhmat-frs

[@SanjarKodirov-ww3le]

Шикарный урок ; ) спасибо

[@user-kq3dr8yl9z]

Спасибо большое как раз искал интенсив по react form

[@user-ml8hn5kg9e]

Шикарное видео спасибо!!!!

[@prototype1269]

Ролик имба лютейшая, можно упростить кодинг используя react-hook-form. Спасибо!

[@bama2619]

Ты крут. Спасибо. Надо будет другие видео посмотреть. Ниспадающее меню! Хоть увидел как его можно будет делать. 3:55 Начало. Установка.

[@alexg1431]

Огромное спасибо! Очень помог эпизод с watch, я неправильно пытался отслеживать значения полей через getValues 🤦‍♂

[@dmaberlin]

Спасибо!

[@cranberry888]

Привет, можешь рассказать как выучить php, или как ты выучил Можешь ещё shorts записать где показываешь ресурсы для изучения ( это как идея для видео, помню ты на стриме спрашивал, к сожалению у меня тогда были дела и я не смог поприсутствовать на стриме )

[@REDGroup]

По php. Не могу рассказать

[@user-cz3ez4go4h]

очень ждём быстрый курс по React-select, сейчас с ним мучаюсь

[@REDGroup]

Круто, значит спрос есть. Там да очень много мучений. Особенно в стилизации и multiple режиме

[@user-cz3ez4go4h]

@@REDGroup мне сейчас нужно было стилизовать бордеры в активном состоянии, в итоге конечно понял что нужно работать с theme но всё таки(

[@REDGroup]

Ну там либо theme или через css, с помощью classnamePrefix. Я через второй вариант делал

[@user-xk2qv7rn9x]

Дякую за курс

[@maxstetsenko8626]

Привет, спасибо за видео Правильно ли я понимаю ? Если у меня компонент То тогда использую конструкцию Как на примере с селектом из библиотеки

[@REDGroup]

Привет, да. Все есть в доке

[@REDGroup]

🔥 Оформить премиум подписку - htmllessons.ru/premium? Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 160 лайков и я снимаю следующий быстрый курс Если есть какие то фишки по этой теме - дай знать в 💬 комментариях! Тайм коды: 00:00 - Начало 00:31 - Что это такое? 02:12 - Установка React Hook Form 05:47 - Хук useForm 06:18 - Функция submit 06:47 - Как работать с TypeScript? 09:34 - Базовое подключение (register) 10:28 - Валидация (обязательное поле и прочие условия) 10:58 - Сообщение об ошибке 13:41 - С помощью регулярных выражений 17:09 - Сброс формы 17:54 - useForm опции 19:26 - Получаем значения (getValues) 21:46 - Отслеживание изменений (watch) 22:58 - Состояние формы (formState) 23:57 - Заполнить поля (setValue) 25:50 - Сложные подключения (Controller) на примере выпадающего меню 36:38 - Практика: Форма доставки

[@dimkaokk]

привет что за расширение на подсказки ?

[@REDGroup]

Какие подсказки?

[@dimkaokk]

@@REDGroup к примеру когда доставал значения из объекта в хуке useForm

[@Aster_Play]

Привет! Подскажи пожалуйста какие языки программирования нужны учить новичку для создания программ для iOS и android?

[@kostyafrompiter]

Android - Java, Kotlin(он сейчас основной) Ios - Swift. Языки для всех платформ - Flutter, React Native

[@Aster_Play]

@@kostyafrompiter спасибо!

[@bloon1k]

@@Aster_Play как успехи?

[@sashapticin]

Привет Макс! Подскажи, на 17:40 ты открываешь скобки {} для написания defaultValues, но перед этим у тебя выскакивает подсказка со всем функционаом. Как сделать у себя такое же, чтобы подсказки отображали весь список возможных опций?

[@REDGroup]

Option + esc

[@sashapticin]

@@REDGroup не знаешь, на винде такое есть?)

[@sashapticin]

Нашел. Ctrl+space

[@souldock]

Как можно сделать подтверждение королей?

[@user-lk4kv5sw7s]

Хорошая библиотека и довольно простая в мзучении мне нравится спасибо за курс

[@jaderyder9123]

18:17 onBlur возникает при потере фокуса элемента, а не при фокусе на элемент

[@REDGroup]

Точно!

[@schrodinger_s_cat_theory]

👍

[@farrukhx7143]

Не догоняю, как менять шрифт ошибок? Там же где задаем цвет, указывал fontSize, но 0 реакции хм

[@Evgeny..]

Макс, ну очень поверхностно, сорри за критику, но тут тебе бы стоило постараться по больше.

[@REDGroup]

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

[@user-se1dj1pn3o]

Как обработать ошибку сервера? Допустим приходит статус 403, что такой email уже есть. Как получить доступ к input и передать ему эту ошибку ?

[@REDGroup]

Легко, смотрите наши интенсивы. Такие вещи в комментариях не объяснить

[@user-se1dj1pn3o]

@@REDGroup где смтреть то

[@REDGroup]

На сайте оплачиваете подписку htmllessons.ru/premium и в продвинутых интенсивах это разбиралось

[@knuckless__]

куда ты так спешишь?

[@theoty-js]

React js javascript интенсив mobx хуки hookform курсы по реакту программирование обучение web spa npm function class useform object

[@javascripttask7556]

а что с getValue не получилось ?

[@REDGroup]

Можете более конкретно задать вопрос, я же уже не помню что было в видео

[@javascripttask7556]

@@REDGroup сорян, всё норм, я загнался ))

[@maxamax5695]

14:17 время ты сказал, как делать по хорошему. Можно чутка подробней. мучаюсь с этим

[@Aster_Play]

Хотела давно спросить.. Ты хотел бы в дискорде сервер создать?

[@REDGroup]

Не разу не использовал дискорд, но уже подписчики говорили об этом. Пока не понимаю для чего?

[@Aster_Play]

@@REDGroup Я думаю что комьюнити хочет познакомиться с друг другом. Найти так говоря однодумцев.. И возможно узнать о будущего канала из твоих уст.. Или просто подружиться. Но это моё мнение. Если хочешь я могу помочь в создании сервера. Я пользуюсь дискордом уже не первый год.. но решение за тобой. Если всё-таки решишься создать сервер и тебе будет нужна помощь то я могу скинуть тебе мой телеграмм.. если конечно хочешь..

[@REDGroup]

Я подумаю, на всякий скинь телеграм

[@Aster_Play]

@@REDGroup ты получил мой телеграмм? А то я отправляю сообщение а оно удаляется… ( в комментариях )

[@REDGroup]

Не пришло, напиши на почту [e-mail]

[@user-np1wy7zz1n]

Хотел бы ты поучаствовать в проекте, который потенциально будут использовать от нескольких тысяч до нескольких миллионов человек ежедневно?

[@REDGroup]

Нет

[@kostyafrompiter]

Бесплатно только новички будут работать, время ценнейший ресурс. А ещё и отдохнуть надо успеть.

[@user-np1wy7zz1n]

@@kostyafrompiter Само собой не бесплатно

[@sieghardt8191]

В новом NextJS использовать не получится уже. В 14 версии эта библа выдает ошибку, что не видит функцию useForm Вернее Webpack говорит, что не видит useForm

[@REDGroup]

Все работает, это ваша личная проблема в проекте