React: что это

Что такое React и зачем он нужен

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

Названия React.js, React JS и ReactJS обычно означают одну библиотеку. JS здесь указывает на JavaScript. React не является отдельным языком программирования: функции, условия и работа с массивами остаются обычным JavaScript.

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

Где используют React

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

React можно добавить в готовый сайт: например, только в калькулятор. Подготовьте сборку JavaScript и отдельный контейнер для компонента. Остальную страницу переписывать не нужно.

Компоненты React: функции и повторное использование

Функциональный компонент React представляет собой функцию JavaScript, которая возвращает описание интерфейса. Он может содержать другие компоненты. Например, страница каталога включает панель фильтров и список, а список состоит из карточек.

Имя пользовательского компонента начинается с заглавной буквы: ProductCard или App. Стандартные теги пишутся строчными буквами. Так React отличает ваш компонент от встроенного элемента браузера.

Компонент удобно использовать повторно, передавая разные свойства. Одна карточка показывает название и изображение конкретного товара. Не нужно копировать всю разметку для каждой позиции каталога.

В старом коде React встречаются компоненты в виде классов. У них есть метод render и собственные способы работы с состоянием. Для знакомства с библиотекой удобнее функции: именно их использует современное руководство React.

JSX в React: разметка рядом с логикой

JSX является расширением синтаксиса JavaScript. Он позволяет писать похожую на HTML разметку внутри кода. Сам браузер не исполняет JSX: перед запуском инструмент сборки преобразует его в JavaScript.

Внутри JSX фигурные скобки позволяют вставлять выражения: имя пользователя, результат вычисления или обращение к свойству объекта. Например, заголовок может содержать название выбранного товара. Это связь разметки с данными, а не текстовая подстановка HTML.

В JSX соседние элементы одного возвращаемого выражения оборачивают общим родителем или фрагментом. Теги закрывают, включая одиночные. CSS-класс задают через className, связь подписи с полем через htmlFor.

Babel умеет преобразовывать JSX. Автоматический режим использует react/jsx-runtime, классический режим использует React.createElement. Другие сборщики тоже могут обрабатывать JSX.

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

• div объединяет элементы, h1 обозначает главный заголовок, button создаёт кнопку.
• const объявляет переменную, function задаёт функцию, return возвращает её результат.
• import подключает экспорт из другого модуля; from указывает, откуда его взять.
• Условие if располагают в JavaScript-коде; внутри JSX используют выражение, например тернарный оператор.
• Для вывода массива обычно подходит метод map, а каждому элементу списка нужен устойчивый key.

Props и state: данные компонентов React

Props, или свойства, передаются компоненту от родителя. Это могут быть строки, числа, объекты или функции. Например, ProductCard получает название товара, цену и обработчик добавления в корзину.

Компонент React не должен изменять полученные props. Родительский компонент передаёт новые значения при изменении данных. Такая однонаправленная передача помогает понять, где возникло изменение.

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

Когда компоненты зависят от одного значения, перенесите его к ближайшему общему родителю. Передайте данные и обработчик вниз через props. Дочерняя кнопка вызовет обработчик, родитель обновит состояние, React покажет результат.

После setCount переменная count в текущем обработчике остаётся прежней. Новое значение появится при следующем рендеринге. React объединяет обновления, поэтому повторные setCount(count + 1) используют одно исходное значение. Для последовательных прибавлений передавайте функцию setCount(previous => previous + 1).

Как React обновляет DOM

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

Рендеринг React означает вызов компонентов для вычисления результата. При изменении состояния могут выполняться и вложенные компоненты. Это не значит, что браузер заново создаёт все элементы страницы.

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

Термин «виртуальный DOM» используют для объяснения внутреннего представления интерфейса и сравнения результатов. Не стоит понимать его как полную копию страницы в браузере. Для работы с React важнее различать данные, вычисление разметки и применение изменений.

Не меняйте вручную содержимое узлов, которыми управляет React. Для фокуса предусмотрены ссылки ref: после подключения элемента его DOM-узел доступен через current. Изменение current само по себе не запускает рендеринг.

Пример React: кнопка со счётчиком

Ниже функциональный компонент React, который считает нажатия. Поместите его в src/App.jsx проекта из следующего раздела. Кнопка хранит собственное состояние и увеличивает число при каждом нажатии.

