Ваш перший компонент

Компоненти: Будівельні блоки UI

У Вебі, HTML дозволяє нам створювати багатоструктурні документи за допомогою вбудованих наборів тегів, таких як <h1> та <li>:

<article>
  <h1>Мій перший компонент</h1>
  <ol>
    <li>Компоненти: Будівельні блоки UI</li>
    <li>Визначення компонента</li>
    <li>Використання компонента</li>
  </ol>
</article>

Ця розмітка представляє статтю <article>, її заголовок <h1>, та (скорочений) зміст у вигляді впорядкованого списку <ol>. Розмітка подібна до цієї, в поєднанні з CSS для стилізації та JavaScript для інтерактивності, лежить в основі кожної бічної панелі, аватара, модального вікна, випадного меню — кожного елемента UI, який ви бачите в Вебі.

React дозволяє вам поєднувати вашу розмітку, CSS та JavaScript у власні “компоненти”, повторно використовувані елементи UI для вашого додатку. Код змісту, який ви бачили вище, можна перетворити на компонент <TableOfContents />, який ви можете відобразити на кожній сторінці. Під капотом він все ще використовує ті ж самі HTML-теги, такі як <article>, <h1>, тощо.

Так само, як і з HTML-тегами, ви можете компонувати, впорядковувати та вкладати компоненти для створення цілих сторінок. Наприклад, сторінка документації, яку ви читаєте, складається з компонентів React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Документація</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою <TableOfContents />! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, як-от Chakra UI та Material UI.

Визначення компонента

Традиційно, створюючи веб-сторінки, веб-розробники спершу писали розмітку їхнього контенту, а потім додавали інтерактив, трохи посипаючи JavaScript’ом. Це чудово працювало, коли інтерактив була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: компонент React - це функція JavaScript, яку можна посипати розміткою. Ось як це виглядає (ви можете відредагувати приклад нижче):

А ось як створити компонент:

Крок 1: Експортування компонента

Префікс export default це стандартний синтаксис JavaScript (не специфічний для React). Він дозволяє вам позначити головну функцію у файлі, щоб ви могли потім імпортувати її з інших файлів. (Детальніше про імпортування у розділі Імпортування та експортування компонентів!)

Крок 2: Визначення функції

За допомогою function Profile() { } ви визначаєте функцію JavaScript з іменем Profile.

Крок 3: Додавання розмітки

Компонент повертає тег <img /> з атрибутами src та alt. <img /> записаний як HTML, але насправді це JavaScript під капотом! Цей синтаксис називається JSX, і він дозволяє вам вбудовувати розмітку всередину JavaScript.

Оператори повернення можуть бути записані в одному рядку, як у цьому компоненті:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кетерін Джонсон (Katherine Johnson)" />;

Але якщо ваша розмітка не розташована в тому ж рядку, що й ключове слово return ви повинні обгорнути її в пару дужок:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кетерін Джонсон (Katherine Johnson)" />
  </div>
);

Застосування компонента

Тепер, коли ви створили свій компонент Profile, ви можете вкладати його всередину інших компонентів. Наприклад, ви можете експортувати компонент Gallery, який використовує кілька компонентів Profile:

Що бачить браузер

Зверніть увагу на відмінність у регістрі літер:

• <section> написано у нижньому регістрі, тому React знає, що ми звертаємось до HTML-тегу.
• <Profile /> починається з великої літери P, тому React знає, що ми хочемо використовувати наш компонент з назвою Profile.

І Profile містить ще більше HTML: <img />. В кінцевому результаті це те, що бачить браузер:

<section>
  <h1>Видатні вчені</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кетерін Джонсон (Katherine Johnson)" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кетерін Джонсон (Katherine Johnson)" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кетерін Джонсон (Katherine Johnson)" />
</section>

Вкладення та організація компонентів

Компоненти є звичайними JavaScript функціями, тому ви можете зберігати кілька компонентів у одному файлі. Це зручно, коли компоненти є досить малими або тісно пов’язаними між собою. Якщо цей файл стає переповненим, ви завжди можете перемістити компонент Profile до окремого файлу. Незабаром ви навчитеся це робити на сторінці про імпорт.

Тому що компоненти Profile рендеряться всередині Gallery—навіть кілька разів!—ми можемо сказати, що Gallery є батьківським компонентом, який рендерить кожний Profile як “дочірній”. Це частина магії React: ви можете визначити компонент один раз і потім використовувати його в будь-яких місцях та скільки завгодно разів.

export default function Gallery() {
  // 🔴 Ніколи не створюйте компонент всередині іншого компонента!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Оголошуйте компоненти на верхньому рівні
function Profile() {
  // ...
}