Работает ли React только в браузере

React: Где он работает и как выходит за рамки браузера

Хотя React был создан и стал знаменитым как библиотека для построения пользовательских интерфейсов в веб-браузерах, его экосистема давно вышла за эти границы. React сегодня — это универсальная библиотека для декларативного описания UI, которая может рендериться в различных "окружениях" (render targets), благодаря своей архитектуре и активному сообществу.

Давайте разберем основные среды, где React может работать.

Основные среды выполнения React

1. Веб-браузеры — классическая сфера

Это основное и самое распространенное место использования React. Здесь он рендерит UI в DOM (Document Object Model).

// Классический пример компонента для браузера
function WelcomeMessage({ name }) {
  // Этот компонент будет преобразован в реальные DOM-элементы
  return <h1>Привет, {name}!</h1>;
}

2. React Native — мобильные приложения

Это полноценная платформа для разработки нативных мобильных приложений на iOS и Android. React описывает UI, но вместо DOM он рендерит в нативные компоненты платформы (View, Text, Image).

// Пример компонента React Native
import { Text, View } from 'react-native';

function MobileButton({ label }) {
  // Этот <Text> станет нативным текстовым элементом iOS/Android
  return (
    <View>
      <Text>{label}</Text>
    </View>
  );
}

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

3. Серверный рендеринг (SSR) с Node.js

React может рендериться на сервере в строку HTML с помощью react-dom/server. Это используется для:

• Ускорения первоначальной загрузки страницы (пользователь сразу видит контент).
• SEO — поисковые краулеры получают готовый HTML.
• Генерации статических сайтов.

// Пример серверного рендеринга с использованием Express.js
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  // Рендерим React-приложение в строку HTML на сервере
  const html = renderToString(<App />);
  res.send(html);
});

4. React для других платформ и "окружений"

Благодаря абстрактной модели React (Virtual DOM, компоненты, пропсы) были созданы адаптации для других сред:

• React VR/AR (ныне React 360) — для создания интерфейсов в виртуальной и дополненной реальности.
• React для командной строки (например, библиотеки ink) — позволяет строить интерактивные CLI-интерфейсы с помощью React компонентов.
• React для встраиваемых систем и IoT — существуют экспериментальные проекты.
• Skia и другие графические библиотеки — рендеринг React в низкоуровневые графические контексты, минуя DOM.

Ключевые архитектурные принципы, позволяющие это сделать

Возможность React работать в разных средах обусловлена несколькими факторами:

• Virtual DOM (или Fiber Tree). React работает не с реальной средой (DOM, нативными views), а с своей внутренней абстрактной представлением дерева компонентов. Эта абстракция затем передается специальному рендереру (renderer) для конкретной платформы.
• Парадигма "рендерера". react-dom — это рендерер для браузера. react-native — рендерер для мобильных платформ. Можно создавать свои рендереры, что и делают сторонние проекты. Самое ядро (react) отвечает только за управление компонентами, состоянием и жизненным циклом.
• Компонентная модель. Логика приложения, описываемая через компоненты и пропсы, остается единой и независимой от конечной платформы рендеринга.

Практический вывод для разработчика

Для разработчика это означает следующее:

• Знания React универсальны. Навыки работы с компонентами, хуками (useState, useEffect), контекстом, управлением состоянием применимы при переходе, например, на React Native.
• Выбор инструмента зависит от цели. Нужно веб-приложение — используем react-dom. Нужно мобильное приложение — react-native. Нужно статичный сайт или SSR — next.js (фреймворк на React).
• Производительность и оптимизация. На разных платформах действуют разные правила оптимизации. В браузере мы боремся с реflows и repaints DOM, в React Native думаем об обновлении нативных компонентов.

Итог

React — это не только библиотека для браузера. Это ядро (core library) для декларативного построения пользовательских интерфейсов, которое благодаря своей архитектуре может быть подключено к различным рендерерам, отвечающим за отображение этого интерфейса в конкретной платформе: браузерном DOM, нативных мобильных компонентах, HTML-строке на сервере или даже в командной строке. Это делает React чрезвычайно гибким и универсальным инструментом в современной разработке интерфейсов.