Введение в React

Что такое React. Первое приложение

React - это библиотека JavaScript, которая используется для создания пользовательского интерфейса, в частности одностраничных приложений, где контент обновляется динамически, не требуя полной перезагрузки страницы. React значительно позволяет разработчикам создание динамических и интерактивных веб-приложений. Первый релиз библиотеки увидел свет в марте 2013 года. И с тех пор React стал одним из наиболее широко используемых инструментов для разработки интерфейса. Текущей версий на данный момент (март 2025 года) является версия React v19.0.

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

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

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

Виртуальный DOM

Вся структура веб-страницы может быть представлена с помощью DOM (Document Object Model)- организация элементов html, которыми мы можем манипулировать, изменять, удалять или добавлять новые. Для взаимодействия с DOM применяется язык JavaScript. Однако когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с объектами JavaScript, то операции производились бы быстрее.

Для решения проблемы производительности как раз и появилась концепция виртуального DOM (или Virtual DOM). Виртуальный DOM представляет легковесную копию обычного DOM. В отличие от традиционного DOM, который напрямую управляет структурой веб-страницы, виртуальный DOM представляет собой представление реального DOM в памяти. И отличительной особенностью React является то, что данная библиотека работает именно с виртуальным DOM, а не обычным.

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

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

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

Другие особенности React

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

Еще одна особенность React - использование JSX. JSX представляет комбинацию кода JavaScript и XML и предоставляет простой и интуитивно понятный способ для определения кода визуального интерфейса.

React развивается как открытый проект, и все сайты библиотеки доступны на репозитории на github. Кроме того, при изучении Reacta также будет полезен официальный сайт с документацией - https://reactjs.org/, где можно найти всю информацию по библиотеке.

Преимущества React

• Декларативный синтаксис: React упрощает разработку пользовательского интерфейса с помощью декларативного кода, который позволяет разработчикам проще описать, как должен выглядеть пользовательский интерфейс на основе состояния приложения

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

• Виртуальный DOM: React повышает производительность и минимизирует ненужные вычисления

• Однонаправленный поток данных: односторонняя привязка данных React обеспечивает предсказуемый и управляемый код, что упрощает отладку

• Богатая экосистема: благодаря таким инструментам, как React Router, Redux и обширной библиотеке сторонних компонентов, React обладает высокой расширяемостью, предоставляя функционал для различных ситуаций

• ​Кроссплатформенная разработка: React Native - библиотека, которая базируется на React, позволяет разработчикам создавать мобильные приложения, используя те же принципы и подходы

• Широкое распространение, большое сообщество, благодаря чему разработчики могут получить доступ к бесчисленным руководствам, плагинам и форумам, что упрощает обучение и решение задач

• Непрерывное развитие: команда разработчиков React постоянно внедряет новые функции и улучшения, выпускает новые версии. Эта приверженность инновациям гарантирует, что React остается передовым инструментом для веб-разработки.

Экосистема React

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

• React Core Library (Основная библиотека React). В основе экосистемы лежит React Core Library, которая предоставляет основные строительные блоки для создания компонентов, управления состоянием и визуализации пользовательского интерфейса. Модульная природа React позволяет ему легко интегрироваться с другими инструментами, выступая в качестве основы для экосистемы.

• Библиотеки управления состоянием. Управление состоянием приложения является критически важным аспектом современной веб-разработки, и React предлагает несколько решений:

  • Redux: популярная библиотека управления состоянием, которая предоставляет централизованное хранилище для данных приложения. Redux упрощает обновления состояния и обеспечивает согласованность между компонентами.

  • Context API: встроенная функция React для управления глобальным состоянием без использования сторонних библиотек

  • React Query: инструмент для управления состоянием на стороне сервера, обработки кэширования и эффективной синхронизации данных с API.

• React Router - Это библиотека для реализации маршрутизации.

• Решения по стилизации. Экосистема React предлагает множество инструментов для стидизации:

  • Библиотеки CSS-in-JS (например, Styled Components и Emotion) позволяют разработчикам вставлять CSS непосредственно в JavaScript

  • Модули CSS предоставляют модульный подход к стилизации

  • Такие библиотеки, как Tailwind CSS и аналогичные инструменты, предоставляют предварительно разработанные служебные классы для быстрой разработки пользовательского интерфейса.

