Что такое React.js и как его использовать

Главная

База знаний

react

Основы

28 августа 2025

Автор

Алексей Чернов

Введение

React.js — это популярная JavaScript-библиотека для создания пользовательских интерфейсов. Она разработана компанией Facebook* и широко используется для построения динамических одностраничных приложений (SPA). Главное преимущество React — компонентный подход, позволяющий разбивать интерфейс на независимые, повторно используемые элементы. React работает с виртуальным DOM, что делает обновление интерфейса быстрым и эффективным.

Организация Meta, а в частности её продукты Instagram и Facebook, признаны экстремистскими на территории РФ.

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

Что такое React.js

React.js — это библиотека, а не фреймворк. Это значит, что он фокусируется на отображении данных, а не на построении архитектуры всего приложения. Основные задачи, которые React решает лучше всего:

Динамическое изменение интерфейса без перезагрузки страницы
Создание масштабируемых компонентов
Повторное использование кода
Организация кода и повышение читаемости проектов

React оперирует понятием "компонент" — самостоятельного блока, описывающего логику и внешний вид части интерфейса.

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

Главные особенности React.js

JSX — расширение синтаксиса JavaScript, которое позволяет описывать, как должен выглядеть интерфейс в привычном HTML-подобном виде;
Виртуальный DOM — React обновляет только те части DOM, которые изменились, что ускоряет перерисовку;
Компонентный подход — весь интерфейс состоит из маленьких независимых модулей (компонентов);
Управление состоянием — каждая часть интерфейса может хранить собственное состояние или передавать его другим компонентам.

Установка и запуск первого приложения на React

Давайте посмотрим, как быстро запустить React-проект с помощью Create React App — официального способа быстро начать работу.

Шаг 1. Установка Node.js

Для начала убедитесь, что у вас установлен Node.js. Его можно скачать с https://nodejs.org/

Проверьте установку, выполнив в терминале:

node -v
npm -v

Так вы увидите версии Node.js и npm (менеджер пакетов для Node.js), которые потребуются для установки React.

Шаг 2. Создание React-приложения

Теперь в terminal выполните команду:

npx create-react-app my-first-react-app

npx — запускает пакет без глобальной установки
create-react-app — инструмент для создания React-проекта "под ключ"
my-first-react-app — имя папки и проекта

Шаг 3. Запуск приложения

Перейдите в папку проекта и запустите сервер:

cd my-first-react-app
npm start

Приложение откроется в браузере по адресу http://localhost:3000 и вы увидите стартовую страницу React.

Структура проекта в React

В большинстве случаев структура проекта, созданного через Create React App, выглядит следующим образом:

my-first-react-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── App.js
│   ├── index.js
│   ├── ...другие файлы
├── package.json

public/index.html — основной HTML-файл, куда React "вставляет" приложение.
src/App.js — корневой React-компонент.
src/index.js — точка входа, здесь подключается App и рендерится на страницу.

Теперь разберемся, как устроены компоненты в React.

Основы работы с компонентами React

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

Функциональные компоненты

Функциональные компоненты — самый распространенный и "легкий" способ создания компонента.

Пример простого функционального компонента:

// Файл: src/Hello.js

function Hello(props) {
  // props — объект с входными параметрами
  return (
    <h1>Привет, {props.name}!</h1> // Вывод имени из пропсов
  );
}

export default Hello;

Здесь мы определили компонент Hello, принимающий props (входные параметры).
С помощью JSX формируется разметка, отображающая приветствие.
Экспортируем компонент, чтобы использовать его в других частях приложения.

Теперь подключим этот компонент в файл App.js:

import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello name="Мир" /> {/* Передаем пропс name */}
    </div>
  );
}

export default App;

Классовые компоненты

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

Вот пример того же компонента, но на классе:

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    return (
      <h1>Привет, {this.props.name}!</h1>
    );
  }
}

export default Hello;

