Что такое React: объяснение для владельца сайта и маркетолога

Что такое React простыми словами

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

Слово «библиотека» важно. Фреймворк навязывает структуру проекта, и разработчик живёт по его правилам. Библиотека предлагает набор инструментов и оставляет выбор за командой. В том же материале Практикума сказано, что библиотека не определяет, какие технологии использовать, что создавать и как. Это даёт гибкость, но передаёт ответственность за архитектуру тем, кто пишет код. Для заказчика вывод простой: React сам по себе сайт не создаёт, вокруг него собирают роутинг, хранение данных и сборку.

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

Если вы уже знакомы с основами, JavaScript в этой связке остаётся фундаментом: React написан на нём, и без него разобраться в библиотеке не получится. Поэтому в обучении сначала идут HTML, CSS и JavaScript, а потом уже React.

Как React собирает страницу из компонентов?

Главная идея React называется декларативным подходом. Разработчик не пишет по шагам, как менять страницу, а описывает, как она должна выглядеть при заданных данных. Практикум поясняет это на примере такси: пассажир называет адрес и не командует рулём и педалями. Библиотека сама находит, какие части интерфейса нужно перерисовать, когда данные изменились.

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

Выигрыш хорошо виден на реальном проекте. Редакция The Code рассказывает в материале о React, что без компонентов ссылку пришлось бы описывать заново на каждом из 30 мест страницы. Эта же редакция показывает схему на собственных статьях: параметры каждой симуляции записаны прямо в тексте, а вызов компонентов Figure и Grid рисует анимацию и подписи. Разработчик описывает правила отрисовки один раз в файлах компонентов, а авторы подставляют только параметры.

Тот же принцип работает с цветом кнопки. Разработчик меняет описание компонента, и React применяет правку ко всем местам, где кнопка показана. По данным Практикума, в таком коде в 9 случаях из 10 при поломке сразу видно, в какой части проблема. Для бизнеса это означает быстрые правки и меньше регрессий после релиза.

Описывают компонент на привычном языке. По тому же руководству React, компоненты React - это JavaScript-функции, которые возвращают разметку. Разметка внутри кода выглядит почти как HTML, поэтому вид и логика кнопки или карточки лежат в одном месте. Заказчику это даёт простое правило приёмки: попросите разработчика показать, где живёт компонент и сколько страниц от него зависит.

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

Где применяют React и насколько он популярен

Популярность React измеряют по-разному, и все показатели высокие. Практикум приводит данные опроса: около 45 процентов разработчиков сайтов использовали React. Там же сказано, что у репозитория больше 245 тысяч звёзд на GitHub. Страница проекта это подтверждает: счётчик звёзд на скриншоте показывает около 251 тысячи, и библиотека продолжает выпускать релизы.

Сфера применения шире, чем браузерные сайты. Практикум перечисляет площадки, где работает React: браузер, умные телевизоры и часы, мобильные приложения, очки виртуальной реальности, консольные приложения и чат-боты. Для мобильных приложений есть React Native: с его помощью делают приложения для iOS и Android по знакомым принципам. Команда, которая освоила React, не начинает с нуля на новой платформе.

Для маркетолога и владельца бизнеса полезнее прикладные сценарии:

• Личные кабинеты и CRM. Экраны, где данные меняются без перезагрузки страницы.
• Административные панели. По Практикуму, React быстро собирает сложные интерфейсы с таблицами, фильтрами, графиками и формами.
• Каталоги и маркетплейсы. Фильтры, корзина, сравнение товаров.
• Мобильные приложения. Тот же подход через React Native.

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

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

Видят ли поисковики страницы на React?

Здесь у React слабое место, о котором владельцу сайта стоит знать до разработки. Обычное React-приложение отдаёт браузеру почти пустую страницу, а содержимое рисует скрипт уже на устройстве посетителя. Такая схема называется клиентским рендерингом. Поисковый робот приходит за HTML и может увидеть пустую оболочку.

Практическую картину описывает разбор на Хабре: без серверного рендеринга робот Яндекса получает от одностраничного приложения пустой div с id root и уходит. Там же сказано, что Google умеет рендерить JavaScript, но страница может попасть в индекс через несколько дней или недель после обхода. Для сайта, который живёт органическим трафиком, такая задержка означает потерянные заявки.

