React.js для начинающих в программировании: что это, как устроен и для чего нужен

React.js для начинающих в программировании: что это, как устроен и для чего нужен

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

• верстальщиков, которые планируют перейти от макетов на HTML и CSS к полноценному программированию;
• специалистов, которые познакомились с языком JavaScript и для повышения квалификации хотят изучить дополнительные технологии: React, Angular или Vue;
•   всех, кто только присматривается к ИТ и что-то слышал о разработке на React.

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

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

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

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

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

Для простоты понимания React можно представить в виде набора виртуальных кубиков Lego: можете пользоваться любыми деталями и собирать из них интерфейсы.

Для чего нужен ReactВ интернете полно сайтов, которые функционируют без React на базовых технологиях: на HTML-разметке, CSS-стилях и языке JavaScript. Обычно на такие страницы добавляют текст, изображения, формы сбора данных, рекламные баннеры и нечто подобное. Элементов взаимодействия на таких сайтах немного, поэтому разработчику не нужно задумываться об оптимизации памяти и отладке рабочего процесса. Не нужен и React.

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

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

Интерфейс Figma как пример сложного интерактивного веб-проекта

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

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

Кто пользуется ReactReact задуман как универсальный инструмент для фронтенд-разработки. Программисты могут с его помощью создавать веб-приложения и при необходимости адаптировать его под нативные программы или мобильные операционные системы на базе iOS и Android.

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

Вот немного статистики.

В 2023 году аналитики Built With насчитали около двух миллиардов действующих сайтов, опубликованных в интернете. Из этого числа не менее 13,5 млн работают на Реакт.

Также в Built With регулярно анализируют миллион сайтов с наибольшим трафиком. В 2024 году из этого количества 163 305 сайтов были разработаны на React — то есть 16%. В их числе сайты BBC, Netflix, CNBC, Canva, Bloomberg и многих других известных компаний.

Помимо React сложные интерактивные веб-приложения можно создавать с помощью фреймворков Angular и Vue.js. Это конкурирующие технологии со своей спецификой. По данным агентства Statista, в 2023 году 40% разработчиков отдали предпочтение React, 17% — Angular; 16% — Vue.js. То есть React популярнее всех вместе взятых конкурентов.

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

Декларативность

Представьте ситуацию: вы садитесь в такси и не называете водителю адрес. Вместо этого вы даете инструкции: через 200 метров поверните направо, затем развернитесь и через 100 метров налево. Водитель не знает конечной точки, и если вы ошибетесь с направлением, то доедете не туда. Это метафора описывает императивный подход к программированию, когда вы должны учесть и описать каждое действие.

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

Вот что пишет о преимуществах декларативного подхода команда React <no>alt=«О преимуществах декларативного подхода от команды React»</no>

Изображение от <a href="https://ru.legacy.reactjs.org/">React</a>

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

(от англ. Document Object Model — «объектная модель документа»). Получается громоздкая структура, которая изначально не проектировалась для скоростных динамических изменений. Причина историческая: в момент зарождения интернета разработчики не предвидели, что веб-продукты станут такими сложными.

Если DOM-дерево сформировано и загружено в браузер, то его обновление отнимает много ресурсов. Особенно когда нужно перерисовать полностью всю модель DOM. Такая процедура увеличивает скорость загрузки сайта и замедляет навигацию по страницам.

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

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

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

При каждом следующем действии пользователя цикл повторяется, и путем точечных изменений реальный DOM может быстро манипулировать элементами веб-страницы.

Возможность повторно использовать компоненты

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

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

Нисходящий поток данных

Компоненты всегда выстраиваются в иерархическую структуру, в которой любые данные расходятся от родительских компонентов к дочерним. Получается так:

• ●  Есть корневой компонент приложения.
• ●  У всех последующих компонентов будет свой родитель.
• ●  У каждого родителя может быть множество дочерних элементов.Для изменения внешнего вида или поведения компонента ему нужно передавать свойства. Это можно делать только с помощью нисходящего потока данных — от родительского компонента к дочернему. Обратно передавать свойства запрещено. Также нельзя передать свойства, минуя промежуточные компоненты на своем пути.

Вот как можно схематично изобразить нисходящий поток данных

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

JSX — это специальный язык от команды React, который придуман для разработчиков. Он нужен для удобства написания компонентов — можно как будто писать HTML-код внутри JS-файла. Однако браузер не понимает JSX. Поэтому React с помощью внутренних механизмов преобразовывает компоненты на JSX в обычный JavaScript.

Помимо свойств у компонентов есть состояния, которые можно изменять. Состояние можно менять на протяжении всего жизненного цикла компонента с помощью специальных функций — React Hooks. Хуки появились в версии React 16.8. До них влиять на состояние компонентов можно было путем создания классов, что не так удобно.

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

React Developer Tools

Для отладки и анализа компонентов разработчики могут использовать React Developer Tools — браузерное расширение для Chrome, Firefox и Edge. Этот инструмент позволяет просматривать структуру и иерархию компонентов, отслеживать передаваемые свойства, наблюдать за изменением состояний и многое другое.

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

