Що таке фреймворк і бібліотека — навіщо React, а не чистий JavaScript

Кухня з готовим меблевим гарнітуром поряд із набором окремих інструментів — метафора фреймворку та бібліотеки

Ти вивчив JavaScript, гордо пишеш перші сторінки — і тут звідусіль лунає: «вчи React», «а це на якому фреймворку?». Стоп. Навіщо якийсь React, якщо JavaScript і так усе вміє? І чим бібліотека відрізняється від фреймворку? Розберімося без туману.

Аналогія: ремонт кухні

Уяви, що ти робиш кухню.

Чистий JavaScript — це коли ти сам пиляєш дошки, крутиш шурупи, робиш кожну шафку з нуля. Повний контроль, але довго й легко помилитися.
Бібліотека — це набір готових деталей: готові дверцята, готові петлі. Ти сам вирішуєш, що і куди прикрутити. Ти головний, бібліотека лише допомагає.
Фреймворк — це готовий кухонний гарнітур із інструкцією збірки. Він диктує, де що стоятиме. Головний він, ти дієш за його правилами.

Різниця тонка, але важлива — і зводиться до одного питання: хто кого викликає?

Головна відмінність: хто кого «кличе»

Бібліотеку викликаєш ти. У своєму коді ти сам вирішуєш: «ось тут поклич цю функцію». Бібліотека — інструмент у твоїх руках.
Фреймворк викликає тебе. Ти вставляєш свій код у його структуру, а він сам вирішує, коли його запустити.

Програмісти жартома називають це «принципом Голлівуда»: «Не телефонуй нам — ми зателефонуємо тобі». Бібліотека чекає твого дзвінка. Фреймворк дзвонить сам.

Інфо

Цікаво, що React технічно — бібліотека, а не фреймворк, хоча його майже завжди називають фреймворком. А ось Angular — повноцінний фреймворк із суворими правилами. Тому не дивуйся, коли зустрінеш суперечки на цю тему: межа справді розмита.

Навіщо React, якщо є чистий JavaScript?

Питання логічне. Відповідь — у слові складність.

Поки в тебе проста сторінка, чистого JavaScript вистачає з головою. Але щойно інтерфейс стає динамічним — список, що оновлюється, форми, лічильники, дані з сервера — на чистому JS ти тонеш у ручному оновленні сторінки. Один забутий рядок — і на екрані старі дані.

React вирішує саме це:

Компоненти. Ти розбиваєш інтерфейс на маленькі шматочки-цеглинки (кнопка, картка, меню) і збираєш із них сторінку, як з LEGO.
Автооновлення. Змінилися дані — React сам перемальовує потрібне. Тобі не треба вручну смикати кожен елемент.
Екосистема. Тисячі готових рішень, велетенська спільнота, і — важливо для кар'єри — React вимагають у більшості вакансій.

React створили в Facebook у 2013 році, щоб упоратися зі складністю власного інтерфейсу. Ідея виявилась настільки вдалою, що сьогодні на React працюють Instagram, Netflix, Airbnb і мільйони інших сайтів.

Спершу основа, потім інструмент

Головна пастка новачка — стрибнути в React, не знаючи JavaScript. Не роби так. React — це надбудова над JavaScript, і без міцної основи він перетвориться на магію, яку ти не розумієш.

Правильний шлях: спочатку впевнений JavaScript, потім React. Саме так побудований наш курс — React іде аж у восьмому блоці, після повного проходження основ мови. А почати саму мову можна безкоштовно з нашого гайду JavaScript з нуля.

Порада

Не женися за модою «вивчу одразу найкрутіший фреймворк». Роботодавці цінують того, хто розуміє основи — бо фреймворки змінюються кожні кілька років, а фундамент лишається.

Отже: бібліотека — набір деталей у твоїх руках, фреймворк — готовий гарнітур зі своїми правилами. А React — потужний інструмент, який має сенс, коли під ним уже є міцний JavaScript. 🧱