У Яндекса есть настройка этого поведения. В справке Вебмастера указано, что по умолчанию включена опция «На усмотрение робота Яндекса». Справка советует запретить рендеринг, если реализован SSR или пререндеринг. Запретить имеет смысл потому, что при выполнении JavaScript робот может создавать дополнительную нагрузку на сервер. Подробнее про способы отрисовки страниц мы писали в материале про рендеринг и SSR.

Серверный рендеринг решает проблему, и для React его обычно берут из Next.js. По документации фреймворка, он сначала отдаёт HTML для быстрого неинтерактивного превью маршрута, а JavaScript потом делает страницу интерактивной. Серверные компоненты, как там же сказано, выбирают, когда нужно уменьшить объём JavaScript для браузера и улучшить First Contentful Paint.

Цену ошибки показал случай AutoZone. Американская сеть автозапчастей пересобрала сайт на React с самописным серверным рендерингом, и, как сообщает агентство Callstack, после запуска поисковая эффективность оказалась ниже, чем у прежней версии. Агентство перевело проект на Next.js, уменьшило блокирующий JavaScript с 820 до 560 килобайт, а оценка Lighthouse выросла с 19 до 48. Компания вернула позиции в Google с отметок 3-9 на первое место по ключевым запросам. Агентство описывает собственный проект, поэтому цифры стоит читать как заявление исполнителя.

Проверить свой проект просто. Откройте страницу, нажмите «Просмотр кода страницы» и найдите там заголовок и основной текст. Если в исходном коде только пустая оболочка, роботу придётся выполнять скрипты, и стоит обсудить с разработчиком серверный рендеринг.

Нужен ли React вашему сайту?

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

Хороший пример удачного выбора дал бразильский сервис QuintoAndar. Компания переписала на Next.js раздел о кондоминиумах и, как рассказывается в материале web.dev, ставила жёстким требованием возможность сканирования страниц поисковыми системами. Результат: проект поднял конверсию на 5 процентов и число страниц за сеанс на 87 процентов. К концу выкатки Google Analytics показал снижение отказов на 46 процентов.

У библиотеки есть и обратная сторона, о которой честно пишут сами разработчики. Frontend Team-Lead Redmadrobot Сергей Сова объясняет в материале Хекслета, что его смущает вес библиотеки:

Я не хочу «платить» за то, чего не использую.

Сергей Сова, Frontend Team-Lead в Redmadrobot, в материале Хекслета

Для заказчика это значит, что каждая страница везёт в браузер код библиотеки. На быстром компьютере разница скрыта, зато на бюджетном телефоне с медленной сетью она влияет на скорость открытия и на конверсию.

Таблица служит ориентиром: итог зависит от бюджета и команды, поэтому оценку стоит согласовать с разработчиками.

Перед стартом проекта пройдите короткий чек-лист:

1. Определите, нужны ли странице сложные экраны и фильтры или хватит текста и формы.
2. Если нужен поисковый трафик, закладывайте серверный рендеринг сразу, а не после запуска.
3. Попросите команду оценить вес скриптов и скорость открытия на среднем телефоне.
4. Уточните, кто будет поддерживать проект: разработчиков на React много, но сопровождение стоит денег.
5. Сравните стоимость с готовой CMS для той же задачи.

Какие ошибки с React стоят трафика и заявок

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

• Клиентский рендеринг без SSR для страниц, которым нужен поиск. Робот получает пустую оболочку, а страницы приходят в выдачу с задержкой или не приходят совсем.
• Тяжёлые бандлы. Весь код грузится на каждой странице, и телефон тратит время на разбор скриптов, пока контент ждёт показа.
• Контент появляется только после действия. Тексты в раскрывашках и вкладках, которые подгружаются скриптом, могут не попасть в исходный HTML.
• Кнопки вместо ссылок. Навигация без обычных ссылок мешает роботу найти страницы.
• Выбор по моде. React берут для визитки, где хватило бы конструктора.

Отдельная ловушка связана с метриками. Команда радуется запуску, а проверка трафика и скорости откладывается. Заведите счётчик в Метрике до релиза, сравните показатели через несколько недель и держите под рукой старую версию, чтобы было с чем сопоставлять результат. Так вы увидите проблему, пока она не стоила позиций.

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

Новичкам, которые хотят разобраться с технологией самостоятельно, стоит идти по порядку. Практикум советует сначала изучать HTML, CSS и JavaScript, а потом переходить к React. Для владельца сайта полезно знать теги HTML: с ними проще читать исходный код страницы и проверять, видит ли робот ваш текст.

Частые вопросы