Skip to main content

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

ReactJunior~1 хв читання
Запропонувати правку

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

Простіше кажучи:

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

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

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

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

javascript
<Greeting name="Alex" />

Тут:

  • Greeting - компонент;
  • props.name - вхідні дані;
  • результат - шматочок інтерфейсу: <h1>Привіт, Alex!</h1>.

Типи компонентів

  1. Функціональні компоненти (Function Components) Це звичайні функції, що повертають JSX:
javascript
function Button({ text }) { return <button>{text}</button>; }
  1. Класові компоненти (Class Components) Використовувалися раніше, до появи хуків:
javascript
class Button extends React.Component { render() { return <button>{this.props.text}</button>; } }

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

Компоненти можуть бути:

  • Простими (презентаційними) - відображають UI, без логіки:

    javascript
    const Title = () => <h2>Ласкаво просимо!</h2>;

  • Контейнерними (розумними) - керують станом і поведінкою:

    javascript
    function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Лічильник: {count}</p> <button onClick={() => setCount(count + 1)}>+</button> </div> ); }

Навіщо потрібні компоненти

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

Уся сторінка = дерево компонентів

Наприклад:

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

Кожен елемент - це компонент, який може містити інші компоненти.

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

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

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

Запропонувати правку