Зачем и как учить 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 — это сообщество для разработчиков программного обеспечения, где они делятся профильными материалами.
