Написання UI

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

React-застосунки створені з ізольованих частин UI, які називаються компонентами. Компонент React — це функція JavaScript, до якої можна додати розмітку. Компоненти можуть бути маленькими, як кнопка, або великими, як ціла сторінка. Ось компонент 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>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “Ваш перший компонент”, щоб дізнатися, як оголошувати та використовувати компоненти React.

Детальніше

---

Імпорт та експорт компонентів

Ви можете оголосити багато компонентів в одному файлі, але великі файли можуть бути заскладними для навігації. Щоб вирішити цю проблему, ви можете експортувати компонент у його власний файл, а потім імпортувати цей компонент з іншого файлу:

import Profile from './Profile.js';

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

Бажаєте вивчити цю тему?

Прочитайте розділ “Імпорт та експорт компонентів”, щоб дізнатися, як розділити компоненти на декілька файлів.

Детальніше

---

Написання розмітки з JSX

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

Якщо ми вставимо наявну розмітку HTML у компонент React, це не завжди працюватиме:

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Список завдань Геді Ламар</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Винахід нових світлофорів
      <li>Провести репетицію сцени з фільму
      <li>Вдосконалення технології спектра
    </ul>

Якщо у вас вже є схожий HTML, ви можете виправити його за допомогою конвертера:

export default function TodoList() {
  return (
    <>
      <h1>Список завдань Геді Ламар</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Геді Ламар (Hedy Lamarr)"
        className="photo"
      />
      <ul>
        <li>Винахід нових світлофорів</li>
        <li>Провести репетицію сцени з фільму</li>
        <li>Вдосконалення технології спектра</li>
      </ul>
    </>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “Написання розмітки з JSX”, щоб дізнатися, як писати правильний JSX.

Детальніше

---

JavaScript у JSX із фігурними дужками

JSX дозволяє писати HTML-подібну розмітку всередині файлу JavaScript, зберігаючи логіку рендерингу та вміст в одному місці. Іноді вам потрібно додати трохи логіки JavaScript або посилатися на динамічну властивість у цій розмітці. Тоді ви можете використовувати фігурні дужки у своєму JSX, щоб “відкрити вікно” у JavaScript:

const person = {
  name: 'Грегоріо І. Зара (Gregorio Y. Zara)',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Список завдань {person.name}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Покращити відеотелефон</li>
        <li>Підготувати лекції з авіаційних технологій</li>
        <li>Працювати над двигуном на спиртовому паливі</li>
      </ul>
    </div>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “JavaScript у JSX з фігурними дужками”, щоб дізнатися, як отримувати доступ до JavaScript-елементів зсередини JSX.

Детальніше

---

Передача пропсів до компонента

Компоненти React використовують пропси для спілкування один з одним. Кожен батьківський компонент може передавати деяку інформацію своїм дочірнім компонентам, задаючи їхні пропси. Пропси можуть нагадувати вам атрибути HTML, але ви можете передати через них будь-яке значення JavaScript, включно з об’єктами, масивами, функціями та навіть JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Кацуко Сарухаші (Katsuko Saruhashi)',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “Передача пропсів до компонента”, щоб дізнатися, як передавати та читати пропси.

Детальніше

---

Умовний рендеринг

Ваші компоненти часто повинні відображати різні елементи залежно від різних умов. У React ви можете умовно рендерити JSX за допомогою синтаксису JavaScript, використовуючи вираз if та оператори && і ? :.

У цьому прикладі оператор JavaScript && використовується для умовного рендерингу прапорця:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Список речей для пакування Саллі Райд (Sally Ride)</h1>
      <ul>
        <Item
          isPacked={true}
          name="Космічний костюм"
        />
        <Item
          isPacked={true}
          name="Шолом із золотим листям"
        />
        <Item
          isPacked={false}
          name="Фото Тем О'Шонессі (Tam O'Shaughnessy)"
        />
      </ul>
    </section>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “Умовний рендеринг”, щоб дізнатися про різні способи рендерингу вмісту залежно від умов.

Детальніше

---

Рендеринг списків

Часто потрібно відобразити кілька подібних компонентів із колекції даних. Ви можете використовувати filter() і map() із JavaScript у React, щоб фільтрувати та перетворювати свій масив даних у масив компонентів.

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

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ', '}
        чиєю працею є {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Вчені</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “Рендеринг списків”, щоб дізнатися, як рендерити список компонентів і вибирати ключ.

Детальніше

---

Утримання компонентів “чистими”

Деякі функції JavaScript є чистими. Чиста функція (pure function):

• Займається лише своєю справою. Вона не змінює жодних об’єктів чи змінних, які існували до її виклику.
• Однакові вхідні дані — той самий результат. З урахуванням однакових вхідних даних чиста функція має завжди повертати той самий результат.

Пишучи компоненти виключно як чисті функції, ви можете уникнути цілого класу незрозумілих помилок і непередбачуваної поведінки відповідно до того, як ваша кодова база зростатиме. Ось приклад “нечистого” компонента:

let guest = 0;

function Cup() {
  // Погано: зміна значення змінної, що вже існувала!
  guest = guest + 1;
  return <h2>Чашка для гостя #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Ви можете зробити цей компонент чистим, передавши проп замість модифікації змінної, що вже існувала:

function Cup({ guest }) {
  return <h2>Чашка для гостя #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Бажаєте вивчити цю тему?

Прочитайте розділ “Утримання компонентів “чистими"", щоб дізнатися, як писати компоненти у вигляді чистих, передбачуваних функцій.

Детальніше

---

Ваш UI як дерево

React використовує дерева для моделювання зв’язків між компонентами та модулями.

Дерево рендерингу React — це представлення батьківського та дочірнього зв’язку між компонентами.

Компоненти, розташовані біля вершини дерева, поблизу кореневого компонента, вважаються верхніми або найвищого рівня (top-level). Компоненти без дочірніх компонентів є листовими компонентами. Ця категоризація компонентів корисна для розуміння потоку даних і продуктивності рендерингу.

Моделювання зв’язків між модулями JavaScript — ще один корисний спосіб зрозуміти вашу програму. Ми називаємо це деревом залежностей модулів.

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

Бажаєте вивчити цю тему?

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

Детальніше

---

Що далі?

Перейдіть до розділу “Ваш перший компонент”, щоб почати читати цю секцію посторінково!

Або, якщо ви вже знайомі з цими темами, чому б не переглянути “Додавання інтерактивності”?