React – обзор

3 самых популярных фреймворка для JavaScript – это React, Vue и Angular. Vue и Angular действительно являются фреймворками, а вот React называют фреймворком ошибочно, потому что это – библиотека. Разница, на самом деле, не очень велика, потому что React «оброс» паттернами и методологиями, но определенные отличия все же есть – ниже мы расскажем как о них, так и в целом о React: что это, зачем он нужен, почему он стал таким популярным и как его учить.

React.js – что это

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

• Библиотека. Содержит ряд методов, выполняющих какие-либо функции. Если вам что-то нужно – обращаетесь к методу библиотеки, получаете результат, используете его как хотите.
• Фреймворк. Содержит не только методы, выполняющие функции, но и готовый «каркас» приложения, который вы обязательно должны использовать.

Фреймворки ускоряют разработку, потому что вам просто нужно добавить бизнес-логику в готовый каркас, но если вы захотите выйти за пределы рамок фреймворка – это будет крайне сложно; библиотека не дает вам каркас, но и не ограничивает в использовании ее инструментов. React – это библиотека, то есть в теории вы можете использовать ее так, как хотите. На практике вокруг React уже давно сформировались «правила хорошего использования», так что некоторые элементы фреймворка у библиотеки тоже есть – если вы придете на проект и будете писать код без учета этих правил, вам быстро объяснят, что так делать не нужно.

С библиотекой разобрались, переходим к «разработке пользовательского интерфейса». Здесь все просто – React позволяет быстро создавать пользовательские интерфейсы. Во многом Реакт стал популярен из-за связки «модульность + декларативность» – ниже объясним, что это. React позволяет создавать интерфейсы любой сложности, при этом их поддержка занимает меньше времени и сил, чем поддержка интерфейсов, написанных на чистом JS или с помощью других библиотек – в том числе из-за этого React и стал таким популярным. К слову, возможности React выходят за рамки браузеров – библиотека позволяет с такой же легкостью создавать графические интерфейсы мобильных приложений

Особенности библиотеки

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

Языки программирования и их производные (в том числе фреймворки/библиотеки) обычно предлагают на выбор один из двух подходов к разработке – императивный или декларативный:

• Императивный – это когда мы кодом пошагово объясняем, что нужно сделать для получения результата: «свяжись с DOM-деревом и его элементами; создай блок div; создай кнопку; получи в таком-то файле ее стиль; повесь событие onclick; создай глобальную переменную для подсчета кликов; …».
• Декларативный – это когда мы описываем, что нам нужно, а детали реализации оставляем на откуп инструменту: «мне нужна кнопка со счетчиком вот здесь».

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

Модульность

React оперирует компонентами – отдельными сущностями, размещенными на странице. Компонентом может быть как отдельная кнопка, так и вся страница в целом. Что важно: компоненты изолированы друг от друга, даже если они имеют общего «родителя». Из-за этого упрощается чтение чужого кода и ускоряется поиск багов: если вы читаете чужой код, вам достаточно ознакомиться с теми компонентами, которые вас интересуют; если вы ищете баг у кнопки на странице, его нужно искать конкретно в описании компонента «кнопка», а не где-то среди 50 файлов скриптов.

Однонаправленная передача данных

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

Использование виртуального DOM

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

JSX

Для создания разметки React использует JSX – разметку, похожую на HTML, но с более жесткими правилами и дополнительными возможностями. К JSX придется привыкнуть, но в больших проектах строгость описания сыграет вам на руку.

Хуки

«Общение» между компонентами в React может организовываться как через стандартные классы JavaScript, так и через хуки – специальные функции, которые позволяют передавать данные (состояние). Хуки существенно уменьшают количество кода при сохранении логики.

Кто пользуется – кому нужен React

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

Для чего нужен Реакт

В каких проектах его чаще всего используют:

1. Средних и крупных. Поскольку Реакт построен на изолированных друг от друга компонентах, проекты на нем крайне удобно масштабировать, а масштабирование – основная головная боль больших проектов. Кроме того, React – известная технология, и найти человека в команду будет проще.
2. Проектах с легаси. Легаси приходится расширять и время от времени переписывать. React отлично подходит для обеих задач – ввиду модульности он позволяет постепенно внедрять новые фичи, не ломая логику старых.

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

Как выглядит код?

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

import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
}
export default Counter;

Здесь мы создаем компонент Counter, который с помощью хука useState получает от родителя счетчик и метод работы с ним, после чего рендерит с помощью JSX блок div с кнопкой, к которой привязан метод работы со счетчиком. Вы можете вставить на страницу столько кнопок, сколько хотите – у каждой будет свой блок div и свой внутренний счетчик.

Что почитать и посмотреть по теме – для дальнейшего изучения

Если вам нужны знания по конкретному аспекту React – все можно найти в Ютубе (желательно искать источники на английском). Если же вы вообще ничего не знаете и хотите получить базу – стоит начать с официальных источников Реакта. На react.dev есть раздел «Learn», который пошагово проведет вас по всему Реакту (частично переведенный вариант можно найти здесь). Еще одну частично переведенную документацию можно найти тут, интерактивный туториал (включающий создание пары проектов с нуля без предварительных знаний) вы можете найти здесь.

