Как использовать элементы в React

Введение

Элементы — это фундаментальные строительные блоки React-приложений. Если вы только начинаете работать с React, то заметите, что вся ваша работа строится вокруг создания, комбинирования и отображения элементов. Но что же такое элемент и как с ним работать на практике? Здесь я расскажу, как создавать и использовать элементы в React, объясню отличие элементов от компонентов, приведу примеры их применения и дам практические советы для разработки динамических пользовательских интерфейсов.

Что такое элемент в React?

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

Вот ключевые особенности элементов в React:

• Элемент — это JavaScript-объект. Его нельзя напрямую отрендерить в DOM, а только передавать в ReactDOM, который превращает его в реальный DOM-узел.
• Элементы неизменяемы. Создав элемент, вы больше не можете его изменить. Вместо этого создавайте новый элемент при необходимости.
• Элементы могут быть любого типа. Это может быть тег (например, div, span, p), или ваш собственный компонент.

Давайте посмотрим, как выглядит элемент React изнутри:

const element = <h1>Hello, React!</h1>;
// Элемент — это не строка, не DOM-узел, а объект с информацией для будущего рендера

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

Как создавать элементы

JSX-синтаксис

В React чаще всего элементы описываются с помощью JSX (JavaScript XML — особый синтаксис, похожий на HTML, но внутри JS-кода).

Вот базовый пример:

const element = <h1>Привет, мир!</h1>;

Здесь создается элемент (не компонент!) типа h1. Внутри фигурных скобок можно использовать переменные или результаты выражений:

const name = 'Андрей';
const element = <h1>Привет, {name}!</h1>;
// Содержимое элемента будет зависеть от значения переменной name

Использование React.createElement

Под капотом JSX преобразуется в вызовы функции React.createElement:

const element = React.createElement(
  'h1',              // тип элемента — строка для стандартного тега
  { className: 'greeting' },  // props (атрибуты)
  'Привет, мир!'      // дочерний элемент (или несколько)
);

Это равнозначно JSX, который мы рассмотрели выше:

const element = <h1 className="greeting">Привет, мир!</h1>;

Комбинирование элементов

Вы можете вкладывать одни элементы внутрь других:

const element = (
  <div>
    <h2>Заголовок</h2>
    <p>Текст абзаца</p>
  </div>
);

Это обычный способ писать элементы в React-дереве. Смотрите, элементы могут содержать не только текст, но и другие элементы.

Использование элементов в компонентах

Отличие элементов и компонентов

• Элемент — объект, описывающий структуру будущего интерфейса.
• Компонент — функция (или класс), которая возвращает элемент(ы).

// Компонент-функция
function Welcome(props) {
  return <h1>Привет, {props.name}!</h1>;
}

// Использование компонента как элемента
const element = <Welcome name="Андрей" />;

Когда вы вызываете <Welcome name="Андрей" />, это создание элемента типа компонента, а не встроенного Html-тега.

Передача элементов как свойств (props)

Иногда бывает полезно передавать элементы как значения пропсов:

function Container(props) {
  return <div className="container">{props.children}</div>;
}

// Использование
<Container>
  <h2>Заголовок внутри контейнера</h2>
  <p>Абзац, который передается как children</p>
</Container>

Форма props.children — это универсальный способ вставлять элементы в ваши компоненты, делая их гибче и переиспользуемыми.

Ключевые свойства элементов

Атрибуты и props

Вы можете задавать любые стандартные HTML-атрибуты или кастомные свойства:

const image = <img src="logo.png" alt="React Logo" width={100} height={100} />;

Обратите внимание, что в JSX названия свойств пишутся в стиле camelCase (например, className, onClick, tabIndex).

Ключи (key) для списков

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

const items = ['яблоко', 'груша', 'слива'];

const list = (
  <ul>
    {items.map((item, index) => (
      <li key={item}>{item}</li>  // уникальный ключ для каждого элемента списка
    ))}
  </ul>
);

Это важно для правильной работы алгоритма обновления DOM.

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

Вы можете навешивать обработчики прямо на элементы:

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

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

Все обработчики событий передаются как функции через props.

Работа с динамическими и вложенными элементами

Выражения внутри JSX

Вы легко можете использовать любые выражения внутри фигурных скобок:

const user = { name: 'Мария', age: 27 };

const element = (
  <div>
    <h3>Пользователь: {user.name}</h3>
    <p>Возраст: {user.age}</p>
  </div>
);

Условный рендеринг

Часто нужно отображать элементы в зависимости от условий:

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <p>Добро пожаловать!</p> : <p>Пожалуйста, войдите в систему.</p>}
  </div>
);

Вы также можете возвращать null, если не хотите ничего отображать:

function Warning({ show }) {
  if (!show) return null;
  return <div className="warning">Внимание!</div>;
}

Генерация списков элементов

Если у вас есть массив данных, легко создать динамический список элементов:

