Основи компонентів React 101: створення повторно використовуваних та легко підтримуваних елементів інтерфейсу
Дізнайтеся, чому розділення інтерфейсів на невеликі компоненти React покращує можливості повторного використання, читабельність та співпрацю в команді, а потім створіть свій перший функціональний компонент.
Знайома ситуація для кожного розробника фронтенду
"Головну сторінку потрібно готовий до п’ятниці."
- Верхній меню навігації
- Великий банер-герой
- Зона пошуку
- Показ основних продуктів
- Розділ з відгуками клієнтів
- Таблиця цін
- Розділ з поширеними запитаннями
- Форма для підписки на розсилку
- Футер сайту
Минув місяць, і продукт розвинувся.
Команда з маркетингу хоче новий дизайн банера.
Дизайнери переробляють панель навігації.
Команда з розробки продукту хоче додатковий розділ з тарифами.
Тепер відгуки клієнтів мають завантажуватися динамічно.
Не встигнете й озирнутися, як цей один файл вже має понад 2 000 рядків.
Знаходження однієї кнопки перетворюється на пошук у лабіринті коду.
Ще гірше те, що незначні зміни в одній частині сторінки можуть пошкодити щось зовсім інше, не пов’язане з цим.
Чи звучить це знайомо?
Саме ця проблема спонукала розробників шукати інший підхід до створення інтерфейсів.
Замість створення однієї величезної сторінки, що, якби ви склали її з багатьох малих, повторно використовуваних елементів?
У React ці елементи називаються Компонентами.
Чому один величезний файл руйнується
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
- Розмір файлу постійно збільшується.
- Робота в команді стає складнішою.
- Нічого не можна справді повторно використати.
- Баги починають з’являтися частіше.
- Підтримка коду стає виснажливою.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
Визначення React-компонента
компонент — це просто частина інтерфейсу користувача, яку можна повторно використовувати.
Замість того, щоб поміщати всю сторінку в один файл, розділіть її на менші, спеціалізовані частини.
Кожна частина виконує лише одну функцію.
Наприклад:
Панель навігації стає окремим компонентом.
Футер — ще одним компонентом.
Карточка товару — ще одним компонентом.
Розділ профілю користувача також є компонентом.
Потім ви об’єднуєте ці компоненти, щоб створити повну програму.
Результатом є кодова база, яку набагато легше читати, тестувати та підтримувати з часом.
Зміна підходу до розуміння UI
Це одна з найважливіших змін у мисленні, які ви переживатимете під час опанування React.
Припиніть думати у термінах цілих сторінок.
Почніть думати у термінах окремих частин.
Замість того, щоб запитувати:
"Як мені створити цю головну сторінку?"
Спробуйте запитати:
"Які менші елементи об’єднуються, щоб створити цю головну сторінку?"
Як тільки це усвідомлення з’являється, React починає здаватися набагато інтуїтивнішим.
Порівняння з повсякденним життям
Уявіть собі складання міста з LEGO.
Ви не будете кожного разу, коли потрібна цеглинка, формувати абсолютно нову.
Натомість ви берете ті цеглинки, які вже у вас є.
Деякі цеглинки утворюють стіни.
Інші стають вікнами.
Ще інші — дахами.
Змішуючи та поєднуючи ці однакові повторно використовувані цеглинки, ви можете побудувати безліч різних будівель.
Компоненти React працюють саме так само.
Один компонент Button може з’являтися:
- На екрані входу
- У модальному вікні
- На сторінці оплати
- У навігаційній панелі
Ви створюєте його лише один раз.
Потім ви розміщуєте його там, де це необхідно.
Ось справжня цінність компонентів.
Логіка підходу React до моделі компонентів
React використовує компоненти, тому що вони допомагають вирішувати реальні, практичні проблеми.
1. Можливість повторного використання
Створіть його один раз.
Використовуйте його без кінця.
Замість того, щоб двадцять разів перестворювати один і той самий код кнопки, ви визначаєте єдиний компонент Button та вставляєте його там, де це потрібно в усьому додатку.
2. Читабельність
Розгляньмо два сценарії поруч один з одним.
Один файл, що містить 2 000 рядків.
Проти...
Двадцять окремих файлів, кожен з яких має одну, очевидну мету.
До якого з них ви б хотіли повернутися через шість місяців?
Компоненти меншого розміру простіше для розуміння.
3. Підтримуваність
Якби ви не розділили своє інтерфейсне програмування на компоненти, ця зміна означала б пошук та редагування десятків файлів.
Але завдяки одному використовуваному компоненту Button зміни можна внести в одному місці.
Кожен екран, який використовує цю кнопку, миттєво відображає оновлення.
4. Співпраця команди
Уявіть п’ятьох розробників, які працюють над одним і тим самим кодовим базисом.
Одна людина опікується Navbar.
Інша працює над розділом Hero.
Третій створює картки продуктів.
Четвертий працює над футером.
Завданням п’ятого розробника є об’єднати всі ці елементи воєдино.
Оскільки кожна функція знаходиться у власному компоненті, ніхто не мусить заважати роботі інших чи чекати, поки файл стане вільним.
Саме така паралельна робота є причиною того, чому компоненти мають таке велике значення у командах з розробки у реальному світі.
Функціональні компоненти
Сучасні кодові бази React майже повністю ґрунтуються на функціональних компонентах.
По суті, функціональний компонент — це просто функція JavaScript, яка повертає JSX.
Ось найпростіша версія, яку можна написати:
function Welcome() {
return <h1>Hello, React!</h1>;
}
На перший погляд це схоже на звичайну функцію JavaScript — тому що це і є функція.
Те, що робить її унікальною, — це те, що замість повернення числа чи рядка вона повертає JSX, а React використовує цей JSX для визначення того, що потрібно намалювати на екрані.
Розглянемо її по частинах:
function Welcome()
Тут ми оголошуємо функцію під назвою Welcome.
Зверніть увагу на велику літеру „W“ на початку назви.
React конкретно стежить за тією великою літерою на початку, щоб зрозуміти, чи слід розглядати функцію як Компонент.
Далі йде цей рядок:
return <h1>Hello, React!</h1>;
Завданням функції є повернення JSX.
Тож кожного разу, коли React відображає Welcome, з’являється саме цей заголовок.
Ось і все.
Ви щойно створили свій перший Компонент.
Створення вашого першого Компонента
Коли проект починає розвиватися, розробники зазвичай надають кожному Компоненту власний окремий файл.
Типова структура папок може виглядати так:
src
├── App.jsx
└── components
└── Welcome.jsx
Ось що знаходиться всередині Welcome.jsx:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Розділення Компонентів на окремі файли допомагає підтримувати кодбазу охайною та значно полегшує її навігацію під час розширення.
Експорт Компонентів
Ви, можливо, цікавитеся метою цього рядка:
export default Welcome;
Припустимо, ви щойно написали надійний, повторно використовуваний компонент.
Доки він знаходиться лише у своєму файлі, ніщо інше в вашому додатку не може до нього дістатися.
Експорт — це те, що дозволяє використовувати його в інших місцях.
Це трохи схоже на публікацію рукопису.
Як тільки він опиняється у світі, будь-хто може його взяти та прочитати.
Тут діє та сама логіка — як тільки ви експортуєте компонент, будь-який інший файл у вашому проєкті може його імпортувати та використовувати.
Існують інші способи експорту компонентів, про які ми розповімо у наступній частині цієї серії, але export default є найкращим вибором на початковому етапі.
Імпорт компонентів
Давайте внесемо Welcome у App.jsx та почнемо його використовувати.
import Welcome from "./components/Welcome";
Ця рядок по суті дає вказівки React:
«Візьміть компонент
Welcomeз цього файлу, щоб я міг використати його прямо тут».
Як тільки його імпортують, його відображення не вимагає майже жодних зусиль:
function App() {
return (
<>
<Welcome />
</>
);
}
Подивіться уважніше на цю частину синтаксису:
<Welcome />
Хоча Welcome спочатку був звичайною функцією JavaScript, ми можемо використовувати його так само, як нативний HTML-тег.
Це одна з найелегантніших особливостей роботи з React — ваші власні функції перетворюються на повторно використовувані елементи інтерфейсу.
Як React бачить компонент
Коли React натрапляє на цей рядок:
<Welcome />
він не інтерпретує його як маркування.
Натомість те, що відбувається насправді, виглядає приблизно так:
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
Простіше кажучи, кожен компонент — це функційний виклик, який повертає частину інтерфейсу.
Як тільки ця ідея стає зрозумілою, компоненти більше не здаються чимось на кшталт особливої магії.
Правила найменування
Існує кілька правил найменування, які варто запам’ятати.
Хороші назви:
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Назви, яких варто уникати:
- navbar
- footer
- component
- abc
У чому тут логіка?
React використовує регламенти написання слів як сигнал, що відрізняє ваші власні компоненти від вбудованих тегів HTML.
Розгляньмо цей приклад:
<Navbar />
React сприймає це як посилання на ваш власний кастомний компонент.
Порівняйте це з:
<div>
що React інтерпретує як стандартний, вбудований елемент HTML.
Вибір зрозумілих, описових імен також приносить користь, коли іншим розробникам знадобиться читати та розуміти ваш код у майбутньому.
Ключові висновки
Ось короткий огляд того, що ми вже розглянули.
- Компонент — це самодостатня, повторно використовувана частина інтерфейсу.
- Створення додатку на React насправді означає лише об’єднання компонентів.
- Функціональні компоненти — це звичайні функції JavaScript, які повертають JSX.
- Розділення додатку на компоненти покращує читабельність, можливості повторного використання та довгострокову підтримку.
- Добре спроєктований компонент зосереджується на виконанні однієї функції.
- Зазвичай кожен компонент зберігається у власному файлі та імпортується там, де він потрібен.
- Великі літери допомагають React відрізняти ваші власні компоненти від звичайних елементів HTML.
Пов’язана література
- Створення ментальної моделі для React: узгодження, стан та хуки — Дізнайтеся про логіку основних концепцій React — узгодження, компоненти, пропси, стан та хуки — щоб розвинути інтуїцію замість запам’ятовування API.
- Керування станами інтерфейсу у реальному світі за допомогою умовного відображення в React — Дізнайтеся, як створювати інтерфейси для автентифікації, ролей, дозволів, стану завантаження, помилок та порожнього стану в React за допомогою практичних шаблонів умовного відображення.
catch () викликає SyntaxError у JavaScript — Дізнайтеся, чому порожня список параметрів catch повністю руйнує парсинг коду в JavaScript, та побачте два правильні з точки зору граматики способи написання блоку catch без параметрів.