#4 – Компоненти та їх можливості

Компоненти є важливою частиною бібліотеки React. За допомогою компонентів ви можете зручно розділити проєкт на декілька складових.

Кожен компонент має власний HTML-код, стилі та JavaScript-функціонал.

У проєкті ви можете створювати скільки завгодно подібних компонентів для опису будь-якого блоку вашого застосунку.

У сучасному React компоненти найчастіше створюються у вигляді функцій. Кожна така функція повертає JSX-розмітку, яка потім відображається на сторінці.

function Header() {
	return (
		<header>
			<h1>Мій сайт</h1>
		</header>
	);
}

export default Header;

Після створення компонент можна підключити до іншого компонента або до головного файлу застосунку.

import Header from "./Header";

function App() {
	return (
		<div>
			<Header />
		</div>
	);
}

export default App;

Такий підхід дозволяє повторно використовувати код, спрощує підтримку проєкту та робить структуру застосунку більш зрозумілою.