React Hook Form - простая работа с формами

  Рет қаралды 23,831

PurpleSchool | Anton Larichev

PurpleSchool | Anton Larichev

Күн бұрын

Как просто работать с формами любой сложности в React? Сегодня разберём библиотеку React Hook Form.
🔗 Ссылки:
React Hook Form: react-hook-form.com/
⚡️Курс по React и Next: purpleschool.ru/course/nextjs
Мои курсы по разработке: purpleschool.ru
Telegram канал с полезными советами: t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:09 - Работа с формами
1:35 - Старт проекта
3:41 - Базовая работа с формой
8:56 - Валидация форм
12:47 - Обработка ошибок
15:45 - Установка значений
18:33 - Отслеживание форм
19:33 - Интеграция с библиотеками
23:04 - Другие возможности
23:47 - Заключение

Пікірлер: 72
@PurpleSchool
@PurpleSchool Жыл бұрын
🔗 Ссылки: React Hook Form: react-hook-form.com/ ⚡️Курс по React и Next: purpleschool.ru/course/nextjs Мои курсы по разработке: purpleschool.ru Telegram канал с полезными советами: t.me/purple_code_channel
@testosteron_release
@testosteron_release Жыл бұрын
как здорово что есть такие авторы!
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо!
@tezis.digital
@tezis.digital Жыл бұрын
О, очень полезный контент! Спасибо!
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста!
@serikov4430
@serikov4430 Жыл бұрын
Было бы здорово ещё залезть внутрь и разобрать как самому можно сделать мини-библиотеку для работы на проекте, для того чтобы лучше понимать как это работает. Можно прям отдельным курсом по работе с формами.
@PurpleSchool
@PurpleSchool Жыл бұрын
Буду иметь ввиду 👍
@wev_dev_pro
@wev_dev_pro Жыл бұрын
Спасибо за видео
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста 👍
@MegaMaxxon
@MegaMaxxon Жыл бұрын
Formik, yup. Интересно было бы сравнение услышать от автора.
@PurpleSchool
@PurpleSchool Жыл бұрын
👍
@user-zi4gy8nk6d
@user-zi4gy8nk6d Жыл бұрын
Стоит ли сравнивать то что обновилось месяц назад и то что обновилось 2 года назад.
@CJIu3eHb
@CJIu3eHb Жыл бұрын
​@@user-zi4gy8nk6d Да и нужен ли yup, когда есть zod.
@user-ks6ps3xx9z
@user-ks6ps3xx9z 6 ай бұрын
брат, на будущее Vite (French word for "quick", pronounced /vit/ , like "veet")
@kimanowka
@kimanowka Жыл бұрын
Полно видео для новичков. Почему бы не сделать пару материал для middle , по той же самой архитектуре, какие-то интересные вещи в библиотеках. Такого контента вообще нет в русскоязычном ютьюбе
@PurpleSchool
@PurpleSchool Жыл бұрын
Буду иметь ввиду.
@user-qu5xj4no5q
@user-qu5xj4no5q 2 ай бұрын
и не говорите. Вроде и норм обзор, а вот сижу и приходится сразу лезть в доки. Тупо примера работы с сервером нет, ведь даже ошибку авторизации нужно отображать после попытки логина
@ruslan3040
@ruslan3040 11 ай бұрын
спасибо !
@PurpleSchool
@PurpleSchool 11 ай бұрын
Пожалуйста!
@serikov4430
@serikov4430 Жыл бұрын
Антон, было бы здорово посмотреть ваш новый конфиг для neovim. Шрифт, тема, добавленные плагины. Можно сделать отдельный пост и прикладывать линк к нему.
@PurpleSchool
@PurpleSchool Жыл бұрын
Будет в следующем видео
@noname-nh8mx
@noname-nh8mx Жыл бұрын
Не знаю в каких сложных случаях вы пользовались rhf, но на сложных кейсах уровень необходимой костыльности начинает поражать. А еще постоянно есть несколько способов сделать одно и то же, при том, что только 1 из способов работает нормально. Например хук watch экспортируемый из формы и хук useWatch. Казалось бы, одно и то же. Но нннет. Какое бы поле ты не указал в watch, компонент будет перерисован при изменении любого из полей формы. В то же время useWatch работает с перерисовками нормально. Дальше. При изменение стейта формы с состояния dirty - false, на dirty - true, опять же перерисовывается вся форма. Та же ситуация с isValid. (но только при первом изменении с isValid - true на isValid - false). Проперти внутри formState решили сделать проксями, поэтому чтобы работал ререндер завязанный на эти поля, нельзя их распаковывать. (а бывает и можно, но какую-то зависимость я так и не вывел, от раза к разу может работать, а может и нет) Догадаться об этом не прокуривая ишусы на гитхабе довольно тяжело. При этом есть хук useFormState который вроде бы работает нормально. Вопрос, зачем мне опять 2 способа сделать одно и то же, при том что один из них работает с подводными камнями? Также Controller HOC и useController хук тоже по разному работают с перерисовками. Метод {...register('fieldName')} лучше не использовать с анимациями и анмаунтами\маунтами, могут начаться непредсказуемые приколы с данными. При работе с field array, если мы хотим анимировать появление и исчезновение элементов в field array, начинаются просто невероятные пляски с бубном, потому что появляются тупо некорректные данные в хук форме. На гитхабе есть десяток ишусов с этим связанных без ответа. Просто закрытых, будто бы проблема не в rhf. Решение есть, но не тратя множество часов на прокуривание всего чего можно на гитхабе догадаться до него не легко. И в любом случае это костыль Вообщем по опыту - работать можно, но примерно 50% библиотеки работает с подводными камнями, если кейс чуть сложнее формы заполнения профиля. На разбирательство с которыми приходится тратить уйму часов, вероятно даже дней
@ROMVN95
@ROMVN95 Жыл бұрын
Может вам лучше отправить этот лонгрид на гитхаб разработчиков? Хороший фидбек получился
@PowWowVideo
@PowWowVideo Жыл бұрын
Согласен с нек пунктами.... Правда "watch" это не хук вовсе, это ж дилетанство :)
@noname-nh8mx
@noname-nh8mx Жыл бұрын
@@PowWowVideo да, действительно. Это что-то среднее. Оно и компонент перерисовывать умеет, и просто на изменение подписывать
@PowWowVideo
@PowWowVideo Жыл бұрын
Но вы правы в том, что если форма чуть сложнее логина, надо сильно разбираться и т@ться днями, чтобы заработало как надо. React Final Form более проще, интуитивней и предсказуемо
@noname-nh8mx
@noname-nh8mx Жыл бұрын
​@@PowWowVideo глянул исходники, в зависимости от переданного аргумента в watch(функция или не функция) делается подписка на событие или же возвращается результат вызова _getWatch. Что конкретно делает _getWatch разбираться желания нет, но что отчетливо видно - если вызвать watch не с функцией в аргументе, будет перерисовываться все поддерево. Все еще считаете это не что-то среднее? Может оно и не вызовет ошибку если вызывать watch в ифе как в случае с обычными хуками, но оно перерисовывает компонент Также вижу что при вызове _getWatch ему всегда передается аргумент isGlobal - true, возможно вопрос с перерисовкой при изменении любого поля в этом
@deGGenerate
@deGGenerate Жыл бұрын
Лайк неглядя как всегда
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо!
@dmaberlin
@dmaberlin 10 ай бұрын
а что чаще юзают Hook Form или Formik допустим в связке с Tailwind и чисто CSS ? или надо практиковать и то и то
@PurpleSchool
@PurpleSchool 10 ай бұрын
Мне кажется зависит от команды проекта и то и то в целом подходит хорошо для работы с формами
@dinarsharipov5022
@dinarsharipov5022 11 ай бұрын
Чисто для продвижения
@PurpleSchool
@PurpleSchool 11 ай бұрын
Спасибо!
@user-vr3pd9cc2q
@user-vr3pd9cc2q 10 ай бұрын
В ангуляре крутая очень валидация
@TheKykp
@TheKykp 8 ай бұрын
Добрый день, Антон! А Вы можете показать как вы используете react hook form в реальных проектах, когда вам нужно сделать компонент, который будет переиспользуемый например поле input, вы создаете отдельный юай компонент, который оборачиваете Controller или как вы обычно делает? Спасибо!
@PurpleSchool
@PurpleSchool 8 ай бұрын
Controller добавляется в нужно место, сами UI компоненты его не содержать, так как не всегда могут использоваться.
@TheKykp
@TheKykp 8 ай бұрын
​@@PurpleSchool спасибо за Ваш ответ, а Вы не могли бы если у вас будет время, записать на эту тему видео ролик, или подсказать в каком курсе вы разбираете эти примеры, дело в том, что я сделал как вы говорите, но мне потребовалось отслеживать введен ли в инпут текст что бы изменить бекграунд, и правильно было бы сделать такое поведение внутри самого компонента инпута, что бы он видел что он полный и менял фон, однако при использовании юз хук форм, мы отдаем управление инпутом, и теперь что бы отслеживать его наполнение нужно юзать watch, сразу возникает мысль в юз эффект, добавить отслеживание изменений поля, и если длина >= 1 то меняем фон, например передавая пропс в инпут. Но как то это кажется слишком сложным. И еще у меня есть одна проблема с этой библиотекой, когда устанавливаешь ошибку кастомную, например при ответе на запрос с бека, если юзер есть - то все ок, если юзера нет, setError('user") и текст ошибки, так вот эта ошибка, при клике на сабмит формы, почему то стирается, и следующий клик на форму уже отрисовывает компонент, в котором объект errors - пустой. Как вот такие моменты контролить? Спасибо ^_^
@user-kn6no9hz4o
@user-kn6no9hz4o 8 ай бұрын
@@TheKykp мб в состояние добавлять ошибку, и потом оттуда ее доставать и использовать в форме?(Только начал знакомиться с формами в реакт, не бейте)
@user-rd6oe9ny1j
@user-rd6oe9ny1j Жыл бұрын
уже давно и с удовольствием пользуюсь библиотекой Mantine. Помимо отличного дизайна, у них есть много прекрасных хуков, в том числе и для форм. Никогда не пользовались Mantine, Антон?
@PurpleSchool
@PurpleSchool Жыл бұрын
Нет, но будет интересно глянуть
@parmetra
@parmetra 11 ай бұрын
То есть уже встроенная валидация даже?
@user-nc2cv3np4x
@user-nc2cv3np4x 11 ай бұрын
Обьясните кому не трудно, я пробовал делать обработку формы по простому без использования реакт хук форм, правильно делать как на видео сделано?
@PurpleSchool
@PurpleSchool 11 ай бұрын
Зависит от сложности формы и желания тащить библиотеки.
@Sa1ahaddin
@Sa1ahaddin 27 күн бұрын
Спасибо за видео! А как ты сдела вывод ошибок в реальном времени?
@PurpleSchool
@PurpleSchool 27 күн бұрын
Это Nullls, но сейчас он не поддерживается, но есть замена none-ls
@pizza-shlyapa
@pizza-shlyapa Жыл бұрын
Круто ! Только отображение клавиш пропало в второй половине видео.
@PurpleSchool
@PurpleSchool Жыл бұрын
Да, на монтаже уже заметил
@kostasancez2358
@kostasancez2358 10 ай бұрын
Yup
@PurpleSchool
@PurpleSchool 10 ай бұрын
👍
@arinqwerty
@arinqwerty 2 ай бұрын
спасибо🤍
@PurpleSchool
@PurpleSchool 2 ай бұрын
Пожалуйста!
@siparat842
@siparat842 Жыл бұрын
Что за тема и шрифт?
@PurpleSchool
@PurpleSchool Жыл бұрын
One dark и шрифт Jerbrains Mono
@user-nc2cv3np4x
@user-nc2cv3np4x 11 ай бұрын
что за редактор кода?
@PurpleSchool
@PurpleSchool 11 ай бұрын
kzfaq.info/get/bejne/araqhrF_mZvYk3U.html
@vvks9901
@vvks9901 Ай бұрын
я вообще не врубаюсь как форма работает
@likluklak
@likluklak Жыл бұрын
antd form
@PurpleSchool
@PurpleSchool Жыл бұрын
К сожалению мне меньше понравились и связаны с UI либой antd. С ней норм.
@sieghardt8191
@sieghardt8191 6 ай бұрын
В новом NextJS использовать не получится уже. В 14 версии эта библа выдает ошибку, что не видит функцию useForm
@PurpleSchool
@PurpleSchool 6 ай бұрын
А компонент клиентский?
@user-zi4gy8nk6d
@user-zi4gy8nk6d Жыл бұрын
Складывается ошушение, что скоро не будет необходимости изучать нативный html и js. А надо будет учить библиотеки
@PurpleSchool
@PurpleSchool Жыл бұрын
Все библиотеки строятся на основах, которые понимать все равно нужно.
@aammssaamm
@aammssaamm 9 ай бұрын
А что там изучать? 😂
@vitmih380
@vitmih380 Жыл бұрын
Чувак, громкость клавиш может тебе и ласкает слух. Но для видосов желательно использовать тихую клаву.
@gals4997
@gals4997 Жыл бұрын
Даже если не слышать вашу речь, по движению мышц лица можно понять, что у вас неверное звукоизвлечение речевого аппарата. При произношении растягиваете рот в стороны(как при улыбке с сжатыми губами), не раскрываете горловое кольцо и гласные проглатываете, сворачиваете в конце не только фразы, но даже слова, сложно слушать. Могли бы несколькими упражнениями исправить эту кашу.
@user-yk6iq5hn4d
@user-yk6iq5hn4d Жыл бұрын
Автор очень хорошо рассказывает как профессионал. Даже если он не всегда говорит, как профессиональный диктор, это не повод в такой форме делать замечание. А вот сказать спасибо за доступное изложение материала можно
@gals4997
@gals4997 Жыл бұрын
@@user-yk6iq5hn4d Это не замечание, а умного профессионала никакие формы не заденут, из всего извлечет пользу и разберется, что лучше сделать. Какое воздействие лучше для положительного результата никому неизвестно, вот следующие выступления и покажут. )
React Hook Form - Complete Tutorial (with Zod)
28:22
Cosden Solutions
Рет қаралды 86 М.
Валидация форм с react-hook-form в React-приложениях
16:50
Михаил Непомнящий
Рет қаралды 68 М.
Получилось у Вики?😂 #хабибка
00:14
ХАБИБ
Рет қаралды 6 МЛН
Вечный ДВИГАТЕЛЬ!⚙️ #shorts
00:27
Гараж 54
Рет қаралды 9 МЛН
CSS container queries это огонь 🔥
13:22
PurpleSchool | Anton Larichev
Рет қаралды 9 М.
React Hook Form (+ Zod) - Complete Tutorial
31:21
ByteGrad
Рет қаралды 83 М.
Zod для валидации API и форм
20:19
Михаил Непомнящий
Рет қаралды 11 М.
Задача из Собеседования на 160,000 Евро в Год
13:27
Саша Лукин
Рет қаралды 1,1 МЛН
Получилось у Вики?😂 #хабибка
00:14
ХАБИБ
Рет қаралды 6 МЛН