Пошук уроків, статей та іншого контенту
Функціональні компоненти, синтаксис JSX та найпоширеніші синтаксичні пастки.
У сучасному React компонент — звичайна JavaScript-функція, що повертає опис UI. Ім'я функції-компонента обов'язково пишеться з великої літери — це не стилістична забаганка, а вимога JSX: він розрізняє <div> (звичайний HTML-тег) і <UserCard /> (компонент) саме за регістром першої літери.
function Greeting() {
return <h1>Привіт, світ!</h1>;
}
// Використання в іншому компоненті:
function App() {
return <Greeting />;
}JSX виглядає як HTML, але це синтаксичний цукор над викликами функцій — кожен JSX-елемент компілюється у виклик, що створює об'єкт-опис вузла (спрощено: React.createElement("h1", null, "Привіт, світ!")). Оскільки це JavaScript-вираз, а не розмітка браузера, у JSX діють правила JavaScript, а не HTML:
className замість class — class є зарезервованим словом у JavaScript.
Атрибути в camelCase — onclick стає onClick, tabindex стає tabIndex.
Самозакривні теги обов'язкові для елементів без дітей — <img /> та <br />, а не <img> чи <br>.
JavaScript-вирази вставляються у фігурних дужках — {user.name}, {2 + 2}, {items.length > 0 ? '...' : '...'}.
function UserCard({ user }) {
return (
<div className="user-card">
<img src={user.avatarUrl} alt={user.name} />
<h2>{user.name}</h2>
<p>Заявок: {user.requestCount}</p>
</div>
);
}JSX-вираз повинен мати рівно один кореневий елемент — компонент не може повернути два сусідні теги напряму. Якщо не потрібен зайвий обгортковий <div>, використовують Fragment — <> </> — який нічого не додає в реальний DOM:
// Помилка компіляції — два сусідні елементи без спільного кореня
function Broken() {
return (
<h1>Заголовок</h1>
<p>Текст</p>
);
}
// Правильно — Fragment об'єднує без зайвого DOM-вузла
function Fixed() {
return (
<>
<h1>Заголовок</h1>
<p>Текст</p>
</>
);
}Великі компоненти будуються з менших — так само, як складна функція будується з простіших. Це основний спосіб керувати складністю в React-застосунку: замість однієї величезної функції-компонента, що малює всю сторінку, — дерево невеликих, зрозумілих компонентів, кожен з яких відповідає за свою частину UI.
Практичний орієнтир для розбиття на компоненти: якщо частину JSX можна описати одним іменником («картка товару», «панель фільтрів», «шапка сторінки») і вона використовується більш ніж в одному місці або має власну самодостатню логіку — це кандидат на окремий компонент.
Ім'я компонента з малої літери — <userCard /> React сприйме як звичайний HTML-тег user-card, а не як компонент, і не викличе функцію.
class замість className — код скомпілюється (JSX терпимий до цього під час білда), але стилі не застосуються, бо React ігнорує неправильний атрибут для DOM-елементів.
Повернення кількох сусідніх елементів без спільного кореня (Fragment чи обгортковий тег) — синтаксична помилка компіляції JSX.
Компонент — звичайна функція з великої літери, що повертає JSX. JSX — синтаксичний цукор над викликами, що створюють опис UI, тому в ньому діють правила JavaScript (className, camelCase-атрибути, фігурні дужки для виразів), а не HTML. Кожен JSX-вираз має рівно один кореневий елемент — Fragment (<></>) дозволяє уникнути зайвого обгорткового DOM-вузла. Складні інтерфейси будуються композицією менших, самодостатніх компонентів.