Написання UI

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

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

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>
  );
}

Ready to learn this topic?

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

Read More

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

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

import Profile from './Profile.js';

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

Ready to learn this topic?

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

Read More

Написання розмітки з 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>
    </>
  );
}

Ready to learn this topic?

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

Read More

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>
  );
}

Ready to learn this topic?

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

Read More

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

Компоненти 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>
  );
}

Ready to learn this topic?

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

Read More

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

Ваші компоненти часто повинні відображати різні елементи залежно від різних умов. У 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>
  );
}

Ready to learn this topic?

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

Read More

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

Часто потрібно відобразити кілька подібних компонентів із колекції даних. Ви можете використовувати 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>
  );
}

Ready to learn this topic?

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

Read More

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

Деякі функції 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} />
    </>
  );
}

Ready to learn this topic?

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

Read More

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

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

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

Граф дерева із п'ятьма вузлами, де кожен вузол відповідає компоненту. Кореневий вузол розташований у верхній частині графа дерева та позначений як 'Root Component'. Він має дві стрілки, що тягнуться до двох вузлів, позначених як 'Component A' і 'Component C'. Кожна зі стрілок позначена як 'renders'. 'Component A' має одну стрілку з поміткою 'renders' до вузла, позначеного як 'Component B'. 'Component C' має одну стрілку з поміткою 'renders' до вузла, позначеного як 'Component D'.
Граф дерева із п'ятьма вузлами, де кожен вузол відповідає компоненту. Кореневий вузол розташований у верхній частині графа дерева та позначений як 'Root Component'. Він має дві стрілки, що тягнуться до двох вузлів, позначених як 'Component A' і 'Component C'. Кожна зі стрілок позначена як 'renders'. 'Component A' має одну стрілку з поміткою 'renders' до вузла, позначеного як 'Component B'. 'Component C' має одну стрілку з поміткою 'renders' до вузла, позначеного як 'Component D'.

Приклад дерева рендерингу React.

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

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

Граф дерева із п'ятьма вузлами. Кожен вузол відповідає модулю JavaScript. Вузол у верхній частині позначено 'RootModule.js'. Він має три стрілки, що тягнуться до вузлів: 'ModuleA.js', 'ModuleB.js' і 'ModuleC.js'. Кожна стрілка позначена як 'imports'. Вузол 'ModuleC.js' має одну стрілку 'imports', яка напрямлена до вузла із міткою 'ModuleD.js'.
Граф дерева із п'ятьма вузлами. Кожен вузол відповідає модулю JavaScript. Вузол у верхній частині позначено 'RootModule.js'. Він має три стрілки, що тягнуться до вузлів: 'ModuleA.js', 'ModuleB.js' і 'ModuleC.js'. Кожна стрілка позначена як 'imports'. Вузол 'ModuleC.js' має одну стрілку 'imports', яка напрямлена до вузла із міткою 'ModuleD.js'.

Приклад дерева залежностей модулів.

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

Ready to learn this topic?

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

Read More

Що далі?

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

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