Привет, друзья!
В последнее время мне на глаза часто попадаются статьи, посвященные работе с формами в React
и разработке соответствующих кастомных хуков. Вот парочка таких статей:
- Using Forms in React
- React.js — формошлепство или работа с формами при помощи пользовательских хуков
- Form validation with React Hooks WITHOUT a library: The Complete Guide
Я тоже решил попробовать в этом свои силы, чему и посвящена настоящая статья. Под "этим" я подразумеваю разработку кастомного хука для работы с формами в React
.
Сначала мы разработаем хук, затем используем его в формах для регистрации и авторизации.
Для большей правдоподобности мы напишем простой express-сервер, который будет возвращать некоторые пользовательские данные (например, jwt-токен и хешированный пароль), а также некоторые типичные для процесса авторизации ошибки (например, 404 User not found
или 409 Email already in use
).
При разработке хука и компонентов приложения мы применим несколько продвинутых паттернов, которые, смею надеяться, покажутся вам интересными.
Песочница:
Возможно, для того, чтобы в песочнице все заработало, потребуется ввести команду yarn dev
в терминале.
Хук в форме npm-пакета — simple-form-react
.