Що таке компонент у React?

ReactJunior~1 хв читання

Компонент у React - це незалежний, придатний до повторного використання блок інтерфейсу користувача, який описує як має виглядати і поводитися певна ділянка сторінки.

Іншими словами:

Компонент - це функція (або клас), яка приймає дані (props) і повертає JSX - опис того, що потрібно відобразити в браузері.

Простий приклад компонента

javascript

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Використання:

javascript

<Greeting name="Alex" />

Тут:

Greeting - це компонент;
props - об'єкт з переданими даними;
повертається JSX -> <h1>Hello, Alex!</h1>.

Види компонентів

1. Функціональні компоненти (Function Components) - сучасний стандарт

Це звичайні функції, що повертають JSX:

javascript

function Button({ text }) {
  return <button>{text}</button>;
}

2. Класові компоненти (Class Components) - старий синтаксис (до хуків)

javascript

class Button extends React.Component {
  render() {
    return <button>{this.props.text}</button>;
  }
}

Сьогодні 99% проєктів використовують функціональні компоненти з хуками (useState, useEffect та ін.).

Компоненти бувають:

Прості (презентаційні)

відповідають лише за зовнішній вигляд

javascript

const Title = () => <h2>Welcome!</h2>;

Контейнерні (розумні)

містять стан і логіку

javascript

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Розділяють інтерфейс на дрібні, зрозумілі частини Дозволяють повторно використовувати код (та сама кнопка, картка тощо) Спрощують підтримку і тестування Роблять UI модульним і передбачуваним

Структура застосунку

Зазвичай увесь React-застосунок - це дерево компонентів:

javascript

<App>
 ┣ <Header />
 ┣ <Main>
 ┃  ┣ <ProductCard />
 ┃  ┣ <ProductCard />
 ┃  ┗ <ProductCard />
 ┗ <Footer />

Кожен компонент може:

містити інші компоненти (вкладеність),
керувати станом (useState),
реагувати на події (onClick, onChange),
і оновлювати інтерфейс, коли дані змінюються.

Підсумок

Термін	Що означає
Компонент	Функція (або клас), що повертає JSX
Props	Дані, що передаються в компонент
State	Внутрішні дані компонента
JSX	Синтаксис для опису структури UI
Композиція	Вкладення компонентів один в одного

Коротко:

Компонент у React - це будівельний блок інтерфейсу. Він об'єднує розмітку, дані та логіку поведінки в одну самостійну одиницю.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.