const products = [
  { id: 1, name: 'Книга' },
  { id: 2, name: 'Ноутбук' },
  { id: 3, name: 'Телефон' },
];

// Динамическое создание элементов списка с помощью map
const list = (
  <ul>
    {products.map(product => (
      <li key={product.id}>{product.name}</li>
    ))}
  </ul>
);

Рендеринг элементов в DOM

Для веб-приложений (react-dom)

Чтобы отобразить элемент на странице, используется ReactDOM.render (или модернизированный createRoot в современных версиях React):

import React from 'react';
import ReactDOM from 'react-dom/client';

// Элемент, который хотим отобразить
const element = <h1>Мой первый React-элемент</h1>;

// Контейнер в реальном DOM
const root = ReactDOM.createRoot(document.getElementById('root'));

// Рендерим элемент в контейнер
root.render(element);

Для React 17 и ниже синтаксис был чуть проще:

ReactDOM.render(
  element,
  document.getElementById('root')
);

Обновление интерфейса

Если вы захотите изменить отображаемое содержимое, создайте новый элемент и передайте его в render. React сам обновит только те части DOM, которые изменились, используя свою систему сравнения элементов (Reconciliation).

Иммутабельность элементов и повторный рендеринг

Элементы в React не изменяются после создания. Если вы хотите "обновить" элемент — создайте новый, и React выполнит разницу между текущим и новым деревом. Это очень важная концепция! Она позволяет сделать работу UI быстрой и предсказуемой.

Смотрите, как это работает:

// Старый элемент
const oldElement = <h2>Привет</h2>;

// Новый элемент
const newElement = <h2>Пока</h2>;

// Передайте newElement в render – React обновит только текст, не трогая остальной DOM

Лучшие практики и распространенные ошибки

Не мутируйте элементы

Создайте новый элемент вместо изменения существующего:

// Плохо! Мутация объекта
element.type = 'p'; // Никогда так не делайте

// Хорошо
const newElement = <p>Обновленный текст</p>;

Используйте ключи для списков

Не забывайте явно указывать атрибут key, если рендерите массив элементов.

Проверяйте корректность атрибутов

Убедитесь, что используете правильные имена props: className вместо class, htmlFor вместо for.

Не вставляйте массивы напрямую без ключей

// Плохо
const arr = [<li>Один</li>, <li>Два</li>];

// Лучше
const arr = [{id: 1, txt: 'Один'}, {id: 2, txt: 'Два'}];
const list = arr.map(el => <li key={el.id}>{el.txt}</li>);

Будьте внимательны с возвращаемыми значениями функций-компонентов

Возвращайте либо элемент (или ни одного, если возврат null), либо массив элементов.

Как выглядит полный минимальный пример

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

function App() {
  const users = [
    { id: 1, name: 'Маша' },
    { id: 2, name: 'Денис' }
  ];

  function greet(name) {
    alert(`Привет, ${name}!`);
  }

  return (
    <div>
      <h1>Пользователи</h1>
      <ul>
        {users.map(user =>
          <li key={user.id}>
            {user.name}
            <button onClick={() => greet(user.name)}>Поздороваться</button>
          </li>)
        }
      </ul>
    </div>
  );
}

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

Заключение

Использование элементов — основа для создания интерфейсов в React. Умение работать с элементами, комбинировать их между собой, применять props, children, ключи и событийные обработчики позволит эффективно строить сложные динамические UI-приложения. Отдельное внимание стоит уделять вопросам иммутабельности, правильному выбору props и грамотной обработке списков с помощью ключей. Эти знания пригодятся вам в любом проекте на React.

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

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

Как рендерить массив элементов без обертки в дополнительные теги?

Вы можете возвращать массив элементов или использовать React.Fragment:

// Вариант с React.Fragment
return (
  <>
    <li>Первый</li>
    <li>Второй</li>
  </>
);

// Либо так (каждый элемент должен иметь key)
return [
  <li key="1">Первый</li>,
  <li key="2">Второй</li>
];

Чем отличаются элементы React и виртуальный DOM?

Элемент — это просто объект, описывающий то, что должно быть на экране. Виртуальный DOM — структура этих элементов в памяти, сравниваемая с предыдущей версией для эффективного обновления реального DOM.

Как передать несколько children-элементов в компонент?

Любое содержимое между открывающим и закрывающим тегом компонента будет находиться в props.children, можно использовать сразу несколько дочерних элементов:

<Custom>
  <h1>Заголовок</h1>
  <p>Текст</p>
</Custom>

Как рендерить элемент условно, например только в случае совпадения значения?

Используйте логическое выражение:

{visible && <Panel />}

Если visible — истинно, <Panel /> будет отрендерен, иначе React вернет null.

Почему нельзя использовать индекс массива как key?

Использование индекса массива как ключа допустимо только для статических не изменяющихся списков. В динамических (когда элементы могут добавляться/удаляться) это приводит к некорректному обновлению интерфейса из-за особенностей работы алгоритма сравнения React. Лучше всегда использовать уникальные идентификаторы.