Стань БОГОМ Формочок

Стань БОГОМ Формочок | REACT HOOK FORM + ZOD

Рет қаралды 2,551

Күн бұрын

#frontend #development #react
Привіт, я Нік і ти на каналі Dev Routine!
Посилання на проект з відео: github.com/SemX74/react-hook-...
Стеж за нами в телеграмі: (Корисні пости і меми): t.me/ giZ-rijhq7BiZGEy
Дивись наш тікток: / dev.routine
Лайк та коментар, якщо відео було тобі корисно!
Таймкоди:
0:00 - Інтро
0:31 - Вступ
1:05 - Які варіанти розглянемо?
1:19 - Базовий функціонал форми реєстрації
5:00 - Підключення Zod
7:14 - Валідування повторення пароля за домогою Zod
8:49 - Створення кастомного інпута
11:38 - Хендлінг інпутів з різних бібліотек
12:57 - Використання watch() та ререндери
13:33 - Складні форми та useFieldArray()
14:55 - Пишемо форму з рецептом та інгрідієнтами
18:08 - Заключення

Пікірлер: 26

@KrasNik2912 Ай бұрын

Автор просто геніально подає інформацію. Топ контент! Дякую!

@user-wr7wk3fg4v 26 күн бұрын

Аплодую, підписка та лайк зразу, дуже вчасно, продовжуй знімати хороші відео❤

@vseslavr Ай бұрын

Дякую за класний контент! Лайк, підписка, дзвіночок) Як щодо того, щоб зробити ультимативний гайд на react-hook-form + zod? Типу дуже складна форма з купою залежних один від одного інпутів, екзотичними складними валідаціями, асинхроннисми валідаціями, запобігання ререндерів (навіщо тоді цей watch, якщо через нього все ререндериться?), оптимізація, типізація, асинхронне завантаження даних щоб предзаповнети форму, multiple steps і т.д. ;)

@YevhenZhuchenko Ай бұрын

Ні, ну це підписка) Дуже класно розповідаєш, приємно слухати. Ще дуже частий кейс у формочках - умовні поля, наприклад - клацнути чекбокс, показати нове required поле.

@itsDevRoutine Ай бұрын

Надзвичайно приємно, дякую💪

@YaroslavEx Ай бұрын

коментар для підтримки каналу

@olexh2605 Ай бұрын

Дуже хороше відео! З пропозицій розширення/покращення, в React Hook Form є можливість хендлити форму через Context API. Огортаємо бажану форму в FormProvider, створюємо компоненти для форми, у яких всередині отримуємо всі значення для реєстрації через контекст, і використовуємо їх для побудови самої форми без передачі через props кожного разу. Доволі зручний принцип оформлення, якщо дуже великий проєкт з багатьма однотипними формами

@itsDevRoutine Ай бұрын

підтримую

@AndriyNosov Ай бұрын

Дуже класна подача, швидко, лаконічно і без води👍

@itsDevRoutine Ай бұрын

Дякую ! 🙌

@shroomydoteu Ай бұрын

Чудове відео! Шкодую, що не побачив його півроку тому. Хочу лише додати, що було б круто, якщо наступного разу розповіси по step-форми, бо я лише додумався зі сценарієм display:none і shouldUnregister: false між кроками

@itsDevRoutine Ай бұрын

Дякую🥰 Можливо запишу ще другу частину зовсім скоро!