Итоги курса

Курс о формах и событиях в React.

Что ты узнал

• События — SyntheticEvent, camelCase, preventDefault, stopPropagation
• Контролируемые компоненты — value + onChange
• Неконтролируемые компоненты — ref и defaultValue
• Отправка формы — onSubmit + preventDefault
• Валидация — на лету и при отправке
• FormData — для форм с файлами
• React Hook Form — библиотека для сложных форм
• Динамические поля — useFieldArray
• События клавиатуры и мыши — onKeyDown, onClick, комбинации
• Оптимизация — memo, debounce, виртуализация
• Доступность — label, ARIA, фокус, контраст

Что выбрать

Простая форма — контролируемые поля через useState.

Форма с файлами — FormData и неконтролируемые поля.

Большая форма — React Hook Form.

Динамические поля — useFieldArray.

Быстрая форма — неконтролируемые поля через ref.

Частые ошибки

• Забыть preventDefault — перезагрузка страницы
• Использовать value без onChange — поле не работает
• Использовать selected в select вместо value
• Путать checked и value для чекбокса
• Не типизировать события
• Использовать индекс как key в динамических полях
• Забыть про доступность

Что дальше

• Изучи React Hook Form подробнее
• Попробуй Zod для схем валидации
• Разберись с useActionState и серверными формами (Next.js)
• Практикуй на реальных задачах
• Проверяй формы на клавиатуре и скринридере

Полезные ссылки

• React docs: react.dev/reference/react-dom/components/form
• React Hook Form: react-hook-form.com
• Zod: zod.dev
• MDN: developer.mozilla.org
• a11y: a11yproject.com

Заключение

Формы — большая часть фронтенд-работы. Хорошая форма удобна, доступна и предсказуема. Начни с простых контролируемых полей, усложняй по мере необходимости. Не бойся использовать библиотеки — они решают рутину и позволяют сосредоточиться на логике.