Попробуем понять природу популярности библиотеки React, которая активно используется 40% разработчиков сайтов. Об этом утверждает исследовательский отдел Statista и ряд других изданий. Что же такое React, чем она понравилась и какие задачи способна решать?
Что такое React?
React - это JavaScript-библиотека, собранная специально в целях упрощения создания пользовательских интерфейсов. Об этом заявили сами авторы технологии. Рассмотрим возможности в деталях.
JavaScript (JS) — представляет собой уникальный язык, предназначенный для описания последовательностей событий, связанных с элементами на странице сайта. Его основное назначение — создание интерактивного интерфейса. С помощью JS можно обработать любые пользовательские действия, например, всплывающее окно с подсказкой появляется после того, как пользователь кликнет на какой-то элемент, или нажатие на кнопку «Опубликовать» приводит к тому, что пост в режиме живого времени появляется в социальной сети, и при этом страницу не требуется обновлять.
Библиотека — это программный код, созданный другими программистами. Хоть React изредка именуют фреймворком, это не отражает его реальной сущности. Данный код может быть использован любым разработчиком в той программе, которую он создаёт. В этом отличие от фреймворка, который использует код разработчика в себе.
Фреймворк больше похож на каркас. Он существенно ограничивает разработчика в выборе методик и инструментов, но при этом гарантирует, что все сходные задачи будут решены единообразно. Библиотека же не устанавливает никаких правил и не диктует условий. Такой подход более гибкий. Обучаться использованию кода из библиотеки намного проще. Однако на разработчика ложится ответственность за выбор определённых инструментов.
Принцип использования библиотеки React
Как работает React и в чём особенности её применения? Чтобы ответить на этот вопрос необходимо понять отличия двух подходов к программированию: императивного и декларативного.
Будет проще, если мы рассмотрим пример с такси. Предположим, что пассажир постоянно указывает таксисту, что тому нужно делать, когда и в какую сторону повернуть руль, когда нажать на педаль тормоза, а когда газа. Это императивный подход. Он не понравится ни одному таксисту, поскольку пассажир описывает каждое его действие. Получение конечного результата неразрывно с выполнением набора команд. Таким образом выглядит императивный подход.
На практике используется декларативный подход. Пассажир описывает только конечный результат: он называет адрес, куда его нужно довести. При этом он может дать дополнительные инструкции, к примеру, «если окажемся в пробке, то высади меня у остановки автобуса».
В React.js реализован декларативный подход. Такой метод носит название «UI — функция данных». Он предусматривает, что разработчик описывает поведение интерфейса в зависимости от событий и данных.
Инструкция может содержать указания:
- для каждого посетителя чата создать кнопку-крестик в списке с аватарками;
- если пользователь на него нажмёт, то нужно убрать из списка того пользователя, рядом с чьей аватаркой находился этот крестик.
При использовании React разработчику не нужно заострять внимание на деталях. Компоненты, из которых собирается интерфейс, представляют собой описания блоков UI в React.js. Таким образом создаются самые разные элементы управления, среди которых кнопки, формы, поля и экраны приложения. Они могут быть созданы своими силами или заимствованы из сторонних библиотек. Кроме этого существует возможность создавать контейнеры компонентов, которые можно использовать много раз или вносить изменения в коллекцию элементов контейнера.
Итак, разработчик описывает все компонент с помощью React. При этом он указывает области экрана, где определённый компонент будет отображаться. React добавляет компоненты в HTML-код страницы. Если возникла потребность внести в компонент изменения, то нужно передать новые параметры. React внесёт изменения во всех местах, где отображается определённый компонент.
Особенность в том, что создание и конфигурация компонентов — это автономные процессы. В первую очередь разработчик описывает внешний вид и поведение компонента, к примеру, кнопки, а также указывает те свойства, что можно настраивать. После этого размещает конфигурации кнопок в разных местах. Так, в форме может оказаться средняя зелёная кнопка, в корзине — синяя, увеличенного размера, на главном экране — маленькая серая кнопка.
Положительные особенности React: гибкость, универсальность и превосходный DevX
У React традиционно выделяются четыре преимущества, которые делают её намного лучше других библиотек, предназначенных для разработки интерфейсов.
Высокая гибкость
Библиотека дает возможность выбрать другие библиотеки, которые следует использовать для решения каких-то узких задач, например, установления контроля за хранением данных и переходами между экранами. Она позволяет выбирать новые инструменты разработки. Если позволяет функциональность, то всё приложение можно сделать целиком на React.
Универсальность
Будучи JavaScript-библиотекой React может работать в самом разном окружении и на самых разных устройствах.
Отменный DevX
UX — это опыт пользователя, а DevX — разработчика — степень комфортности и доступности использования определённой технологии. Многочисленные исследования показывают, что у React высокий DevX.
За 11 лет существования React команда создателей и энтузиастов:
- нашли лучшие решения всех типовых проблем;
- создали, протестировали и внедрили тысячи инструментов, способных оптимизировать процесс разработки;
- создали вокруг библиотеки огромную и неуклонно развивающуюся экосистему.
Это делает React популярным и востребованным средством разработчика. Вокруг неё сформировалось целое профессиональное сообщество, поэтому найдётся у кого заимствовать опыт и спросить совета в трудную минуту.
В качестве ещё одного достоинства следует указать читаемость. В приложении выделяются отдельные компоненты, в силу чего в 9 случаях из 10 при возникновении ошибок сразу понятно, в каком сегменте кода проблема:
- разработчик определяет, что что-то нежелательно произошло с кнопкой;
- он открывает соответствующий компонент и решает проблему сразу для всех кнопок приложения.
Если же какие-то неприятности происходят в JavaScript, то может потребоваться выполнение большой работы по поиску ошибок. Проблема может скрывать в HTML, в JS или на стыке. В результате приходится ставить эксперименты, поочерёдно отключать различные процедуру и терять драгоценное время.
