Как использовать React DOM в проекте

Главная

База знаний

react

Основы

28 августа 2025

Автор

Олег Марков

Введение

React стал выбором номер один для создания пользовательских интерфейсов благодаря своей гибкости и ясной архитектуре. Но если вы только начинаете изучать его экосистему, важно разобраться не только с самим React, но и с “двигателем рендеринга” — React DOM. Эта библиотека связывает React-компоненты с реальным деревом DOM в браузере, позволяя отображать интерфейс на экране пользователя. Без React DOM прикладной код оставался бы абстракцией, неспособной отобразиться визуально.

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

Установка и подключение React DOM

Как подключить React DOM к проекту

Если вы создаёте проект с помощью Create React App, Vite или другой сборки, React DOM обычно ставится вместе с React по умолчанию. Но если вы собрались добавить его вручную, выполните команду:

npm install react-dom

Теперь React DOM будет доступен для импорта в файлах вашего проекта.

Структура файла и точка входа

В классических React-приложениях точкой входа обычно является файл с названием index.js или main.jsx. В этом файле вы подключаете React, React DOM и ваш главный компонент приложения. Например:

// Импортируем React и ReactDOM
import React from 'react'
import ReactDOM from 'react-dom/client'

// Импортируем корневой компонент приложения
import App from './App'

// Получаем корневой DOM-элемент из HTML-документа
const rootElement = document.getElementById('root')

// Создаём корневой рендерер (начиная с React 18)
const root = ReactDOM.createRoot(rootElement)

// Монтируем приложение в DOM
root.render(<App />)

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

Где искать корневой DOM-элемент?

Обычно в вашем public/index.html есть элемент с id="root". Именно туда React DOM монтирует ваше приложение.

<!-- index.html -->
<body>
  <div id="root"></div>
</body>

Если вы захотите изменить точку подключения приложения — достаточно поменять id или добавить другой элемент и указать его в getElementById.

React DOM предоставляет методы для рендеринга React-компонентов в DOM-дерево браузера. Правильное использование React DOM позволяет создавать эффективные и отзывчивые пользовательские интерфейсы. Если вы хотите детальнее погрузиться в особенности работы с React DOM и узнать, как оптимизировать рендеринг React-приложений — приходите на наш большой курс Основы React, React Router и Redux Toolkit. На курсе 177 уроков и 17 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Основные задачи и возможности React DOM

Рендеринг компонентов

Классическая задача React DOM — вывести приложение или отдельный компонент в DOM.

Пример: рендеринг корневого компонента

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

// Получаем DOM-элемент для рендеринга
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

В этом примере App — ваш главный компонент, в котором строится всё приложение.

Рендеринг отдельного компонента

Если вам нужно динамически отобразить какой-то компонент в другой части DOM (например, всплывающее окно вне основного дерева), вы также можете использовать ReactDOM для рендеринга:

import ReactDOM from 'react-dom/client'
import Modal from './Modal'

// Получаем контейнер для модального окна
const modalContainer = document.getElementById('modal-root')
const modalRoot = ReactDOM.createRoot(modalContainer)
modalRoot.render(<Modal />)

Методы ReactDOM

createRoot и hydrateRoot

ReactDOM.createRoot(domNode) — создаёт root-менеджер для дерева, рекомендовано для современных SPA.
ReactDOM.hydrateRoot(domNode, <App />) — применяется, если делается Server-Side Rendering (SSR), чтобы “гидратировать” заранее сгенерированную разметку.

Примеры базового использования

// Клиентский рендеринг для SPA
const root = ReactDOM.createRoot(rootElement)
root.render(<App />)

// Гидратация существующего DOM после SSR
ReactDOM.hydrateRoot(rootElement, <App />)

Устаревшие методы (React 17 и ниже)

Ранее использовали метод ReactDOM.render, но начиная с React 18 для новых проектов его не рекомендуют.

// Старый способ - не используйте в свежих проектах!
ReactDOM.render(<App />, document.getElementById('root'))

Перемонтирование и размонтирование

Размонтирование компонентов

Если вам нужно удалить компонент (например, закрыть всплывающее окно), используйте метод unmount():

const modalRoot = ReactDOM.createRoot(document.getElementById('modal-root'))
modalRoot.render(<Modal />)

// Позже, чтобы убрать модалку
modalRoot.unmount()

Это освободит память и удалит слушатели событий, связанные с компонентом.

ReactDOM и управление DOM напрямую

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

Для этого используйте рефы:

import { useRef, useEffect } from 'react'

function FocusInput() {
  const inputRef = useRef(null)

  useEffect(() => {
    // Даем фокус когда компонент смонтирован
    inputRef.current.focus()
  }, [])

  return <input ref={inputRef} />
}

