Декомпозиция формы регистрации

В этом решении мы разбиваем форму регистрации на независимые компоненты для улучшения структуры кода.

Компонент группы формы

function FormGroup({ label, type, placeholder }) {
    return (
        <div className="form-group">
            <label>{label}</label>
            <input
                type={type}
                placeholder={placeholder}
            />
        </div>
    );
}

Компонент FormGroup инкапсулирует пару "метка + поле ввода". Мы выделили его отдельно, потому что в форме четыре одинаковых по структуре поля - они отличаются только текстами и типами. Вместо копирования разметки четыре раза, мы создаём переиспользуемый компонент. Это упрощает изменения - если нужно добавить иконку или обёртку, меняем код в одном месте.

Компонент ссылки на вход

function RegisterLink() {
    return (
        <p>
            Уже есть аккаунт? <a href="/login">Войти

RegisterLink - это маленький компонент для одной строки текста со ссылкой. Можно было оставить его прямо в форме, но вынесение даже таких мелких элементов делает код формы чище. В будущем эта ссылка может стать сложнее - добавится роутинг через React Router вместо обычного <a>, или появится логика определения, показывать ли эту ссылку.

Компонент формы

function RegistrationForm() {
    return (
        <form>
            <FormGroup

RegistrationForm собирает все поля формы вместе. Вместо множества <div className="form-group"> с похожей разметкой, мы видим четыре чистых вызова <FormGroup> с разными параметрами. Структура формы читается как декларативное описание - "поле имени, поле email, поле пароля, подтверждение, кнопка, ссылка". Компонент пока не содержит логики (состояния, валидации), только структуру.

Композиция в главном компоненте

function App() {
    return (
        <div className="registration">
            <h2>

Компонент App максимально простой - контейнер с заголовком и формой. Вся сложность формы скрыта внутри RegistrationForm. Если позже появятся другие формы (вход, восстановление пароля), App будет переключаться между ними, не содержа деталей каждой формы.

Передача разных типов полей

<FormGroup
    label="Email"
    type="email"
    placeholder="Введите ваш email"

Атрибут type меняет поведение поля - "email" даёт специальную клавиатуру на мобильных, "password" скрывает символы. FormGroup не знает про эти особенности - он просто передаёт type в <input>. Это делает компонент универсальным для любых типов полей.

Отсутствие состояния

Обратите внимание, что в этом решении форма не контролируется React - нет value и onChange на полях. Это статическая декомпозиция - мы разбили структуру на компоненты, но не добавили функциональность. Форма отображается, но не обрабатывает ввод пользователя. Для полноценной работы нужно добавить состояние, обработчики событий и валидацию.