Форма регистрации - это интерфейс для создания нового аккаунта пользователя, как на сайтах, в веб-приложениях, соцсетях или онлайн-сервисах. Пользователи заполняют поля с личными данными и отправляют форму для создания учётной записи.
В нашей форме регистрации можно выделить несколько логических частей:
Заголовок формы - текст "Регистрация", обозначающий назначение формы
Группа полей формы - повторяющаяся структура label + input для каждого поля
Поле ввода - текстовое поле с placeholder и типом (text, email, password)
- кнопка "Зарегистрироваться" для submit формы
Кнопка отправки
Ссылка на вход - текст со ссылкой для пользователей с существующим аккаунтом
Контейнер формы - обёртка для всех элементов формы
Повторяющаяся структура полей - все четыре поля имеют одинаковую разметку: <div className="form-group"> с <label> и <input>. Это идеальный кандидат для компонента, который принимает props и переиспользуется.
Разные типы полей - поля различаются по type (text, email, password), label и placeholder. Эти параметры должны передаваться через props в переиспользуемый компонент.
Структура формы - форма содержит последовательность полей, кнопку и ссылку. Каждый элемент можно выделить в компонент для модульности и читаемости.
Семантическая разметка - используется тег <form> для правильной семантики, <label> связан с полем, type="submit" для кнопки позволяет отправлять форму через Enter.
Навигация между формами - ссылка "Войти" ведёт на /login, позволяя пользователям с существующим аккаунтом переключиться на форму входа.
Задание
Необходимо разбить монолитную форму регистрации на независимые переиспользуемые компоненты. Выделите заголовок формы в компонент, который принимает текст заголовка через props. Выделите группу полей (label + input) в переиспользуемый компонент, который принимает label, type, placeholder через props - этот компонент будет использоваться для всех четырёх полей. Выделите кнопку отправки в компонент, который принимает текст кнопки. Выделите блок со ссылкой на вход в компонент. В главном компоненте соберите все части вместе, используя переиспользуемый компонент поля четыре раза с разными параметрами.
