Время чтения: Около 3 мин. Веб-разработка

Что такое React: как устроена библиотека и для чего используется

Что такое React: как устроена библиотека и для чего используется

React — один из самых попурярных инструментов для веб-разработки. Библиотека помогает быстро и сравнительно легко реализовать реактивность — явление, которое в ответ на извменение одного условия меняет все остальное. Вместе с преподавателем курса JavaScript в Elbrus Bootcamp Артемом Бахаревым разбираемся, что такое React.

Что такое React

Это одна из самых популярных библиотек для веб-разработки. Она работает на JavaScript и предназначена для создания интерфейсов (кнопок, форм, блоков на странице), с помощью которых пользователь взаимодействует с сайтом.

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

Библиотеку разработали в Facebook — с 2015 года ее исходный код находится в открытом доступе и распространяется по лицензии MIT. React поддерживают тысячи разработчиков со всего мира — библиотека считается очень стабильной и ее используют в своих продуктах крупнейшие компании: например, Instagram, Netflix, Yahoo.

Почему React так популярна

Этому есть несколько причин. Как уже говорилось выше, у React открытый исходный код, она стабильна и поддерживается большим сообществом разработчиков.

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

И, наконец, самое важное отличие — React основана на декларативном подходе к программированию. Остановимся на этой особенности подробнее.

Отличие декларативного подхода от императивного

Императивный стиль предполагает достижения результата с помощью конкретных шагов. Например, для того, чтобы приготовить яичницу на на завтрак, нужно:

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

Такой подход используется, если вы пишете интерфейс на чистом HTML и JavaScript, без использования React.

Декларативный подход предполагает подробное описание конечного результата. Например: приготовить яичницу из трех яиц.

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

В программировании декларативный подход можно использовать не всегда, но для разработки пользовательских интерфейсов он подходит отлично. Он достаточно удобен и понятен, значительно облегчает процесс разработки и отладки кода. Библиотеки Vue.js и Svetle, которые появились вслед за React, основаны на том же подходе.

Сравнения декларативного и императивного подходов

Разберем разницу в подходах на примере простого элемента. Создадим на странице кнопку смены темы со светлой на темную.

В императивном подходе сначала опишем кнопку на HTML, а затем добавим отдельные функции на чистом JavaScript:

function setButtonTheme(button, theme) {
  const themeClass = theme === 'dark' ? 'dark-theme' : 'light-theme';        
   button.classList
         .remove('dark-theme', 'light-theme')
         .add(themeClass);
}
function setButtonText(button, text) {
  button.textContent = text;
}

При императивном подходе программе даются последовательные инструкции в виде функций: чтобы изменить тему, добавь CSS-класс; чтобы изменить текст? положи новый текст в свойство textContent кнопки.

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

function Button({ text, theme }) {
    const themeClass = theme === 'dark' ? 'dark-theme' : 'light-theme';
    return <div className={button ${themeClass}}>{text}</div>;
}

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

Востребованность React

По данным опроса почти 50 тыс. профессиональных разработчиков, проведенного StackOverflow, React занимает первое место в списке наиболее популярных библиотек для веб-разработки, опережая jQuery и Angular. Его используют 44% опрошенных разработчиков.

React пользуется популярностью и в России: на момент публикации статьи на сервисе поиска работы HeadHunter размещено больше 2,5 тыс. вакансий с упоминанием этой библиотеки. Студенты Elbrus Bootcamp учатся писать код на React именно из-за популярности и востребованности этой библиотеки.

Заключение

React — универсальная библиотека, которую можно использовать почти на любом проекте, свзанном с веб-разработкой. Как уже говорилось выше, это инструмент с большим сообществом — на GitHub выложены тысячи React-компонентов почти на все случаи жизни. Кроме того, у библиотеки обширная и хорошо описанная документация — это упрощает  знакомство с React начинающим программистам.

У React есть несколько особенностей: она увеличивает размер приложения и замедляет его загрузку, поскольку код выполняется в браузере. Чтобы начать использовать библиотеку, нужно привыкнуть к парадигме, в которой она работает. Подробнее о ней можно прочитать в статье «Философия React».

Катрин Алимова

Катрин Алимова