Базово о React: что это такое и как помогает разработчику

• Зачем нужен React: помогает создавать интерфейсы
• Как работает React: описываем, что хотим получить
• Популярность React: 15 млн установок в день
• Чем же хорош React: универсальность, гибкость и отличный DevX
• Изучение React стоит начинать с HTML и JavaScript

• библиотека — это гараж с машинами, самокатами, велосипедами — можно взять любой транспорт и поехать, куда хочется;
• фреймворк — это автобус, в который можно посадить пассажиров, чтобы они доехали из точки А в точку Б.

Фреймворк ограничивает разработчика в выборе инструментов, но гарантирует, что решит типовые задачи однозначным способом по стандартам качества. Библиотека же не определяет, какие технологии использовать, что создавать и как, — это упрощает обучение и даёт больше гибкости, но возлагает на разработчика ответственность за код и выбранные инструменты.

Пользовательские интерфейсы — то, что видит пользователь на сайте, в мобильном приложении, VR-очках, чат-боте, на экране умных часов и так далее.

С определением разобрались, теперь о том, для чего нужен React.js и как его использовать.

• Если пассажир говорит таксисту: поверни руль вправо, а теперь — влево, нажми на педаль газа, на тормоз, то это императивный подход. Пассажир описывает каждое действие таксиста, чтобы получить результат (доехать до дома).
• Если же пассажир говорит адрес, а таксист строит маршрут, следит за передачами и поворотами, это декларативный подход. Пассажир описывает конечный результат (точку, в которую нужно прибыть) и реакцию на внешние события вроде «если встанем в пробку на час, высади меня у метро».

React.js работает на идее декларативного подхода. Это называется «UI — функция данных» — разработчик описывает, как ведёт себя интерфейс в зависимости от данных и событий, например:

• для каждого пользователя в чате нарисуй кнопку-крестик в списке с аватарками;
• если пользователь нажал на крестик, убери из списка пользователей того, рядом с чьей аватаркой этот крестик.

С React разработчику не придётся описывать подробности. Давайте сравним решение с библиотекой и без при такой задаче: удалить пользователя из списка чата, если другой пользователь нажал на крестик рядом с ним.

• разработчик описывает компонент с помощью React;
• указывает все места, где этот компонент отображается;
• React добавляет компоненты в HTML;
• если разработчику нужно модифицировать компонент, например поменять цвет кнопки, он указывает новый цвет для нужного компонента;
• React меняет цвет всех кнопок, во всех местах, где отображается этот компонент. При этом никто не запрещает сделать цвет кнопки настраиваемым и для каждого конкретного компонента.

Фишка в том, что создание и конфигурация компонентов — это отдельные процессы. Сначала разработчик рассказывает, как выглядит и ведёт себя компонент, например кнопка, и какие его свойства можно настраивать. А потом размещает конфигурации кнопок в разных местах, условно: в форме — среднюю зелёную, в корзине — большую жёлтую, на главном экране — маленькую серую.

React 11 лет назад разработала Facebook*. Но сейчас React — это проект с открытым кодом, в который каждый разработчик может предлагать изменения. И популярен он не только у команды Цукерберга:

• 40,14% разработчиков сайтов использовали React в 2021 году — это самая популярная библиотека для создания пользовательских интерфейсов;
• 182 850 звёзд у React на GitHub;
• 25,12% разработчиков хотят изучить React;
• 15,9 млн раз пользователи установили React — это за одну неделю с 13 по 19 февраля 2022 года. Для сравнения: ближайший по установкам конкурент — Vue — за этот же период набрал в пять раз меньше — 3,3 млн установок.

Сколько раз React устанавливали за пять лет, не возьмёмся считать:

• во многих пользовательских и внутренних сервисах Яндекса;
• для ленты сайтов и приложений Facebook* и Instagram*;
• в онлайн-кинотеатре Кинопоиска; на Пикабу;
• в мессенджере WhatsApp; и множестве других интерфейсов, подробный список есть на GitHub.

React используют в браузере, в умных телевизорах и часах, в мобильных приложениях, очках виртуальной реальности, консольных приложениях и чат-ботах. Везде. И разработчиков легко понять: если нужно сменить платформу, не придётся с нуля изучать новую технологию. Вместо этого можно взять знакомый React и адаптировать для местного интерфейса.

Универсальность. React — это JavaScript-библиотека, а JavaScript — популярный язык программирования, который используется всюду. Ни одна другая JS-библиотека не работает в таком количестве окружений и на таком количестве устройств.

Гибкость. React гибкий, потому что позволяет:

• выбирать, какие библиотеки использовать, например, для контроля за переходами между экранами и хранения данных;
• менять инструменты разработки;
• сделать приложение полностью на React;
• или использовать его для одной фишки. Выбирать вам.

Отличный DevX. UX — это пользовательский опыт, а DevX — опыт разработчика — то, насколько удобно, комфортно и просто разработчику взаимодействовать с технологией. И у React отличный DevX.

React существует 11 лет и за это время:

• успели найти решения для всех типичных проблем;
• придумали тысячи инструментов, которые делают жизнь разработчика проще;
• сформировали вокруг библиотеки гигантскую и постоянно растущую экосистему.

Всё это делает React удобным для разработчика. А ещё у библиотеки много пользователей — это значит, что есть у кого перенять опыт и попросить совета.

Читаемость. В React приложение разбито на компоненты, поэтому в 9 случаях из 10 при поломке видно, в какой части кода беда:

• разработчик видит, что сломалась кнопка;
• идёт в компонент «кнопка» и устраняет проблему для всех кнопок разом.

Если же что-то ломается в JavaScript, то разработчик сначала идёт плакать. Потому что проблема может быть и на стороне HTML, и на стороне JS, и на стыке этих технологий, когда случается «рассинхрон» данных и отображения. Часто нет понятного разделения на файлы, приходится копаться. И главное — починка одной кнопки не исправит автоматически остальные.

И на чистом JavaScript можно написать прекрасный задокументированный и эффективный код, так библиотеки и появляются. И в React можно написать плохо читаемый код с багами, но сама библиотека делает эту задачу сложнее. Если разработчику приходится писать сложный, запутанный код для решения типичной проблемы в React, он делает что-то неправильно и ему пора заглянуть в поисковик.

После освоения базы можно переходить к изучению React, например начать с официального туториала по React на русском языке.

Ускорить прогресс при изучении React.js помогает обратная связь, ревью кода. Благодаря ревью код становится рабочим, читаемым и соответствует стандартам отрасли. Поэтому изучать React лучше с наставником или в рамках учебной группы.