Что такое React и как его освоить?

Рассказываем про популярную JS-библиотеку и даём план её изучения

Что такое React и как его освоить?

Разработка

React-разработчики создают приложения на React, используя дополнительные инструменты: например, Redux, TypeScript или Jest. Это востребованная работа: на React.JS написаны Яндекс, Netflix, Facebook и другие известные сервисы. Фронтенд-разработчик в Яндекс.Практикуме Давид Роганов рассказал, что такое React, и составил гид для его изучения. 

Что такое React

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

Вскоре после появления React и подобные ему решения (Vue.js, Svelte) практически захватили мир фронтенда: потому что они помогают решать проблемы, основываясь на идее декларативного программирования, а не на императивном подходе.

  • Декларативный подход состоит в описании конечного результата (что мы хотим получить).
  • При императивном подходе описываются конкретные шаги для достижения конечного результата (как мы хотим что-то получить).

Оказалось, что декларативный подход отлично подходит для создания интерфейсов, и он прижился в сообществе. Этот подход работает не только в вебе: сравнительно недавно компания Apple представила фреймворк SwiftUI, основанный на тех же принципах.

Чтобы лучше понять, о чём идёт речь, рассмотрим императивный и декларативный подходы на примерах. Напишем две версии простого приложения: на HTML и JS (императивный подход) и на React (декларативный подход). Наша программа будет показывать число и кнопку, и при нажатии на неё исходное число будет увеличиваться на единицу.

Приложение на чистом HTML и JS

В рамках императивного подхода пошаговые инструкции для создания программы выглядят так:

  1. объявляем начальные значения программы: присвоили константам ссылки на DOM-элементы, устанавливаем начальное значение счётчика;
  2. пишем обработчик increment, в котором мы увеличиваем текущее значение, и устанавливаем его в соответствующий элемент;
  3. устанавливаем начальное значение счётчика (0);
  4. устанавливаем обработчик для кнопки.

Обратите внимание, что HTML-разметка и JS-логика хранятся отдельно друг от друга.

<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
 </head>
 
 <body>
   <div class="root">
     <h1 id="counter-value"></h1>
     <button id="increment-btn">+1</button>
   </div>
 
   <script>
     const counterValueElement = document.getElementById("counter-value");
     const incrementBtn = document.getElementById("increment-btn");
     let counterValue = 0;
 
     function increment() {
       counterValue += 1;
       counterValueElement.innerText = counterValue;
     }
 
     counterValueElement.innerText = counterValue;
     incrementBtn.addEventListener("click", increment);
   </script>
 </body>
</html>

Приложение на React

Из-за специфики библиотеки код на React может выглядеть непривычно для того, кто пишет на JavaScript: потому что в тэге <body> практически нет вёрстки. Но сосредоточимся непосредственно на приложении-счётчике: его основная логика находится на строках 25-40.

Вот, что в нём происходит:

  • Вызывая функцию React.useState, мы сообщаем React, что собираемся использовать какое-то изменяемое значение. В ответ React даёт нам само значение (value) и функцию, которая позволит его установить (setValue).
  • Объявляем обработчик increment, который устанавливает новое значение счётчика с помощью вышеупомянутой функции.
  • Создаём разметку приложения, используя синтаксис, похожий на HTML (на самом деле это JSX). Разметка повторяет то, что мы видели ранее, но теперь само значение счётчика и установка обработчика на клик находятся прямо в ней. Это как раз то место, где мы описываем конечный результат.

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

<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
 </head>
 
 <body>
   <div id="root"></div>
 
   <script
     src="https://unpkg.com/react@17/umd/react.development.js"
     crossorigin
   ></script>
   <script
     src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
     crossorigin
   ></script>
   <script
     src="https://unpkg.com/@babel/standalone@7.13.6/babel.min.js"
     crossorigin
   ></script>
 
   <script type="text/babel">
     function App() {
       const [value, setValue] = React.useState(0);
 
       function increment() {
         setValue(value + 1);
       }
 
       return (
         <div className="app">
           <h1>{value}</h1>
           <button onClick={increment}>+1</button>
         </div>
       );
     }
 
     ReactDOM.render(
       <div>
         <App />
       </div>,
       document.getElementById("root")
     );
   </script>
 </body>
</html>

Сравнение двух вариантов приложения

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

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

Если сравнивать эти два приложения, то при использовании React можно выделить такие особенности:

  • Разметка и относящаяся к ней логика находятся рядом и связаны друг с другом. Это упрощает дальнейшую работу с кодом.
  • Выделен счётчик с кнопкой в компонент. Это значит, что мы можем очень легко его переиспользовать: достаточно на 44 строке написать ещё один тег <App />, и на странице появятся уже два независимых друг от друга счётчика.
  • Больше не нужно использовать идентификаторы для обращения к DOM-элементам, что также делает код более легко поддерживаемым.
  • Состояние компонента изолировано: нет никакой возможности модифицировать значение извне, если мы явно такое не задумывали. Благодаря этому поток данных в приложении становится более предсказуемым, что упрощает разработку и отладку.

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

Раньше в различных статьях часто можно было встретить заблуждение, что благодаря виртуальному DOM React быстрый. Следует понимать, что при прочих равных React-приложение не может быть быстрее того, что написано на чистом JS хотя бы потому, что сам React написан и выполняется на JS.

Особенности React

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

