Декомпозиция компонента

В этом решении мы разбиваем монолитный компонент профиля на несколько независимых компонентов.

Создание компонента заголовка

function ProfileHeader({ avatarSrc, name, role }) {
    return (
        <div className="profile-header">
            <div className="avatar-emoji">{avatarSrc}</div>
            <h2>{name}</h2>
            <p>{role}</p>
        </div>
    );
}

Мы выносим заголовок профиля в отдельный компонент ProfileHeader. Он принимает три props через деструктуризацию: avatarSrc (эмодзи аватара), name (имя) и role (должность). Компонент отвечает только за одну вещь - отображение верхней части профиля. Это делает код проще для понимания - достаточно посмотреть на имя компонента, чтобы понять, что он делает.

Передача данных через props

<ProfileHeader
    avatarSrc="👨"
    name="Иван Иванов"
    role="Frontend-разработчик"
/>

Вместо жёстко закодированных значений внутри компонента, мы передаём данные через props. Это делает ProfileHeader переиспользуемым - можно создать несколько профилей с разными данными, используя один и тот же компонент. Например, для другого пользователя достаточно передать другие props, не меняя код самого компонента.

Создание компонента деталей

function ProfileDetails({ email, phone }) {
    return (
        <div className="profile-details"

Компонент ProfileDetails отвечает за отображение контактной информации. Он независим от ProfileHeader - можно изменить один компонент, не затрагивая другой. Например, если нужно добавить адрес в детали, изменения будут только в ProfileDetails. Кнопка "Редактировать профиль" пока не имеет функциональности, но в будущем можно добавить обработчик через props.

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

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

Главный компонент App собирает маленькие компоненты вместе. Это называется композицией - создание сложных интерфейсов из простых частей. App не знает, как именно ProfileHeader отображает аватар или имя - он просто передаёт данные и получает готовый результат. Это разделение ответственности - каждый компонент делает свою работу.

Преимущества декомпозиции

Разбитие на компоненты даёт несколько преимуществ. Код становится более читаемым - вместо одного длинного компонента со множеством div, мы видим структуру ProfileHeader + ProfileDetails. Компоненты можно переиспользовать - ProfileHeader подойдёт не только для страницы профиля, но и для карточки пользователя в списке. Легче тестировать - можно проверить каждый компонент отдельно. Проще работать в команде - один разработчик может изменять ProfileHeader, другой ProfileDetails, без конфликтов в коде.

Именование props

function ProfileHeader({ avatarSrc, name, role })

Мы используем понятные имена для props. avatarSrc (источник аватара), name (имя), role (роль) - любой разработчик сразу поймёт, что эти props означают. Хорошие имена - это документация кода. Избегайте общих имен типа data или value - они не говорят, какие именно данные ожидаются.