Когда вы начинаете разбираться в React, то быстро сталкиваетесь с ключевой идеей: всё в React — это компоненты. Они как кирпичики, из которых вы строите ваше приложение. Сегодня мы поговорим о функциональных компонентах, пропсах и о том, как они вместе помогают создавать динамичные и переиспользуемые интерфейсы.

Разница между функциональными и классовыми компонентами

Классовые компоненты: прошлое React

Когда React только появился, компоненты создавались с использованием классов. Вот как это выглядело:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Привет, {this.props.name}!</h1>;
  }
}

export default Greeting;

Классовые компоненты имели свои особенности:

• Они поддерживали состояния (state) и методы жизненного цикла.
• Код выглядел громоздко из-за необходимости использовать this и лишние конструкции, такие как constructor.

Классы были мощными, но со временем стало очевидно, что можно сделать React проще и элегантнее.

Функциональные компоненты: будущее React

С появлением хуков (React 16.8) функциональные компоненты стали основным способом написания компонентов. Они проще, понятнее и поддерживают все функции, которые раньше были доступны только в классовых компонентах.

Вот эквивалент предыдущего примера с использованием функционального компонента:

function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

export default Greeting;

Разница очевидна:

• Меньше кода.
• Нет this — данные передаются напрямую через аргументы.
• Легко добавлять состояния и другие возможности через хуки, такие как useState и useEffect.

Почему функциональные компоненты — это круто?

• Простота. Они представляют собой обычные JavaScript-функции.
• Гибкость. С помощью хуков функциональные компоненты могут делать всё, что раньше требовали классы.
• Стандартизация. Сообщество React активно использует функциональные компоненты.

Что такое пропсы и как передавать данные в компоненты

Пропсы (props — от слова properties) — это способ передавать данные в компонент. Представьте их как параметры функции, которые позволяют сделать компонент универсальным и динамичным.

Как работают пропсы?

Пропсы передаются в компонент как атрибуты:

<Greeting name="Иван" />

Внутри компонента пропсы доступны как объект:

function Greeting(props) {
  return <h1>Привет, {props.name}!</h1>;
}

С помощью деструктуризации кода становится ещё меньше:

function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

Пример: пропсы в действии

Представьте компонент, который отображает информацию о товаре. Вы можете передавать название, цену и описание как пропсы:

function ProductCard({ title, price, description }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Цена: {price} руб.</p>
      <p>{description}</p>
    </div>
  );
}

Использование компонента:

<ProductCard 
  title="Кофемашина" 
  price={25000} 
  description="Высококачественная кофемашина для вашего дома." 
/>

Рекомендации по структурированию компонентов

• Разделяйте компоненты на маленькие блоки. Если компонент становится слишком большим, выделите повторяющиеся части в отдельные компоненты.
• Давайте понятные имена. Имя должно отражать, что делает компонент. Например, ProductCard явно указывает, что это карточка товара.
• Держите один компонент — одну задачу. Компонент должен быть максимально автономным и отвечать только за свою часть интерфейса.
• Переиспользуйте компоненты. Если код повторяется в разных местах, вынесите его в компонент. Это упростит поддержку и развитие проекта.
• Избегайте ненужного состояния. Если данные можно передать через пропсы, не храните их в состоянии.

Практика: создаём компонент для карточки товара

Шаг 1: Создание компонента

Откройте файл src/App.jsx и замените содержимое:

function ProductCard({ title, price, description }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', margin: '16px' }}>
      <h2>{title}</h2>
      <p>Цена: {price} руб.</p>
      <p>{description}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <ProductCard 
        title="Кофемашина" 
        price={25000} 
        description="Высококачественная кофемашина для вашего дома." 
      />
      <ProductCard 
        title="Тостер" 
        price={3000} 
        description="Компактный тостер с различными режимами обжарки." 
      />
    </div>
  );
}

export default App;

Сохраните файл и запустите приложение с помощью:

npm run dev

Шаг 2: Проверяем результат

В браузере вы должны увидеть две карточки:

• Кофемашина: 25000 руб.
• Тостер: 3000 руб.

Каждая карточка отформатирована и отображает данные, переданные через пропсы.

Шаг 3: Улучшаем дизайн

Чтобы добавить немного стиля, можно использовать встроенные стили:

const cardStyle = {
  border: '1px solid #ddd',
  borderRadius: '8px',
  padding: '16px',
  margin: '16px',
  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
};

function ProductCard({ title, price, description }) {
  return (
    <div style={cardStyle}>
      <h2>{title}</h2>
      <p>Цена: {price} руб.</p>
      <p>{description}</p>
    </div>
  );
}

Теперь карточки выглядят приятнее.

Итоги

Мы познакомились с функциональными компонентами и пропсами. Они являются основой React и позволяют строить гибкие и переиспользуемые интерфейсы. Важно помнить:

• Функциональные компоненты — это современный стандарт React.
• Пропсы позволяют передавать данные в компоненты.
• Модульная структура упрощает разработку и поддержку приложений.