Навіщо і як вивчати React.js

Бібліотека для побудови інтерфейсів користувача (UI) React.js популярна серед frontend-розробників. Це підтверджують дані StackOverFlow Developer Survey 2021: 40% девелоперів вибирають React.js

За даними djinni — сервісу пошуку роботи в IT, для React-розробників відкрито понад 1 тис. вакансій із зарплатами $2500 — 4500 (станом на жовтень 2021 року).

React постійно розвивається: завдяки відкритому коду бібліотеку покращують самі користувачі, а спільнота може допомогти вирішити складне завдання.

Розповідаємо, у чому технічні особливості бібліотеки, які функціональні обмеження та які знання повинен мати розробник, щоби розібратися в React.

На ці запитання відповідають Станіслав Сапранков, Software Developer Engineer в Amazon Web Services, Юрій Ковальчук, Web developer у Symphony Solutions та Дмитро Селін, Software Engineer у Facebook. Вони допоможуть розібратися, чи варто опановувати бібліотеку.

Особливості React

React універсальний. ЕЙого використовують для створення веб- та мобільних додатків. Для останніх є кросплатформовий фреймворк React Native.

Серед особливостей React — односпрямованість потоку даних, компонентний підхід, віртуальний DOM, модульність та декларативність.

Станіслав: «‎Компонент — ізольована частина інтерфейсу (меню, бічна панель, логотип, футер). Кожен з елементів інтерфейсу складається з різних компонентів. Зміна стану компонента впливає лише на його дочірні елементи, не чіпаючи інші частини інтерфейсу.

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

Віртуальний DOM дозволяє оновлювати лише необхідні елементи сторінки.

DOM (document object model) — це об’єктна модель документа в браузері для відтворення розмітки. Це деревоподібне представлення сторінки, починаючи з тегу <«html»>, яке зберігається в пам’яті браузера й показує те, що користувач бачить на сторінці. Якщо реальний DOM змінюється, браузер перемальовує й перекомпоновує частини сторінки або її повністю. Це ресурсовитратна операція.

Для економії часу та ресурсів у React використовується віртуальна модель DOM. Коли на сторінці потрібно внести зміни, React оновлює віртуальну модель, порівнює та погоджує зміни, а потім оновлює реальний DOM. Це підвищує швидкість роботи програми внаслідок швидкої реакції на активність користувачів: оновлення кошика, внесення даних до анкети або будь-яка інша дія.

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

React дає змогу створювати архітектуру будь-якої складності. Але побудувати повноцінний додаток тільки на React неможливо, потрібно підключати та вивчати різні бібліотеки».

Дмитро: «‎З трьох популярних інструментів — React, Angular і Vue — React найближче до ідей функціонального програмування. Одна з його особливостей — це декларативність, яка передбачає простіший у розумінні, підтримці та тестуванні код.

Говорячи про недоліки, розпочинати новий проєкт на React довше, ніж на тому ж Vue. CreateReactApp, де-факто стандарт для генерації проєкту та управління ним, має безліч обмежень у виборі та налаштуванні різноманітних плагінів. Будь-який великий проєкт рано чи пізно вимагатиме різних кастомізацій, і доведеться або робити eject і кастомізувати вручну, або впиратися в обмеження CRA.

Також React дає більшу свободу у виборі способу реалізації того, що потрібно. Немає «правильного» або більш-менш “загальноприйнятого” способу, і багато новачків губляться в силі-силенній варіантів, частина з яких уже застаріли, а частина застаріють завтра».

Юрій: «React гнучкий та легкий для вивчення. На відміну від Angular, у ньому немає чітких патернів — як вигадав, так і буде. У цьому сенсі компаніям вигідно його використовувати: можна відносно швидко навчити джуніорів. З іншого боку, саме ця гнучкість може заплутати початківців. Саме тому на проєкті важливо створити чіткі домовленості та правила роботи з React.

Великий плюс бібліотеки — можливість зв’язатися з її розробниками — обговорити баг чи запропонувати покращення. Мені вдавалося поговорити навіть із Деном Абрамовим, одним із творців React.

Оскільки React — бібліотека для візуалізації, у якій робота з даними не була продумана, для управління станом програми використовували зовнішні бібліотеки. Але згодом у React удосконалили context — інструмент для збереження глобальних даних та передачі до компонентів. Тому, якщо говорити про створення простої програми, можна обійтися лише React без інших інструментів. Ця бібліотека також підійде стартапам або для розробки MVP».

База для вивчення React

Станіслав: «‎Щоб опанувати React, треба знати ази JavaScript: що таке функція, змінна, модулі, як читається програма, а ще краще — розуміти, як функціонують обробники подій, асинхронність, тротлінг. Будуть корисні знання тегів, CSS та сучасних стандартів JS: webpack, класи, стрілочні функції, синтаксис, черга подій, Babel та TypeScript. Формула проста: що краще знаєш JavaScript, то простіше розуміти React.

Рекомендую спершу вивчати лише сам React та необхідні інструменти розробки, не йдучи до вивчення інших бібліотек».

Дмитро: «‎Раджу розібратися у функціональному програмуванні: навіть мінімальне розуміння допоможе в опануванні React. 90 % бібліотеки можна вивчити за кілька місяців. Ще стільки ж потрібно, щоби напрацювати інтуїцію та досвід‎».

Додаткові інструменти для роботи з React

Юрій: «‎Існує багато бібліотек для React: розробник може написати свою та поділитися з колегами, додати її до npm (node ​​package manager — каталог бібліотек та інструмент для управління залежностями, через який можна додати залежності до проєкту). У світі frontend дуже багато залежностей, треба бути обережним із їхнім застосуванням. Був випадок, коли хтось видалив свою бібліотеку, яка використовувалася на багатьох проєктах, і чимало вебзастосунків “упали”‎».

Станіслав: «‎У моїй практиці найчастіше використовують:

• Webpack — збирач модулів JavaScript з відкритим вихідним кодом.
• Babel — бібліотека, яка конвертує код, написаний за сучасними стандартами ECMAScript, у вигляд, зрозумілий для будь-якого браузера.
• TypeScript —це надбудова JavaScript для розв’язання проблеми динамічної типізації. Також TypeScript дає змогу використовувати в проєкті нові інструменти, які ще не затверджені в стандарті».

Де ще почитати про React

Слідкувати за оновленнями, запитати поради чи почитати про рішення можна тут:

• офіційний блог React;
• блог Дена Абрамова, одного з ключових розробників React;
• спільнота React-розробників на Spectrum та Reactiflux;
• корисні статті на DEV — це спільнота для розробників програмного забезпечення, де вони діляться профільними матеріалами.