Що таке React?
React — бібліотека JavaScript для побудови користувацьких інтерфейсів. Інтерфейс збирається з компонентів — самостійних блоків зі своєю розміткою та логікою, — а React сам оновлює на екрані лише те, що справді змінилося.
Ключова ідея — декларативність. Розробник описує, як інтерфейс має виглядати за певного стану даних, а не пише покрокові інструкції зі зміни сторінки. Змінився стан — React перерахував різницю й оновив потрібні вузли.
Компонентний підхід добре масштабується: одну картку товару пишуть один раз і перевикористовують по всьому проєкту. React — найзатребуваніша технологія у фронтенд-вакансіях, навколо неї склалася велика екосистема: Next.js, роутинг, менеджери стану, бібліотеки компонентів.
Де застосовується
На React пишуть інтерфейси, де багато стану і частих оновлень: особисті кабінети, панелі адміністратора, дашборди, інтернет-магазини, чати. Навколо нього вибудуваний стандартний набір — Next.js для серверного рендерингу і SEO, роутер для навігації, бібліотеки запитів до API і готові набори компонентів.
Це саме знання переноситься за межі вебу: React Native використовує ті самі принципи для мобільних застосунків під iOS і Android. У вакансіях React згадується частіше за будь-яку іншу фронтенд-технологію, тому його зазвичай і беруть першим фреймворком після впевненого JavaScript.
Приклад
Лічильник товарів у кошику показаний одразу в трьох місцях: у шапці, в бічній панелі й на кнопці оформлення. У React це одне значення стану — при його зміні бібліотека сама перемальовує всі три місця, і розсинхронізація стає неможливою.
function CartButton({ initial = 0 }) {
const [count, setCount] = useState(initial);
return (
<button onClick={() => setCount(count + 1)}>
У кошику: {count}
</button>
);
}Часті запитання
React — це бібліотека чи фреймворк?
Формально бібліотека: він відповідає лише за відмальовування інтерфейсу, а маршрутизацію, запити й роботу з формами додають окремими пакетами. На практиці звʼязку React з екосистемою навколо нього часто називають фреймворком, а Next.js уже повноцінний фреймворк поверх React.
Що вчити: React, Vue чи Angular?
За кількістю вакансій в Україні та світі з великим відривом лідирує React, тому для першої роботи він найпрактичніший вибір. Angular частіше трапляється в ентерпрайзі, Vue — у невеликих командах. Після першого фреймворку другий опановується за тижні.
Чи потрібно добре знати JavaScript перед React?
Так, це ключова умова. Масиви й методи роботи з ними, деструктуризація, стрілкові функції, проміси й асинхронність, модулі — усе це використовується в кожному компоненті. Без такої бази React вчиться як набір магічних правил, які ламаються при першій нестандартній задачі.
Що таке стан і чому його не можна змінювати напряму?
Стан — це дані, від яких залежить вигляд компонента. Змінюють його лише через функцію-сетер: саме вона повідомляє React, що треба перерахувати інтерфейс. Присвоєння значення напряму нічого не перемалює, і екран залишиться зі старими даними.