React Hook Form - огляд бібліотеки для роботи з формами в React
Спрощуємо роботу з формами у React
👂 В одному з попередніх відео ( • Реакт і дуже проста форма ) ми вже розбирали роботу з формами в React. Але, зазвичай, з чистими формами працюють не дуже часто, надаючи перевагу бібліотекам, що спрощують та прискорюють роботу розробника.
👉 Саме з такою бібліотекою ми сьогодні і познайомимось . Це React Hook Form яка розроблена для використання у функціональних компонентах, має зручні інструменти з коробки та підтримую асинхронну валідацію і валідацією за допомогою Yup, Joi та інших.
😎 Cама бібліотека важить 25kb (мініфікована, не жата), має 2.6 мільйонів заважантажень на тиждень та 32 тисячі зірок. Останній коміт був учора, тож ви можете бути впевнені що хоча б ще один рік бібліотека буде жива та підтримувана.
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
💡Всі матеріали курсу: github.com/Drag13/react-learn...
Дякую! Нарешті є інфа українською!!!
Дякую
Дякую велике за відео! Дуже корисно
дужеее дякую! підписався і дивлюсь далі ;) #React #Hook #Form
за такого підходу, якщо форма не валідна у мене зануляються всі значення до початкових, які вказані в values. Тому для себе виділив окремий тип для форми і передав їх дженеріком, а values видалив взагалі.
Привіт, зробіть будь ласка відео як працює бек енд, наприклад куда скаладається інформація яку ми надсилаємо, думаю розуміти як працює бек буде багатьом цікаво
Я попросив колегу підготувати доповідь про те, як "готувати" бекенд майже без коду, сподіваюся зробимо цю лекцію в лютому.
на расте можно сделать такое использовать файл .env.form потом его расширять. Можно ли подобное реализовать на раеакте и имеет ли смысл писать персональные конфиги для формы?
Це JS. На ньому можна писати майже все що завгодно і динамічні форми (якщо ви про них) також
Если форма очень большая, не нужно же далать огромную простыню, и делать одну форму используя лазилоад.Если смысл разбивать форму на несколько маленьких форм?Потом туда пердавать данные из предыдущей формы и.т.д?Второй вариант использовать реакт роутер, запихать внуть креате форм и переходить по линку на следующую страницу с инпутами?
Якщо форма супер велика то зазвичай роблять другим шляхом, тобто через роутер у вигляді wizzard.
а що за розширення чи бібліотека використовується, яка показує розміри імпортів?
Import Cost
@@reactdev дякую за інформацію
Цікаво...)
Насмерть запутався... на 21 хвилині. Треба переписати відео. І потрібна більша роздільна здатність екрану.
Посмотрел код других разработчиков на реакте, которые используют React Hook Form,бросилось в глаза. 1.Зачем передают значение функцию getState в window, для чего это делается? Редуксовый стор вроде как лежит в контексте и должен извлекаться через хук useStore.2.Хранить формы в глобальном сторе не рекомендует даже создатель Redux. Это была вроде как бы одной из причин почему, проект redux-form в своё время закрылся, судя по статьям в интернете.
1. Навіть не знаю. Можливо для SSR, але ц просто здогадка. Поділіться посиланням де ви це бачили 2. А навіщо вам вся форма в сторі? Все що вам потрібно, це перенести з неї дані в стор, якщо вони валідні і це робиться на сабміті.
@@reactdev 2.Как я понял из лекции, формы это типа обычные компоненты, которые не знают про окружение, такое им и не нужно!АИм, хватает обычного this.state.Для зависимых форм данные скорее всего передаются или извне, либо уж через connect() и props. Но Формы никогда не вызывают изменения Redux-store напрямую.Формы просто используют Redux как хранилище состояния, вместо хранения его в компонентах. Там вроде есть отдельный редьюсер, и эта часть state ничего не знает про остальные. С этой частью стейта обычно не работают напрямую (однако иногда это бывает удобно, например, вручную залить ошибки серверной валидации ошибки в стейт. Расписал как мог.1.Откройте доступ, что бы можно было сливать код и бросать ссылки иначе комменты удаляются, я вам уже об этом писал, я даже английские термины русскими буквами пишу.Все формы в одном месте, всегда есть доступ к ним извне, структурирование данных.Удобно использовать, например, на формах каталогов.