Неплохой ресурс для отслеживания собственных знаний – roadmap.sh, раздел по Реакту находится тут. Есть детальный план обучения, есть квизы по React и JS. Если не работали с JavaScript раньше, то сначала посмотрите, какие шаги нужно пройти в роадмапе «JavaScript» – вам нужно пройти все до библиотек/фреймворков.

Курсы на Сравни

Если вы хотите получить структурированное и полное образование + обучаться с ментором – вам нужны курсы. Вот какие курсы конкретно по React можно найти на Сравни:

• «React-разработчик с нуля» от SkyPro, длительность – 15 месяцев.
• «Онлайн-курсы React JS» от Международной Школы Профессий, длительность – 1 месяц.
• «React и Redux Toolkit (с наставником)» от Purple School, длительность – 2 месяца.
• «React-разработчик» от Яндекс.Практикума, длительность – 3 месяца.

Курсы выше подойдут тем, кто уже умеет работать с JS на фронтенде и хочет расширить свои знания (кроме первого курса от SkyPro, он подходит всем). Если вы еще не фронтендер, вам нужны полные курсы, в которых будет рассматриваться JS, React, REST API и другие нужные вам технологии. Некоторые из курсов, которые можно найти на Сравни:

• «Frontend-разработчик» от Нетологии, длительность – 11 месяцев.
• «Fullstack-разработчик» от Хекслета, длительность – 16 месяцев.
• «Frontend-разработчик» от SkillFactory, длительность – 9 месяцев.
• «Frontend-разработчик» от GeekBrains, длительность – 9 месяцев.
• «Фронт-енд разработчик (Junior)» от LevelUp, длительность – 5.5 месяцев.

Плюсы и минусы Реакт

Плюсы:

• У Реакта – открытый исходный код. Это значит, что: его можно использовать на любых проектах; библиотека не изменится за день до неузнаваемости; за доступ к ней никогда не придется платить.
• На старте можно не учить дополнительные технологии. Обычно фреймворки заставляют вас учить не только фреймворк, но и окружающие его технологии (пресловутый jQuery, например). С React все проще – из дополнительных технологий вам нужно будет знать только JSX, все остальные взаимодействия с библиотекой вы описываете на pure JS.
• У библиотеки – большое комьюнити. Для вас это означает то, что и ответ на любой вопрос, и любой гайд вы без проблем найдете в сети.
• Код на React легко писать. Как мы уже говорили, библиотека вводит декларативность – вам нужно на высоком уровне абстракции описать, что и где вы хотите поместить, а библиотека сделает всю низкоуровневую работу за вас.
• Код на React легко поддерживать. Поскольку пользовательский интерфейс на React – модульный, при изменении какого-то элемента вы работаете с конкретным модулем, не касаясь остальных частей интерфейса.

Минусы Реакта – это та цена, которую приходится платить за плюсы:

• Библиотека увеличивает вес приложения. Логично, что для того, чтобы пользоваться библиотекой в приложении, вам нужно эту библиотеку загрузить – а она имеет вес. Это значит, что ваше приложение будет медленнее передаваться по сети.
• Приложения на Реакт едят больше ресурсов. Декларативность библиотеки обеспечена виртуальным DOM, а виртуальный DOM нуждается в ресурсах железа для своей работы – поэтому приложения на Реакте едят больше процессора и оперативной памяти (а при плохо написанном коде могут вообще крашить браузер на слабых устройствах).
• Учить Реакт – довольно сложно. Поскольку библиотекой пользуется большое количество людей, в комьюнити сформировался негласный code style, которого вам придется придерживаться. Проблема – в том, что этот code style нужно собирать по кусочкам, а иногда – методом проб и ошибок на code review. Курсы, к слову, устраняют эту проблему.

Как начать пользоваться

Если вы хотите написать простое приложение, проще всего установить React через Node.js (точнее – через менеджер пакетов npm). Для начала почитайте детальный гайд по установке Node.js и npm от Microsoft – гайд и описывает шаги установки, и отвечает на частые вопросы. После того, как npm установлен, вам нужно написать в командной строке:

npm install react react-dom

, что локально установит вам React. После этого можно начинать писать приложения – вот в этом гайде рассказывается, что нужно делать. Больше всего вас интересует раздел про Tic-Tac-Toe, но его, к сожалению, на русский не перевели. Если вам захочется написать что-нибудь более прикладное – воспользуйтесь туториалом, ссылку на который мы уже давали выше.

Вывод

Тезисно:

• React – популярная библиотека для создания пользовательских интерфейсов.
• React работает на чистом JS, единственная дополнительная технология, которую вам нужно будет выучить – специальный язык разметки, JSX.
• Во многом React завоевал популярность из-за модульности и декларативности.
• У библиотеки есть свои минусы – довольно сложно учить, замедляет приложение и делает его немного более тяжелым.
• Проще всего учить React на курсах, если сначала хотите «пощупать» его самостоятельно – воспользуйтесь одним из официальных туториалов.