• Фреймворки и расширения. Такие фреймворки, как Next.js и Gatsby, расширяют возможности React, обеспечивая расширенные функции. Так, Next.js предлагает рендеринг на стороне сервера, генерацию статического сайта и маршрутизацию. Gatsby представляе генератор статического сайта, оптимизированный для создания быстрых веб-сайтов с контентом.

• Инструменты разработки. Экосистема React включает инструменты для повышения производительности разработчиков:

  • Расширение браузера для проверки компонентов React и отладки приложений.

  • Storybook: инструмент для разработки и тестирования компонентов пользовательского интерфейса в изоляции.

  • CodeSandbox: онлайн-среда IDE для прототипирования приложений React.

• Фреймворки для тестирования:

  • Библиотека тестирования React: фокусируется на тестировании поведения приложения с точки зрения пользователя

  • Jest: фреймворк для создания модульных и интеграционных тестов

  • Cypress: идеально подходит для сквозного тестирования приложений React

• Библиотеки анимации. Для добавления динамических эффектов экосистема предлагает такие библиотеки, как:

  • Framer Motion: мощная библиотека для создания анимаций и переходов

  • React Spring: библиотека анимации на основе физики для плавного движения

Начало работы с React

Создадим простейшее приложение. Для этого определим на жестком диске для проекта новую папку для файлов проекта, и добавим в эту папку новый файл index.html со следующим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script type="module">
        // импортируем модули React 19 из ESM CDN
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
      
        const rootNode = document.getElementById("app");    // элемент для рендеринга приложения React
        // получаем корневой элемент 
        const root = ReactDOM.createRoot(rootNode);
        // создаем заголовок - элемент h1
        const element = React.createElement("h1", null, "Hello METANIT.COM");
        // рендеринг в корневой элемент
        root.render(element);
   </script>
</body>
</html>

Подключить функционал React для его дальнейшего использования мы можем различными способами. В данном случае используем самый простой - подключение модулей React из CDN, при котором нам дополнительно ничего не надо делать, настраивать. И так как мы используем модули JavaScript, то весь код помещается в элемент <script> с атрибутом type="module".

В данном случае для работы с React нам необходимо два модуля, которые мы импортируем из ESM CDN:

// импортируем модули React 19 из ESM CDN
import React from "https://esm.sh/react@19?dev";
import ReactDOM from "https://esm.sh/react-dom@19/client?dev";

Модуль React представляет базовую функциональность библиотеки react.js, а модуль ReactDOM нужен для работы со структурой DOM на веб-странице. Стоит отметить, что в данном случае подключаются неминимизированные версии модулей, предназначенные специально для целей разработки - их адрес заканчиваются на ?dev. Они могут упростить отладку приложения. Но также мы могли бы использовать минимизированные версии для полноценного развертывания:

import React from "https://esm.sh/react@19";
import ReactDOM from "https://esm.sh/react-dom@19/client";

Рендеринг элемента на веб-странице разбивается на три этапа. Вначале нам надо установить элемент веб-страницы, в который будет производиться рендеринг приложения React. Для этого применяется метод ReactDOM.createRoot(). В него передается элемент веб-страницы, в котором будет производиться рендеринг. В данном случае это элемент <div id="app">

const rootNode = document.getElementById("app");    // элемент для рендеринга приложения React
// получаем корневой элемент 
const root = ReactDOM.createRoot(rootNode);

На втором этапе определяем элеменнт, который мы хотим отобразить на веб-странице:

const element = React.createElement("h1", null, "Hello METANIT.COM");

Для определения элемента применяется встроенная функция React.createElement(), в которую передаем тег элемента для создания (в нашем случае это элемент <h1>, то есть заголвоок), настройки свойств элемента (здесь null - не используется) и содержимое элемента (здесь простой текст "Hello METANIT.COM"). То есть создаем заголовок <h1> с некоторым текстом.

На третьем этапе собственно производится рендеринг. Для этого вызывается метод render(). В этот метод передается выше созданный элемент:

root.render(element);

Просто кинем страницу в браузер и увидим заголовок: