Пошук уроків, статей та іншого контенту
Навчитеся створювати функціональні компоненти, повертати JSX і використовувати їх у дереві React-застосунку.
Функціональний компонент — це JavaScript-функція, яка повертає JSX. JSX описує, який інтерфейс потрібно відобразити.
Найпростіший компонент має такий вигляд:
function Welcome() {
return <h1>Вітаємо в React!</h1>;
}Назва компонента має починатися з великої літери. Це допомагає React відрізнити власний компонент від звичайного HTML-елемента.
Компонент можна використати в JSX як HTML-подібний тег:
function Welcome() {
return <h1>Вітаємо в React!</h1>;
}
function App() {
return (
<main>
<Welcome />
</main>
);
}<Welcome /> — це використання компонента Welcome усередині іншого компонента.
Функціональний компонент — звичайна функція без спеціального синтаксису React:
function Header() {
return (
<header>
<h1>Мій сайт</h1>
<p>Навчаємося створювати React-компоненти</p>
</header>
);
}Усередині return компонент повертає JSX. JSX може містити:
HTML-подібні елементи;
текст;
інші React-компоненти;
JavaScript-вирази в подвійних фігурних дужках.
Наприклад:
function UserInfo() {
const userName = "Олена";
return (
<section>
<h2>Профіль користувача</h2>
<p>Ім'я: {userName}</p>
</section>
);
}У {userName} React підставить значення JavaScript-змінної.
Функціональний компонент повинен повернути JSX або null.
Якщо JSX складається з кількох сусідніх елементів, їх потрібно обгорнути в один батьківський елемент:
function Product() {
return (
<article>
<h2>Ноутбук</h2>
<p>Потужний пристрій для роботи</p>
</article>
);
}Елементи h2 і p обгорнуті в один елемент article.
Без спільного батьківського елемента такий код буде некоректним:
function Product() {
// Некоректно: компонент повертає два сусідні елементи
return (
<h2>Ноутбук</h2>
<p>Потужний пристрій для роботи</p>
);
}Для групування також можна використовувати React Fragment — порожню обгортку:
function Product() {
return (
<>
<h2>Ноутбук</h2>
<p>Потужний пристрій для роботи</p>
</>
);
}Fragment не додає зайвого HTML-елемента в DOM.
Компоненти можна вкладати один в один. Так формується дерево React-застосунку.
Наприклад, сторінка може складатися з таких частин:
Header;
MainContent;
Footer.
function Header() {
return <header>Заголовок сайту</header>;
}
function MainContent() {
return <main>Основний вміст</main>;
}
function Footer() {
return <footer>Підвал сайту</footer>;
}
function App() {
return (
<>
<Header />
<MainContent />
<Footer />
</>
);
}У цьому прикладі дерево компонентів має такий вигляд:
App
├── Header
├── MainContent
└── FooterApp є батьківським компонентом, а Header, MainContent і Footer — його дочірніми компонентами.
Кореневий компонент потрібно передати в React. Для цього використовується createRoot.
Нижче наведено повний приклад файлу main.jsx, який можна використати у React-застосунку:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
function Header() {
return (
<header>
<h1>Список завдань</h1>
<p>Невеликий React-застосунок</p>
</header>
);
}
function TaskList() {
return (
<main>
<h2>Сьогодні потрібно:</h2>
<ul>
<li>Вивчити функціональні компоненти</li>
<li>Навчитися працювати з JSX</li>
<li>Створити власний компонент</li>
</ul>
</main>
);
}
function Footer() {
return <footer>Успіхів у навчанні!</footer>;
}
function App() {
return (
<>
<Header />
<TaskList />
<Footer />
</>
);
}
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);У цьому прикладі:
Header, TaskList і Footer — функціональні компоненти.
App об'єднує їх в одну сторінку.
<App /> передається до root.render.
React знаходить HTML-елемент із id="root" і будує в ньому дерево компонентів.
HTML-елемент для монтування React-застосунку зазвичай має такий вигляд:
<div id="root"></div>Назви компонентів потрібно писати з великої літери:
function UserCard() {
return <div>Картка користувача</div>;
}
function App() {
return <UserCard />;
}Якщо написати назву з малої літери, React сприйматиме її як назву звичайного HTML-елемента:
function userCard() {
return <div>Картка користувача</div>;
}
function App() {
return <userCard />;
}Такий запис не використає функцію userCard як React-компонент. Тому використовуйте PascalCase: кожне слово в назві починається з великої літери.
Правильно:
Header;
UserCard;
ProductList.
Неправильно для React-компонентів:
header;
userCard;
product_list.
JSX схожий на HTML, але має правила JavaScript і React.
Наприклад, атрибут class у JSX записується як className:
function Card() {
return (
<article className="card">
<h2>Заголовок картки</h2>
</article>
);
}JavaScript-вирази всередині JSX записуються у фігурних дужках:
function Greeting() {
const name = "Іван";
const message = "Раді вас бачити";
return (
<section>
<h2>Привіт, {name}!</h2>
<p>{message}</p>
</section>
);
}У JSX можна вставляти значення змінних, але не довільні інструкції JavaScript. Наприклад, if не вставляють безпосередньо всередину JSX. На цьому етапі достатньо пам'ятати, що JSX повертає опис інтерфейсу, а логіка компонента пишеться у тілі функції.
function header() {
return <header>Сайт</header>;
}Використовуйте велику літеру:
function Header() {
return <header>Сайт</header>;
}Не потрібно писати:
function App() {
return <main>{Header()}</main>;
}Компоненти використовують через JSX:
function App() {
return (
<main>
<Header />
</main>
);
}Запис <Header /> дозволяє React правильно обробляти компонент у дереві застосунку.
Некоректно:
function App() {
return (
<h1>Заголовок</h1>
<p>Опис</p>
);
}Коректно:
function App() {
return (
<main>
<h1>Заголовок</h1>
<p>Опис</p>
</main>
);
}Або за допомогою Fragment:
function App() {
return (
<>
<h1>Заголовок</h1>
<p>Опис</p>
</>
);
}returnФігурні дужки після оголошення функції не повертають JSX автоматично:
function Greeting() {
<h1>Привіт!</h1>;
}Потрібно додати return:
function Greeting() {
return <h1>Привіт!</h1>;
}Створіть компонент Profile, який повертає:
заголовок із вашим іменем;
абзац із коротким описом;
список із двох навичок.
Потім використайте його всередині App:
function Profile() {
return (
<section>
<h1>Марія Коваль</h1>
<p>Початківець у React-розробці</p>
<ul>
<li>JavaScript</li>
<li>React</li>
</ul>
</section>
);
}
function App() {
return (
<main>
<Profile />
</main>
);
}Зверніть увагу на структуру:
Profile відповідає лише за розмітку профілю;
App відповідає за використання Profile у дереві застосунку;
назви обох компонентів починаються з великої літери;
кожен компонент повертає один кореневий JSX-елемент.
Функціональний компонент — це JavaScript-функція, яка повертає JSX.
Назви React-компонентів пишуться з великої літери.
Компонент використовується в JSX як <ComponentName />.
JSX може містити HTML-подібні елементи, інші компоненти та JavaScript-вирази.
Компонент має повертати один кореневий елемент або Fragment.
Вкладені компоненти утворюють дерево React-застосунку.
Кореневий компонент передається React через createRoot і root.render.