Строка import получает useState из пакета react. Вызов хука возвращает текущее значение count и функцию setCount. В начале счётчик равен нулю, потому что это значение передано в useState.

Обработчик handleClick передаётся в onClick без вызова. React запускает его после действия пользователя. Функция обновления получает предыдущее значение и возвращает следующее.

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previous => previous + 1);
  }

  return (
    <button onClick={handleClick}>
      Нажатий: {count}
    </button>
  );
}

Как создать и запустить React-приложение

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

Для локальной разработки установите Node.js и npm. Проверьте совместимость выбранной версии Node.js с требованиями Vite в его документации.

В терминале выполните команды ниже по очереди. Шаблон react создаёт проект на JavaScript; папка react-demo будет содержать его файлы. После запуска откройте локальный адрес, который напечатает терминал.

Create React App устарел и поддерживается в режиме сопровождения. Для нового проекта React рекомендует фреймворк или инструмент сборки.

1. Откройте папку проекта в редакторе и найдите src/App.jsx.
2. Замените демонстрационный компонент примером кнопки из статьи.
3. Сохраните файл и проверьте результат в браузере.
4. Добавьте второй компонент с приветствием «Hello world», затем передайте ему имя через props.
5. Измените CSS и сравните оформление с поведением: стили не заменяют логику React.

npm create vite@latest react-demo -- --template react
cd react-demo
npm install
npm run dev

Файлы проекта и подключение React DOM

App.jsx описывает содержимое, а main.jsx подключает React к странице. В других проектах встречаются имена App.js и index.js с такими же ролями.

В index.html должен быть контейнер с id root. Выражение document.getElementById находит этот DOM-узел. Если идентификатор написан иначе, подключение не сработает: сначала проверьте разметку и сообщение консоли.

Функция createRoot из react-dom/client создаёт корень React. Метод render получает компонент App. Для независимых виджетов допустимы отдельные корни. Фреймворк обычно управляет корнем сам.

Не путайте React и React DOM. Пакет react содержит основные средства работы с компонентами. Пакет react-dom обеспечивает их связь с браузерным DOM. Для другой платформы используется соответствующий способ отображения.

import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

События, формы и списки в React

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

Для управляемого поля React получает value и обработчик onChange, который обновляет состояние. Отдельная библиотека форм для обычного ввода не нужна.

У формы должны быть понятные подписи, сообщения об ошибке и состояние отправки. Продумайте также повторное нажатие и ответ сервера. Скрытая кнопка не заменяет проверку прав: сервер должен самостоятельно разрешать или отклонять действие.

Чтобы показать список, преобразуйте массив данных в элементы через map. Устойчивый key помогает React сопоставлять позиции при удалении и перестановке. Используйте идентификатор записи, если он есть, а не случайное значение при каждом рендеринге.

Вместо счётчика поместите следующий пример в App.jsx. Search получает значение и обработчик от родителя. Каталог хранит запрос, фильтрует товары и показывает пустой результат. Кнопка использует ref, чтобы вернуть фокус в поле.

import { useRef, useState } from 'react';

const products = [{ id: 'lamp', name: 'Лампа' }, { id: 'chair', name: 'Стул' }];

function Search({ value, onChange }) {
  const inputRef = useRef(null);
  return (
    <div>
      <label>
        Найти товар
        <input ref={inputRef} value={value}
          onChange={event => onChange(event.target.value)} />
      </label>
      <button type="button" onClick={() => inputRef.current?.focus()}>
        Перейти к поиску
      </button>
    </div>
  );
}

export default function App() {
  const [query, setQuery] = useState('');
  const found = products.filter(product =>
    product.name.toLowerCase().includes(query.trim().toLowerCase())
  );
  return (
    <section>
      <h1>Каталог</h1>
      <Search value={query} onChange={setQuery} />
      {found.length ? (
        <ul>{found.map(product => <li key={product.id}>{product.name}</li>)}</ul>
      ) : <p>Ничего не найдено</p>}
    </section>
  );
}

Хуки React и работа с внешними системами

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

useEffect синхронизирует React с внешней системой. Например, передаёт выбранный масштаб сторонней карте. Экземпляр виджета храните в ref, обновляйте через его API. Если подключаете подписку, верните функцию её отмены. React запускает очистку перед повторным эффектом с изменёнными зависимостями и при удалении компонента.

