Пошук уроків, статей та іншого контенту
Навчитеся писати JSX, створювати елементи та використовувати атрибути й фрагменти.
JSX — це синтаксис, який дає змогу описувати структуру інтерфейсу безпосередньо в JavaScript-коді React.
JSX нагадує HTML, але має правила JavaScript і React:
const element = <h1>Привіт, React!</h1>;Змінна element містить опис елемента, який React може відобразити на сторінці.
JSX не є окремою мовою розмітки. Під час збирання проєкту JSX перетворюється на виклики React, тому браузер отримує звичайний JavaScript.
JSX-елемент складається з відкривального та закривального тегів:
const title = <h1>Список завдань</h1>;Текст можна записувати безпосередньо між тегами:
const message = <p>У вас немає нових повідомлень.</p>;Як і в HTML, JSX підтримує вкладені елементи:
const card = (
<article>
<h2>Курс React</h2>
<p>Вивчайте React поступово.</p>
</article>
);Дужки навколо багаторядкового JSX не є обов’язковими в усіх випадках, але допомагають зробити код зрозумілішим.
JSX можна зберігати у змінних і повертати з функцій:
function Welcome() {
return <h1>Ласкаво просимо!</h1>;
}Функція повертає JSX-елемент. Пізніше React відобразить результат цієї функції в інтерфейсі.
JSX також можна передавати змінній:
const userName = "Олена";
const greeting = <p>Привіт, {userName}!</p>;Щоб вставити JavaScript-значення або вираз у JSX, використовуйте фігурні дужки {}:
const userName = "Олена";
const tasksCount = 3;
const content = (
<section>
<h2>Привіт, {userName}!</h2>
<p>У вас {tasksCount} завдання.</p>
</section>
);У фігурних дужках можна використовувати:
змінні;
арифметичні операції;
виклики методів;
умовні вирази;
властивості об’єктів.
const firstName = "Іван";
const lastName = "Коваль";
const year = new Date().getFullYear();
const profile = (
<p>
{firstName} {lastName}, {year} рік
</p>
);У JSX не можна записувати звичайні інструкції JavaScript, наприклад if або for, безпосередньо всередині фігурних дужок. Там мають бути саме вирази, які повертають значення.
Звичайний текст у JSX записують між тегами:
const text = <p>Це звичайний текст.</p>;Однорядковий JavaScript-коментар можна записати перед JSX:
// Заголовок сторінки
const title = <h1>Головна сторінка</h1>;Якщо коментар потрібно розмістити всередині JSX, використовуйте синтаксис {/* ... */}:
const page = (
<main>
{/* Основний заголовок */}
<h1>Новини</h1>
</main>
);Компонент або JSX-вираз має повертати один кореневий елемент.
Цей код неправильний:
// Помилка: два сусідні кореневі елементи
return (
<h1>Заголовок</h1>
<p>Опис</p>
);Оберніть елементи в спільний контейнер:
return (
<div>
<h1>Заголовок</h1>
<p>Опис</p>
</div>
);Додатковий div не завжди потрібен. Для цього існують фрагменти.
Фрагмент дає змогу об’єднати кілька елементів без створення додаткового HTML-елемента.
Скорочений синтаксис фрагмента:
return (
<>
<h1>Заголовок</h1>
<p>Опис сторінки</p>
</>
);React відобразить h1 і p, але не додасть навколо них окремий div.
Також можна використати повний запис із Fragment:
import { Fragment } from "react";
function Page() {
return (
<Fragment>
<h1>Заголовок</h1>
<p>Опис сторінки</p>
</Fragment>
);
}У більшості простих випадків достатньо скороченого синтаксису <>...</>.
Атрибути JSX використовують для налаштування елементів. Вони схожі на HTML-атрибути:
const image = (
<img
src="https://example.com/avatar.png"
alt="Аватар користувача"
/>
);Для значення-рядка можна використовувати подвійні лапки:
<button type="button">Зберегти</button>Якщо значення потрібно отримати з JavaScript, використовуйте фігурні дужки:
const buttonText = "Надіслати";
const button = (
<button type="button">
{buttonText}
</button>
);Не потрібно поєднувати лапки та фігурні дужки для одного й того самого значення:
// Правильно
<p>{userName}</p>
// Правильно для сталого тексту
<p>Олена</p>
// Неправильно
<p>{"userName"}</p>У третьому прикладі на сторінці буде виведено текст userName, а не значення змінної.
JSX використовує JavaScript-імена властивостей. Деякі атрибути відрізняються від звичайного HTML.
className замість classУ JSX для CSS-класу використовують className:
const heading = <h1 className="page-title">Профіль</h1>;Атрибут class у JSX використовувати не потрібно.
htmlFor замість forДля зв’язування підпису з полем форми використовують htmlFor:
const field = (
<>
<label htmlFor="email">Електронна пошта</label>
<input id="email" type="email" />
</>
);Багато атрибутів подій і властивостей записуються в camelCase:
<button onClick={handleClick}>Натиснути</button>Назва onClick має велику літеру C.
Елементи без дочірнього вмісту потрібно закривати через />:
<img src="avatar.png" alt="Аватар" />
<input type="text" />
<br />Такий запис неправильний:
// Неправильно в JSX
<img src="avatar.png" alt="Аватар">Для елементів із текстом або вкладеним вмістом використовують пару тегів:
<button type="button">Відкрити</button>У JSX можна показувати різний вміст залежно від значення. Для цього зручно використовувати тернарний оператор:
const isLoggedIn = true;
const message = (
<p>
{isLoggedIn ? "Ви увійшли в систему." : "Будь ласка, увійдіть."}
</p>
);Оператор && дає змогу показати елемент лише тоді, коли умова істинна:
const hasNotifications = true;
const notifications = (
<section>
<h2>Повідомлення</h2>
{hasNotifications && <p>У вас є нові повідомлення.</p>}
</section>
);Нижче наведено простий компонент із заголовком, атрибутами, JavaScript-значеннями та фрагментом:
import { createRoot } from "react-dom/client";
function App() {
const userName = "Олена";
const tasksCount = 3;
const isLoggedIn = true;
return (
<>
<header className="page-header">
<h1>Список завдань</h1>
<p>Привіт, {userName}!</p>
</header>
<main>
{isLoggedIn ? (
<p>У вас {tasksCount} активні завдання.</p>
) : (
<p>Увійдіть, щоб переглянути завдання.</p>
)}
<button type="button">Додати завдання</button>
</main>
</>
);
}
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);У цьому прикладі:
App повертає JSX;
фрагмент <>...</> об’єднує кілька елементів;
className задає CSS-клас;
значення змінних вставляються через {};
тернарний оператор вибирає повідомлення;
button має атрибут type.
class замість className// Неправильно
<div class="container">Вміст</div>
// Правильно
<div className="container">Вміст</div>// Неправильно
<p>Текст
// Правильно
<p>Текст</p>// Неправильно
<input type="text">
// Правильно
<input type="text" />// Неправильно
return (
<h1>Заголовок</h1>
<p>Опис</p>
);Використайте контейнер або фрагмент:
return (
<>
<h1>Заголовок</h1>
<p>Опис</p>
</>
);const name = "Олена";
// Виведе текст "name"
<p>"name"</p>
// Виведе значення змінної
<p>{name}</p>if безпосередньо в JSX// Неправильно
return (
<div>
{if (isLoggedIn) {
<p>Вітаємо!</p>;
}}
</div>
);Замість цього використовуйте тернарний оператор або &&:
return (
<div>
{isLoggedIn && <p>Вітаємо!</p>}
</div>
);Створіть JSX для картки користувача, яка містить:
заголовок із ім’ям;
зображення з src і alt;
опис;
кнопку;
фрагмент або один кореневий елемент.
Приклад розв’язання:
function UserCard() {
const user = {
name: "Марія",
role: "Frontend-розробниця",
avatar: "https://example.com/maria.png",
};
return (
<article className="user-card">
<img src={user.avatar} alt={`Аватар ${user.name}`} />
<h2>{user.name}</h2>
<p>{user.role}</p>
<button type="button">Переглянути профіль</button>
</article>
);
}JSX дає змогу описувати інтерфейс у JavaScript-коді React.
JSX-елементи нагадують HTML, але мають правила JavaScript.
JavaScript-значення вставляють у JSX через фігурні дужки {}.
JSX повинен мати один кореневий елемент.
Фрагменти <>...</> об’єднують елементи без додаткового елемента в DOM.
Для CSS-класів використовують className, а для for — htmlFor.
Самозакривні елементи записують із />.
У JSX важливо правильно закривати теги та використовувати правильний синтаксис атрибутів.