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

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

Ви дізнаєтесь

  • Що таке компонент
  • Яку роль відіграють компоненти в додатку React
  • Як написати свій перший компонент React

Компоненти: Будівельні блоки 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, яку можна посипати розміткою. Ось як це виглядає (ви можете відредагувати приклад нижче):

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Кетерін Джонсон (Katherine Johnson)"
    />
  )
}

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

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

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

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

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

Pitfall

React компоненти є звичайними JavaScript функціями, але їхні назви мають починатися з великої літери інакше вони не будуть працювати!

Крок 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>
);

Pitfall

Без дужок, будь-який код в рядках після return буде проігноровано!

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

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

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

export default function Gallery() {
  return (
    <section>
      <h1>Видатні вчені</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

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

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

  • <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: ви можете визначити компонент один раз і потім використовувати його в будь-яких місцях та скільки завгодно разів.

Pitfall

Компоненти можуть рендерити інші компоненти, але ви не повинні вкладати їх створення одне в інше:

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

Код вище дуже повільний і може призводити до помилок. Натомість, створюйте кожен компонент на верхньому рівні:

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

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

Якщо дочірній компонент потребує деяких даних від батьківського компонента, передавайте їх за допомогою пропсів замість вкладення створень.

Deep Dive

Компоненти на всій глибині

Ваш React додаток починається з “кореневого” компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте CodeSandbox або якщо ви використовуєте фреймворк Next.js, кореневий компонент визначений в pages/index.js. У цих прикладах ви експортуєте кореневі компоненти.

Більшість додатків React використовують компоненти на всій глибині. Це означає, що ви будете використовувати компоненти не тільки для повторно використовуваних елементів, таких як кнопки, але й для більших елементів, таких як бічні панелі, списки та, врешті-решт, цілі сторінки! Компоненти - зручний спосіб організації коду UI та розмітки, навіть якщо деякі з них використовуються лише один раз.

Фреймворки на основі React в цьому плані йдуть ще далі. Замість використання порожнього HTML-файлу і дозволу React “перейняти” керування сторінкою за допомогою JavaScript, вони також автоматично генерують HTML з ваших React компонентів. Це дозволяє вашому додатку показувати деякий контент до завантаження JavaScript коду.

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

Recap

Ви щойно спробували React вперше! Давайте повторимо деякі ключові моменти.

  • React дозволяє створювати компоненти, елементи UI для повторного використання у вашому додатку.

  • У додатку React кожен елемент UI є компонентом.

  • React компоненти є звичайними JavaScript функціями, за винятком:

    1. Їхні назви завжди починаються з великої літери.
    2. Вони повертають JSX-розмітку.

Challenge 1 of 4:
Експорт компонента

Код в цій пісочниці не працює, тому що основний компонент не експортований:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Аклілу Лемма (Aklilu Lemma)"
    />
  );
}

Спробуйте виправити це самостійно, перш ніж дивитись на рішення!