У React компоненти є основними будівельними блоками інтерфейсу користувача. Вони дозволяють розробникам створювати незалежні, багаторазово використовувані частини інтерфейсу, які можна комбінувати для формування складніших елементів UI.

React-додаток можна уявити як дерево компонентів, де компонент верхнього рівня є коренем. Кожен компонент відповідає за рендеринг JSX-розмітки, визначаючи бажану HTML-структуру, що відображається у DOM браузера.

Функціональні компоненти

Функціональні компоненти — це функції JavaScript, які повертають JSX для визначення структури та вмісту елемента інтерфейсу. Вони є сучасним способом створення додатків на React і називаються з великої літери, наприклад, Product або User, щоб відрізняти їх від стандартних HTML-елементів, таких як div або span.

Функціональні компоненти мають кілька переваг:

• Менше шаблонного коду: Функціональні компоненти зменшують кількість шаблонного коду, роблячи їх більш лаконічними та зручними у використанні;
• Легше сприймати: Вони простіші для розуміння та сприйняття, особливо для розробників, які тільки починають працювати з React;
• Легше тестувати: Функціональні компоненти полегшують тестування завдяки своїй простоті;
• Відсутність контексту (this): На відміну від класових компонентів, функціональні компоненти не використовують контекст (this), що спрощує код. Ось приклад функціонального компонента:

const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

У цьому прикладі Product — це функціональний компонент, який представляє картку продукту.

Функціональні компоненти складають більшу частину структури React-додатку, виконуючи роль основних будівельних блоків для створення інтерфейсів користувача.