Что такое 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-логика хранятся отдельно друг от друга.
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Parcel Sandbox</title>
5 <meta charset="UTF-8" />
6 </head>
7
8 <body>
9 <div class="root">
10 <h1 id="counter-value"></h1>
11 <button id="increment-btn">+1</button>
12 </div>
13
14 <script>
15 const counterValueElement = document.getElementById("counter-value");
16 const incrementBtn = document.getElementById("increment-btn");
17 let counterValue = 0;
18
19 function increment() {
20 counterValue += 1;
21 counterValueElement.innerText = counterValue;
22 }
23
24 counterValueElement.innerText = counterValue;
25 incrementBtn.addEventListener("click", increment);
26 </script>
27 </body>
28</html>
Приложение на React
Из-за специфики библиотеки код на React может выглядеть непривычно для того, кто пишет на JavaScript: потому что в тэге <body> практически нет вёрстки. Но сосредоточимся непосредственно на приложении-счётчике: его основная логика находится на строках 25-40.
Вот, что в нём происходит:
— Вызывая функцию React.useState, мы сообщаем React, что собираемся использовать какое-то изменяемое значение. В ответ React даёт нам само значение (value) и функцию, которая позволит его установить (setValue).
— Объявляем обработчик increment, который устанавливает новое значение счётчика с помощью вышеупомянутой функции.
— Создаём разметку приложения, используя синтаксис, похожий на HTML (на самом деле это JSX). Разметка повторяет то, что мы видели ранее, но теперь само значение счётчика и установка обработчика на клик находятся прямо в ней. Это как раз то место, где мы описываем конечный результат.
Весь код находится внутри функции App. В React она и другие похожие функции называются компонентами. Компонент — это фрагмент интерфейса, который содержит разметку и, при необходимости, связанную с ней логику. Все React-приложения строятся на компонентах. При этом сам компонентный подход появился задолго до React, но здесь его совместили с декларативностью.
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Parcel Sandbox</title>
5 <meta charset="UTF-8" />
6 </head>
7
8 <body>
9 <div id="root"></div>
10
11 <script
12 src="https://unpkg.com/react@17/umd/react.development.js"
13 crossorigin
14 ></script>
15 <script
16 src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
17 crossorigin
18 ></script>
19 <script
20 src="https://unpkg.com/@babel/standalone@7.13.6/babel.min.js"
21 crossorigin
22 ></script>
23
24 <script type="text/babel">
25 function App() {
26 const [value, setValue] = React.useState(0);
27
28 function increment() {
29 setValue(value + 1);
30 }
31
32 return (
33 <div className="app">
34 <h1>{value}</h1>
35 <button onClick={increment}>+1</button>
36 </div>
37 );
38 }
39
40 ReactDOM.render(
41 <div>
42 <App />
43 </div>,
44 document.getElementById("root")
45 );
46 </script>
47 </body>
48</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 или что-то другое.