В этом случае нет необходимости напрямую пользоваться React DOM, но важно понимать, что React DOM помогает управлять этими элементами через API React.

ReactDOM в современных проектах: best practices

Где размещать рендеринг через React DOM

Используйте React DOM только в самом корне приложения или при работе с порталами или микрофронтендами.
Не рендерьте компоненты через ReactDOM в дочерних компонентах — для вложения достаточно использовать JSX внутри самого React.

Порталы

ReactDOM позволяет “рендерить” компонент вне основного DOM-дерева — прямо в нужный вам контейнер. Это полезно, когда делаете модалки, поповеры, тултипы.

import { createPortal } from 'react-dom'

// Контейнер для порталов
const modalRoot = document.getElementById('modal-root')

function Modal({ children }) {
  return createPortal(children, modalRoot)
}

Теперь ваш компонент Modal будет находиться в div#modal-root, даже если он вложен глубоко в структуре приложения. Это облегчает стилизацию и обработку событий.

Управление несколькими корнями

Современный React DOM (createRoot) поддерживает множественные корни, если нужно встроить React-виджеты в разные части страницы (например, отдельный чат-виджет на старом сайте):

const elem1 = document.getElementById('widget1')
const elem2 = document.getElementById('widget2')

const root1 = ReactDOM.createRoot(elem1)
const root2 = ReactDOM.createRoot(elem2)

root1.render(<Widget prop="one" />)
root2.render(<Widget prop="two" />)

Этот подход удобно использовать при постепенной миграции большого проекта на React.

Ошибки и диагностика

Наиболее частые проблемы

root node не найден — убедитесь, что id, который вы используете в getElementById, действительно существует в HTML.
ReactDOM.render is not a function — ошибка появляется, если используете устаревшие методы с новой версией React.
Компоненты не отображаются — проверьте, что передаёте корректный компонент, а точка рендеринга присутствует в DOM.

Проверка совместимости версий

Обязательно используйте совместимые версии react и react-dom, иначе можете получить странные баги или предупреждения.

npm list react react-dom

Они должны иметь одинаковые версии (например, react@18.x и react-dom@18.x).

Частые практические ситуации

Нужно встроить React в существующий сайт

Добавьте React DOM и создайте контейнер, куда можно будет монтировать компонент. Пример для Rails/WordPress или другого “классического” сайта:

<div id="react-widget"></div>

import ReactDOM from 'react-dom/client'
import Widget from './Widget'

const el = document.getElementById('react-widget')
const root = ReactDOM.createRoot(el)
root.render(<Widget />)

Миграция с React 17 на React 18

Замените ReactDOM.render() на ReactDOM.createRoot().render().
Проверьте, что всё приложение соответствует требованиям StrictMode (это повысит устойчивость кодовой базы).

Гидратация для server-side rendering (SSR)

Если делаете SSR с помощью фреймворков типа Next.js, инструкция обычно выглядит так:

import { hydrateRoot } from 'react-dom/client'

hydrateRoot(document.getElementById('root'), <App />)

Это позволит реиспользовать уже сгенерированную на сервере HTML-разметку и сделать её интерактивной без повторного рендера.

Заключение

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

React DOM является важной частью процесса рендеринга, но не единственной. Для создания сложных приложений необходимо также уметь управлять состоянием, организовывать роутинг и взаимодействовать с сервером. Все эти темы подробно рассматриваются на курсе Основы React, React Router и Redux Toolkit. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в основы React уже сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как правильно размонтировать приложение при навигации между страницами в не-Single Page Application?

Если страница полностью перезагружается, React сам удаляет всё с помощью стандартных браузерных механизмов. Для динамического размонтирования вызовите метод unmount() у созданного root-объекта:

// Размонтирование приложения
myRoot.unmount()

Как рендерить компонент React во всплывающее окно (window.open)?

Создайте корневой элемент в новом окне и используйте createRoot для рендеринга:

const win = window.open('', '', 'width=400,height=400')
const div = win.document.createElement('div')
win.document.body.appendChild(div)
const root = ReactDOM.createRoot(div)
root.render(<YourComponent />)

Можно ли монтировать разные приложения React на одной странице?

Да, просто создайте необходимое количество контейнеров (div с разными id) и вызовите createRoot и render для каждого из них.

Почему появляется ошибка “Target container is not a DOM element”?

Чаще всего такой контейнер отсутствует в DOM на момент рендера. Проверьте правильность id и что элемент уже загружен в DOM (например, вызывайте рендеринг после события DOMContentLoaded, если скрипт подключён в <head>).

Как использовать ReactDOM в тестах?

Для unit-тестирования React-компонентов используйте библиотеки типа @testing-library/react, где за кулисами создается изолированный контейнер через ReactDOM. В самих тестах обычно не требуется вызывать методы ReactDOM вручную.