Популярность

В середине 2013 года исходный код React впервые попадает в общий доступ и становится открытым для всех разработчиков. Как дальше росла популярность, удобно отслеживать по ежегодным аналитическим отчетам Stack Overflow's Developer Survey.

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

Изображение от <a href="https://insights.stackoverflow.com/survey"> Stack Overflow</a> К 2019 году React выравнивается с Angular.

React используют миллионы пользователей, и это хорошо по трем причинам.

1. Перед релизом все обновления многократно тестируются.
2. Любой случайный баг быстро находят и исправляют.
3. Если новичок столкнется с проблемой,то легко сможет найти решение впоиске или обратиться за помощью к опытным коллегам.

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

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

Страница с информацией о сообществе React-разработчиков <no>alt=«Страница с информацией о сообществе React-разработчиков»</no>

Для ряда задач базовых возможностей React может оказаться недостаточно. На этот случай разработчики могут интегрировать дополнительные инструменты, которых хватит для создания масштабируемых приложений любой сложности. Например, для настройки маршрутизации подойдет библиотека React Router. Если нужно стилизовать интерфейс, добавить анимацию и визуализировать данные, подключаем Material-UI, React Spring и D3.js. Нужно управлять состоянием — берем Redux, и так далее. Не нравятся перечисленные варианты — не проблема, почти для всего есть альтернатива.

Сейчас не обращайте внимание на названия инструментов. Главное — запомнить, что в экосистеме React заложена вся инфраструктура для задач современного фронтенда.

Реактивность

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

Получается, что когда React сравнивает предыдущую и текущую версию виртуального DOM, он сравнивает два объекта — легковесный JavaScript-код. Более того, сравнение происходит с использованием памяти компьютера. Браузерные мощности подключаются только в конце, когда нужно точечно перерисовать интерфейс. Всё это в совокупности и обеспечивает реактивный отклик на каждое действие пользователя.

Эффективность

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

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

Высокая скорость

В основе обычных сайтов заложена клиент-серверная архитектура: браузер обращается к серверу, получает HTML-, CSS- и JavaScript-файлы, а затем на их основе отрисовывает страницу. Когда пользователь переходит на новую страницу, браузер снова обращается к серверу за новыми файлами. И так при каждом новом действии.

С помощью React создаются одностраничные приложения — SPA, или Single Page Application. Их особенность в том, что с сервера запрашивается только одна HTML-страница с сопутствующими JS- и CSS-файлами. После этого при каждом действии пользователя страница обновляется на стороне клиента — срабатывает JavaScript-код. Опционально SPA-приложения могут подгружать с сервера данные, однако именно действия на стороне клиента обеспечивают высокую скорость работы.

Удобная отладка

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

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

Пример записи компонента с импорт-экспорт-синтаксисом. Так компоненты связываются между собой в единое приложение

Недостатки ReactНесмотря на популярность и мощную функциональность, как и любой инструмент, React обладает своими особенностями. Рассмотрим некоторые из них.

Запутанность синтаксиса

Обычно компоненты описывают через JSX-разметку. Это гибрид HTML и JS для написания чистого и легко читаемого кода. Однако JSX не используется за пределами React. Поэтому разработчикам понадобится время на изучение нюансов синтаксиса.

Несмотря на удобство, использовать в проектах JSX-разметку необязательно. Можно писать код на чистом JS. Здесь запутанность синтаксиса может быть связана с 18-й версией React, которая отошла от классовых компонентов в пользу функциональных. В новых проектах классовых компонентов меньше, но они еще используются. В старых проектах классовых компонентов много, и к стилю их написания нужно привыкнуть.

Пример записи классового компонента

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

Неполное соответствие MVC

Командная работа над крупным проектом предполагает высокие требования к организации приложения. Для этого часто используют шаблон MVC. Шаблон предполагает разделение кода на независимые блоки по их назначению. Стандартная схема распределения выглядит так:

• ●  В блоке Model храним код, связанный с логикой и сохранностью данных.
• ●  Блок View выделяем под пользовательский интерфейс.
• ●  БлокControllerдолжен отвечать за взаимодействие между моделью ипредставлением,чтобы все части приложения работали,как единый механизм.Базовая функциональность React заточена под пользовательский интерфейс. В контексте шаблона MVC это соответствует аббревиатуре View. Для полного соответствия MVC необходимо обращаться к экосистеме и дополнять React внешними инструментами.

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

Трудности с SEO-оптимизацией

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

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

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

Как начать пользоваться ReactДля отслеживания учебного прогресса придуман сайт roadmap.sh. Это сообщество разработчиков, которые публикуют дорожные карты для последовательного изучения разных технологий. В ветке фронтенда путь к React такой: HTML, CSS, затем JS.

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

Следующий шаг — знакомство с документацией. На сайте вы сможете узнать актуальную версию React, пройти бесплатный курс и разработать игру «крестики-нолики». Также есть множество теоретических уроков и интерактивных упражнений на закрепление.

Такой код для игры «крестики-нолики» вы сможете написать, если пройдете уроки от команды React

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

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

Желаем реактивного обучения!