useState и useEffect вызывают на верхнем уровне компонента или собственного хука. Их нельзя помещать в условие или цикл. API use является исключением: его можно вызывать условно внутри компонента или хука. Подробности: справочник use.

React, фреймворки и серверная часть

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

Next.js и React Router входят в варианты, которые предлагает документация React для новых приложений. Фреймворк определяет дополнительные правила проекта. Перед выбором сравните способы получения данных, размещение сайта и требования к серверу.

React Router помогает связать адреса с содержимым приложения. Например, каталог, карточка и история заказов получают отдельные маршруты. Продумайте прямое открытие страницы по ссылке и возврат назад, а не только переходы через меню.

При клиентском рендеринге React строит интерфейс в браузере. SSR подготавливает HTML на сервере, статическая генерация делает это заранее. Гидратация подключает React к готовому HTML. Первый результат клиента должен совпадать с серверным.

Server Components выполняются вне браузера: на сервере или при сборке. Они могут читать базу данных и передавать результат клиентским компонентам. Их код не отправляется в браузер; useState и обработчики нажатий размещают в клиентской части. Это отдельная возможность, а не другое название SSR.

Потоковый SSR позволяет отправлять HTML частями. Suspense задаёт временное содержимое для ожидающего участка. Загрузка данных должна поддерживать Suspense: обычный запрос внутри useEffect сам по себе его не активирует.

React не заменяет базу данных и серверные правила. Запрос через API может вернуть список заказов, но доступ к чужому заказу должен запрещать сервер. Не переносите секреты и доверенные проверки в браузерный код.

Преимущества и ограничения React

Общие компоненты React сокращают повторение кода. Правка общей кнопки меняет её во всех местах использования.

Разработчикам всё равно нужно договориться о структуре проекта, загрузке данных и хранении состояния. Иначе компоненты становятся зависимыми друг от друга.

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

Версия React и чтение документации

На сентябрь 2026 года опубликован React 19.3.0. Официальный анонс датирован 9 сентября 2026 года. В нём описаны стабильные View Transitions и Fragment Refs, функция browser и поддержка Trusted Types.

Проверяйте, к какой версии относится руководство. Старый русскоязычный сайт показывает классовые примеры; современное обучение React начинается с функций и хуков.

Перед обновлением проверьте версию React в проекте, зависимости и рекомендации соответствующего выпуска. Затем проверьте основные действия пользователя. Не обещайте беспроблемный переход только потому, что меняется небольшой номер.

Как изучать React и проверять результат

Начните с JavaScript: функции, объекты, массивы, модули и асинхронные запросы. Затем повторите HTML-формы и CSS. Эта база поможет читать документацию React без постоянного переключения на объяснение синтаксиса.

После счётчика сделайте список с поиском. Передайте данные через props, добавьте управляемое поле и обработайте пустой результат. Такой пример показывает связь событий, состояния и отображения.

Проверяйте результат с точки зрения пользователя: что видно, что можно нажать и что произойдёт после действия. Для поиска причин используйте консоль браузера. React Developer Tools позволяет изучать дерево компонентов, их props и состояние.

Частые ошибки при разработке на React

Отдельно проверьте работу с клавиатуры и подписи полей. Компонентная структура React не заменяет доступную HTML-разметку. Для действия используйте кнопку, а для перехода по адресу используйте ссылку.

• Вызвать обработчик прямо при рендеринге вместо передачи функции в onClick.
• Изменить объект состояния напрямую и ожидать согласованного обновления интерфейса.
• Хранить вычисляемую сумму отдельно от корзины и забыть обновить её после удаления товара.
• Назначить случайный key и терять состояние элементов при повторном рендеринге.
• Добавить useEffect для каждого вычисления и получить лишние обновления.
• Оставить подписку без функции очистки.
• Считать скрытие элемента достаточной защитой данных.
• Выбирать React до описания задач и ограничений сайта.

Что подготовить перед заказом веб-приложения

Если вы выбираете React для бизнеса, начните с сценариев. Кто пользуется приложением, какие данные видит и что может менять? Укажите источники данных, нужные интеграции и страницы, доступные без входа.

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

seosite1 делает сайты с 2009 года и работает по России удалённо. Минимальный бюджет проекта от 50 тыс. ₽. Оплата по этапам, каждый этап вперёд. Выбор технологии стоит обсуждать вместе с задачей, а не отдельно от неё.