Эта библиотека действительно может упростить жизнь разработчикам:

  • С её помощью можно построить интерфейс из отдельных компонентов, которые легко поддерживать.
  • Она добавляет удобный слой абстракции, избавляя от необходимости работать с DOM напрямую.
  • React — это уже не новая библиотека, за ней стоит крупная компания Facebook и большое сообщество разработчиков. Поэтому она отлично протестирована, регулярно поддерживается и стабильно обновляется, а переход к новым версиям проходит максимально гладко.
  • Благодаря сообществу у React хорошо проработанная документация и большой опыт, накопленный в статьях, курсах и конференциях. Это значительно облегчает не только изучение библиотеки новичками, но и поиск ответов на всевозможные вопросы в процессе работы.
  • На Гитхабе можно найти готовые React-компоненты почти на все случаи жизни. А если их нет, но есть нужные независимые библиотеки, то можно поискать интеграцию либо сделать её самостоятельно.
  • В React-сообществе со временем сформировались определённые подходы и соглашения по организации проекта, кода, решению частых проблем. Для разработчиков это значит, что нужно тратить меньше времени на обсуждение некоторых договорённостей — можно использовать готовые и уже устоявшиеся.
  • Хотя в проекте, скорее всего, будет налажен процесс сборки с помощью webpack, parcel, rollup или другого упаковщика, стоит иметь в виду, что это необязательно для использования React. Работая с этой библиотекой, вы пишете на чистом JS, и никакие диалекты HTML, CSS или JS изучать не нужно. Конечно, с React почти всегда используется JSX, но и это тоже опционально.
  • React — это проект с открытым исходным кодом. Благодаря этому его можно безопасно использовать даже в коммерческих приложениях.

Однако при использовании React есть особенности, которые важно учитывать:

  • React увеличивает размер приложения, которое нужно загрузить пользователям (~40 kB для пакетов React и React-dom).
  • Загруженный код нужно выполнить в браузере: для пользователя это означает, что приложение будет запускаться медленнее. Подробнее про это можно почитать в материале «The cost of JavaScript in 2019» от команды V8 (перевод: «Цена JavaScript в 2019 году»).
  • Вместе с виртуальным DOM возникают свои накладные расходы: во-первых, по времени выполнения (сравнение виртуальных деревьев происходит не моментально); во-вторых, по памяти, ведь виртуальные деревья нужно где-то хранить и не в единственном экземпляре. С увеличением количества элементов на странице эти расходы растут, что может стать реальной проблемой на мобильных устройствах. Поэтому при изучении React важно уделить внимание способам оптимизации рендеринга приложения – необходимые инструменты для этого есть в самой библиотеке.
  • Средний порог входа в React. Чтобы начать разрабатывать на React, программист должен не только изучить саму библиотеку, но и привыкнуть к используемой парадигме. Про это есть хорошая статья «Философия React» на официальном сайте.

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

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

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

Для каких проектов подойдёт React

Резюмируя все особенности, можно выделить несколько типов проектов, которым подойдет React.

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

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

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

Как изучить React

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

План изучения React может выглядеть так:

  1. Основы:

    — способы подключения React к проекту;

    — знакомство с JSX;

    — знакомство с компонентами: стейт, пропсы, жизненный цикл;

    — виды компонентов: классы и функциональные компоненты, их отличия;

    — обработка событий;

    — работа с формами;

    — разработка простого приложения на React.

    — React хуки, кастомные хуки, рефы.

    — Популярные шаблоны: HOCs, render props, глупые/умные компоненты, controlled/uncontrolled components.

  2. Управление состоянием приложения:

    — React context;

    — архитектура flux;

    — хук useReducer;

    — сторонние библиотеки (redux, mobx и другие).

  3. Диагностика проблем с производительностью, использование профайлера и оптимизация приложений на React.

  4. Более продвинутые концепции:

    — проброс рефов;

    — error boundaries;

    — порталы;

    — принципы интеграции с другими js-библиотеками;

    — lazy loading компонентов;

    — SSR;

    — strict mode;

    — suspense;

    — concurrent mode.

  5. Изучение работы под капотом:

    — виртуальное дерево и алгоритм reconciliation;

    — понимание концепций и устройства reconciler и renderer;

    — написание своего рендерера.

Почти все эти темы можно изучить на официальном сайте React.

Для тех, кто уже хорошо знаком с React, есть отличная статья «Build your own React» — она поможет глубже разобраться, как работает React изнутри. Ещё можно посмотреть записи выступлений с конференции React Conf.

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

Почему сейчас стоит изучать React

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

Во-вторых, это целый дивный новый мир со своим огромным сообществом. React помогает взглянуть на разработку интерфейсов совершенно по-другому — через призму декларативного программирования. Это полезно для общего развития и расширения кругозора, а полученные знания упростят изучение других подобных библиотек и технологий (Vue.js, Svelte или даже SwiftUI). Кроме этого, многие принятые в сообществе соглашения, шаблоны и подходы сами по себе помогают писать более хороший и поддерживаемый код.

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

Больше по теме

Разработка

Руководитель разработки виртуальной сети Yandex.Cloud о работе архитекторов

«В проектировании не бывает быстрых прорывов: это работа на долгосрочный результат»

Анализ данных, Разработка

Чем занимаются лауреаты стипендии имени Ильи Сегаловича

Углублённое изучение математики, научные исследования и работа в собственном стартапе

Разработка

Чем школы Яндекса отличаются от стажировок

И как понять, куда лучше пойти, если вы разработчик

Разработка

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

Рекомендации трёх сотрудников Яндекса, которые совмещают основную работу с преподаванием

Разработка

Автоматизируй это! Упрощаем жизнь разработчика

Как автоматизировать тестирование, cбор и обработку данных, деплой — и другие рутинные задачи

Разработка

Как давать и получать обратную связь

Фидбек как инструмент роста разработчика

Разработка

Из художницы в бэкендеры

Опыт и советы бэкенд-разработчика Яндекс.Маркета