Props в React

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

Деструктуризация props

function ProfileCard({ avatar, name, bio, followers, following }) {
    //...
}

Вместо того чтобы писать props.avatar, props.name и так далее, мы используем деструктуризацию прямо в параметрах функции. Это извлекает нужные свойства из объекта props в отдельные переменные, что делает код чище и удобнее.

Динамические атрибуты

<div 
    className="profile-avatar"
    role="img"
    aria-label={`${name

Атрибуты в JSX тоже могут быть динамическими. Мы используем шаблонную строку внутри фигурных скобок, чтобы создать уникальный aria-label для каждого профиля. Это важно для доступности - программы чтения с экрана смогут озвучить, чей это аватар.

Форматирование чисел

<div className="stat-value">
    {followers.toLocaleString()}
</div>

Метод toLocaleString() форматирует число в соответствии с локалью пользователя. Например, число 1234 превратится в 1 234 или 1,234 в зависимости от региона. Это делает большие числа более читаемыми.

Передача props

<ProfileCard 
    avatar="👩‍💻"
    name="Анна Иванова"
    bio="Frontend разработчик | React энтузиаст 💻"
    

Когда мы используем компонент, мы передаём данные через атрибуты. Строки можно передавать в кавычках, а для других типов данных (числа, объекты, массивы) используем фигурные скобки. React соберёт все эти атрибуты в объект props и передаст в компонент.

Переиспользование компонента

<ProfileCard avatar="👩‍💻" name="Анна Иванова" //... />
<ProfileCard avatar="👨‍💻" name="Иван Петров" //... />
<ProfileCard avatar="👩‍🔧"

Мы создали компонент один раз, но используем его три раза с разными данными. Это и есть главная сила props - один компонент может отображать множество разных вариантов контента.