В большинстве случаев для создания новых компонентов стоит использовать функциональный подход.

JSX: Синтаксис для описания интерфейса

JSX выглядит, как HTML, но внутри JavaScript-кода. Это упрощает создание интерфейса и его связку с логикой.

const element = <h1>Здравствуй, React!</h1>; // элемент JSX

Вам не нужно отдельно писать код для шаблонов — логику и разметку можно совмещать.

Вставка JavaScript в JSX

Вы можете вставлять переменные и выражения:

const user = 'Алиса';

return <h2>Привет, {user}!</h2>; // Вставка значения переменной

Также поддерживаются условия и циклы через обычный JS:

const messages = ['React', 'Vue', 'Angular'];

return (
  <ul>
    {messages.map(msg => <li key={msg}>{msg}</li>)} // Перебор массива
  </ul>
);

Обратите внимание — для атрибутов в JSX, таких как class, используется className, а для событий, например, onclick — пишется как onClick (с заглавной буквы).

Состояния и хуки (State, Hooks)

Состояние компонента — это динамические данные, которые React отслеживает и при изменении которых перерисовывает соответствующую часть интерфейса.

Использование useState

React предлагает хук useState для работы с состояниями в функциональных компонентах.

Посмотрите, как это реализовать:

import { useState } from 'react';

function Counter() {
  // count — текущее значение, setCount — функция для обновления
  const [count, setCount] = useState(0); // начальное значение — 0

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

useState(0) создает состояние count и функцию для его изменения setCount.
При клике по кнопке вызывается setCount(count + 1) — данные обновляются, и компонент автоматически перерисовывается.
Такой подход делает поведение интерфейса предсказуемым и управляемым.

Другие полезные хуки

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

useEffect — хук для запуска кода при изменении состояния или Props (например, запрос к API при загрузке).
useContext — использование контекста для доступа к данным и функциям, не передавая их через Prop Drilling.
useRef — создание ссылок на DOM-элементы или сохранение значений между рендерами.

Пример использования useEffect:

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Выполняется при изменении userId
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // Зависимости — userId

  if (!user) return <div>Загрузка...</div>;

  return <div>Имя пользователя: {user.name}</div>;
}

Обработка событий

В React события работают почти как в обычном HTML, только их имена пишутся в формате camelCase, а обработчики передаются как функции.

Вот пример кнопки с обработчиком:

function AlertButton() {
  const handleClick = () => {
    alert('Кнопка нажата!');
  };

  return (
    <button onClick={handleClick}>Нажми меня</button>
  );
}

Вложенность и связь компонентов (Props)

Комплексы React-компонентов передают данные из родителя в дочерний компонент с помощью props.

Пример передачи props:

function Child({ message }) {
  return <div>{message}</div>;
}

function Parent() {
  return <Child message="Сообщение для ребенка" />;
}

Компонент Parent передает строку через проп message дочернему компоненту Child.
В Child доступен этот проп как переменная в параметрах функции.

Объединяя компоненты, состояния и props, вы строите эффективные, масштабируемые интерфейсы.

Работа со списками и ключами

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

Пример:

const users = [
  { id: 1, name: 'Алиса' },
  { id: 2, name: 'Боб' },
  { id: 3, name: 'Карина' }
];

function UsersList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>Имя: {user.name}</li> // ключ обязательно должен быть уникальным!
      ))}
    </ul>
  );
}

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

Жизненный цикл компонента

Если вам нужен контроль над этапами жизни компонента (монтирование, обновление, размонтирование) — используйте хук useEffect.

Монтирование — компонент появляется в DOM.
Обновление — изменяются prop или state, происходит повторный рендер.
Размонтирование — компонент удаляется из DOM.

Пример "эмуляции" componentDidMount / componentWillUnmount с помощью useEffect:

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timerId = setInterval(() => {
      console.log('Тик');
    }, 1000);

    // Очистка при удалении компонента
    return () => clearInterval(timerId);
  }, []); // Зависимости — пустой массив

  return <div>Таймер идет...</div>;
}

