Пошук уроків, статей та іншого контенту
Зрозумієте, що таке React, які проблеми він вирішує та коли його доцільно використовувати.
React — це JavaScript-бібліотека для створення користувацьких інтерфейсів.
За допомогою React можна описати, як має виглядати сторінка або її частина, а бібліотека подбає про оновлення інтерфейсу, коли змінюються дані.
React часто використовують для:
вебзастосунків;
адміністративних панелей;
інтернет-магазинів;
соціальних мереж;
інтерактивних форм;
сервісів із великою кількістю динамічних елементів.
React розробила компанія Facebook, яка зараз називається Meta. Бібліотека використовується в багатьох вебпродуктах і має велику екосистему.
Без React інтерфейс можна створювати за допомогою HTML, CSS і JavaScript. Наприклад, JavaScript може вручну змінювати текст елемента:
const counterElement = document.querySelector('#counter');
let count = 0;
document.querySelector('#increment').addEventListener('click', () => {
count += 1;
counterElement.textContent = count;
});Для невеликого прикладу цього достатньо. Але в реальному застосунку можуть одночасно змінюватися:
список товарів;
кількість товарів у кошику;
стан кнопок;
повідомлення про помилки;
дані користувача;
вміст різних частин сторінки.
Якщо оновлювати кожну частину вручну, код швидко стає складним. Потрібно постійно стежити за тим:
які дані змінилися;
які HTML-елементи потрібно знайти;
що саме треба оновити;
чи не залишилися застарілі дані в іншій частині сторінки.
React пропонує інший підхід: описати залежність інтерфейсу від даних, а не вручну керувати кожною зміною DOM.
У React ми описуємо, що потрібно показати, залежно від поточного стану даних.
Наприклад:
function Greeting({ name }) {
return <h1>Привіт, {name}!</h1>;
}Цей компонент означає:
якщо властивість
nameмає певне значення, покажи заголовок із цим значенням.
React сам оновить потрібну частину інтерфейсу, коли дані зміняться.
Це називається декларативним підходом. Ми описуємо результат, а не покрокову інструкцію для його отримання.
Порівняння:
Імперативний підхід: знайти елемент, змінити його текст, додати клас, приховати інший елемент.
Декларативний підхід: описати, який інтерфейс відповідає поточним даним.
Такий підхід особливо корисний у складних інтерфейсах, де багато елементів залежать один від одного.
Основна одиниця React — компонент.
Компонент — це функція, яка повертає частину інтерфейсу. Компоненти можна поєднувати, повторно використовувати та передавати їм дані.
function Button({ text }) {
return <button>{text}</button>;
}
function App() {
return (
<main>
<h1>Моя сторінка</h1>
<Button text="Зберегти" />
<Button text="Скасувати" />
</main>
);
}У цьому прикладі:
Button — окремий компонент кнопки;
text — дані, передані компоненту;
App — компонент усього застосунку;
один компонент Button використано двічі з різними даними.
Компоненти допомагають розділити великий інтерфейс на менші зрозумілі частини:
Header;
Navigation;
ProductCard;
ShoppingCart;
UserProfile;
Footer.
Кожен компонент може відповідати за свою частину інтерфейсу.
У прикладах React використовується JSX — синтаксис, схожий на HTML, який можна писати всередині JavaScript-коду.
const title = 'Список завдань';
function App() {
return (
<section>
<h1>{title}</h1>
<p>У вас немає нових завдань.</p>
</section>
);
}JSX дає змогу зручно описувати структуру інтерфейсу. JavaScript-значення вставляються у фігурні дужки:
function User({ name, age }) {
return (
<p>
Користувач: {name}, вік: {age}
</p>
);
}JSX не є HTML-файлом у звичайному розумінні. Під час збирання проєкту він перетворюється на JavaScript-код, який створює елементи React.
Стан — це дані, які можуть змінюватися під час роботи застосунку.
Прикладами стану є:
поточне значення лічильника;
текст у полі введення;
відкритий або закритий список;
вибраний товар;
стан завантаження.
Для роботи зі станом у функціональних компонентах використовується хук useState.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Значення: {count}</p>
<button onClick={() => setCount(count + 1)}>
Збільшити
</button>
</div>
);
}Тут:
count — поточне значення;
setCount — функція для зміни значення;
useState(0) — початкове значення стану;
після виклику setCount React повторно відображає компонент із новими даними.
Не потрібно вручну шукати абзац і змінювати його текст. Достатньо оновити стан:
setCount(count + 1);React сам відобразить нове значення.
Нижче наведено простий React-застосунок, який можна зберегти у файл index.html і відкрити в браузері. Для роботи потрібне підключення до інтернету, оскільки React завантажується з CDN.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Список завдань</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
function TodoApp() {
const [tasks, setTasks] = useState([
{ id: 1, title: 'Вивчити React', completed: false },
{ id: 2, title: 'Створити компонент', completed: true }
]);
function toggleTask(taskId) {
setTasks(
tasks.map((task) => {
if (task.id !== taskId) {
return task;
}
return {
...task,
completed: !task.completed
};
})
);
}
return (
<main>
<h1>Мої завдання</h1>
<ul>
{tasks.map((task) => (
<li key={task.id}>
<label>
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(task.id)}
/>
{' '}
<span
style={{
textDecoration: task.completed
? 'line-through'
: 'none'
}}
>
{task.title}
</span>
</label>
</li>
))}
</ul>
</main>
);
}
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<TodoApp />);
</script>
</body>
</html>У цьому прикладі:
TodoApp — головний компонент;
tasks — стан зі списком завдань;
setTasks — функція зміни цього стану;
map створює елемент списку для кожного завдання;
key допомагає React розрізняти елементи списку;
після зміни прапорця стан оновлюється, а інтерфейс відображає нове значення.
React добре підходить, якщо застосунок:
має багато інтерактивних елементів;
часто змінює дані без повного перезавантаження сторінки;
складається з компонентів, які можна повторно використовувати;
розвивається командою розробників;
має складні форми, фільтри, списки або панелі керування;
потребує однакового підходу до побудови інтерфейсу.
Наприклад, React може бути корисним для:
кабінету користувача;
системи керування замовленнями;
дошки завдань;
каталогу з фільтрами;
чату;
редактора документів.
React не обов’язково використовувати для кожної вебсторінки.
Він може бути зайвим, якщо потрібно створити:
просту статичну сторінку;
невеликий документ із кількома інтерактивними елементами;
сторінку, де достатньо HTML і CSS;
маленький скрипт для однієї простої дії.
Для таких завдань звичайного JavaScript може бути достатньо. Додавання React створює додаткову структуру проєкту та залежності, які не завжди виправдані.
Вибір залежить від складності інтерфейсу, вимог проєкту та досвіду команди.
React відповідає передусім за відображення інтерфейсу. Він не є базою даних і не замінює сервер.
Залежно від завдання окремо можуть знадобитися:
сервер для роботи з даними;
API для обміну інформацією;
маршрутизація між сторінками;
засоби керування глобальним станом;
інструменти для тестування та збирання проєкту.
React часто використовують разом з іншими інструментами, але його основне призначення — створення компонентного користувацького інтерфейсу.
React — не окрема мова програмування. Це бібліотека JavaScript.
Для роботи з React потрібно знати базові можливості JavaScript:
змінні;
функції;
масиви та методи map, filter;
об’єкти;
події;
імпорт і експорт модулів.
Не слід змінювати стан безпосередньо:
// Неправильно
tasks[0].completed = true;Потрібно створити нове значення та передати його функції оновлення:
// Правильно
setTasks(
tasks.map((task) =>
task.id === 1
? { ...task, completed: true }
: task
)
);Один великий компонент важко читати, тестувати та змінювати. Інтерфейс краще розділяти на компоненти, кожен із яких має зрозумілу відповідальність.
Стан React існує під час роботи застосунку. Якщо потрібно зберігати дані після перезавантаження сторінки, потрібні додаткові механізми, наприклад серверне сховище або браузерне сховище.
React — це JavaScript-бібліотека для створення користувацьких інтерфейсів.
Він спрощує роботу зі складними динамічними сторінками.
React використовує декларативний підхід: розробник описує інтерфейс залежно від даних.
Інтерфейс складається з повторно використовуваних компонентів.
JSX дає змогу описувати структуру інтерфейсу всередині JavaScript.
Стан зберігає дані, які можуть змінюватися під час роботи застосунку.
React доцільний для інтерактивних застосунків, але може бути зайвим для простої статичної сторінки.
React відповідає за інтерфейс і зазвичай використовується разом з іншими інструментами.