Розуміння Компонентів React

Додаток React складається з компонентів. Компонент — це багаторазовий фрагмент інтерфейсу користувача, який визначає, що відображається на екрані. Замість створення всієї сторінки як одного великого блоку, React заохочує розділяти інтерфейс на менші частини. Кожна частина відповідає за певну секцію UI, наприклад, заголовок, кнопку або повідомлення.

У React компоненти пишуться за допомогою JavaScript і визначаються як функції. Кожен компонент повертає опис того, що має з’явитися на екрані, а React відповідає за його відображення.

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

function Welcome() {
  return <h1>Welcome to React</h1>;
}

Це компонент React з назвою Welcome. Він повертає елемент інтерфейсу, який React може відобразити на екрані. Не потрібно поки що розуміти синтаксис. Цей приклад показує, як виглядає компонент на загальному рівні.