Здесь эффект будет запущен один раз при монтировании, и таймер очистится при размонтировании компонента.

Маршрутизация (React Router)

Создавая одностраничные приложения, часто нужно показывать разные компоненты по разным адресам (routes). Для этого используется библиотека React Router.

Установка React Router

npm install react-router-dom

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

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Главная</h2>;
}

function About() {
  return <h2>О сайте</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Главная</Link> | <Link to="/about">О сайте</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

В этом примере разные компоненты отображаются по соответствующим путям.
Компонент Link создает навигационную ссылку, не перезагружая страницу.

Взаимодействие с внешними API

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

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.exemple.com/data') // Запрос к API
      .then(response => response.json())
      .then(json => setData(json)); // Сохраняем данные в состояние
  }, []); // Эффект выполняется один раз

  if (!data) return <div>Загрузка...</div>;

  return (
    <div>
      <h3>Данные с сервера:</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

После получения данных с помощью fetch результат сохраняется в state.
При следующем рендере данные автоматически отображаются в интерфейсе.

Подключение CSS и стилизация

React позволяет использовать разные способы оформления: простые CSS-файлы, CSS-модули, CSS-in-JS и т.д.

Простой пример подключения стилей:

import './App.css';

function App() {
  return (
    <div className="container">
      <h2 className="header">Пример стилизации</h2>
    </div>
  );
}

Вы импортируете CSS-файл и через prop className применяете стили к элементам.
Для более сложных проектов используют библиотеки styled-components или emotion.

Организация сложных приложений

По мере роста проекта возникает необходимость структурировать код. Вот несколько советов:

Делите функциональность на независимые компоненты
Используйте папки для группировки компонентов, утилит и стор (state)
Для глобального состояния используйте React Context или внешние библиотеки (Redux, MobX)
Следите за чистотой Props — не передавайте "лишние" данные

Когда стоит выбирать React.js

React отлично подходит для:

SPA любой сложности
Проектов с динамически изменяющимся интерфейсом
Приложений с большим количеством переиспользуемых компонентов
Когда требуется интеграция с другими библиотеками

Если проект небольшой и не требует сложных взаимодействий, можно рассмотреть альтернативы — например, Vue.js или даже чистый JavaScript.

Заключение

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

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

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

Как обновить props в дочернем компоненте?

Props всегда поступают сверху вниз и не могут быть изменены внутри дочернего компонента напрямую. Чтобы изменить prop, определите функцию-сеттер в родительском компоненте и передайте её дочернему, чтобы вызвать обновление state выше по иерархии:

function Parent() {
  const [value, setValue] = useState(0);

  return <Child value={value} changeValue={setValue} />;
}

function Child({ value, changeValue }) {
  return (
    <button onClick={() => changeValue(value + 1)}>
      Увеличить значение
    </button>
  );
}

Почему компонент рендерится слишком часто?

Чаще всего это связано с изменениями state или props внутри компонента или его родителей, либо с неправильным использованием useEffect (например, когда в массив зависимостей передаются изменяемые значения). Проверьте зависимости хука и убедитесь, что setState не вызывается без необходимости.

Как передать ref во вложенный компонент?

Если нужно получить доступ к DOM-элементу в дочернем компоненте, используйте React.forwardRef:

const Input = React.forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

Теперь ref, переданный через props, попадет к input.

Как отменить запрос или очистить side effect при размонтировании?

В хук useEffect верните функцию, которая будет вызвана перед размонтированием:

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal });
  return () => controller.abort();
}, []);

Как избежать "Prop drilling" и передавать состояние глубоко вложенным компонентам?

Используйте React Context — определите провайдер на верхнем уровне и используйте useContext в нужных дочерних компонентах:

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value={значение}>
      <Child />
    </MyContext.Provider>
  );
}

// В дочернем компоненте:
const value = useContext(MyContext);

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