React Компоненты

Компоненты React похожи на функции, которые возвращают HTML-элементы.

Что такое компоненты в React?

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

Компоненты бывают двух видов: компоненты-классы и компоненты-функции. В этом уроке мы сосредоточимся на компонентах-функциях.

В старых базах кода React вы можете встретить преимущественно компоненты-классы.

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

Тем не менее, компоненты-классы по-прежнему поддерживаются, подробнее смотрите в соответствующем разделе.

Создание первого компонента React

При создании компонента React имя компонента обязательно ДОЛЖНО начинаться с заглавной буквы.

Компоненты React возвращают HTML-код.

Пример

Создаем компонент-функцию Car:


function Car() {
  return (
    <h2>Привет, я - автомобиль!</h2>
  );
}

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

Теперь наше React-приложение содержит компонент Car, который возвращает элемент <h2>.

Чтобы использовать этот компонент в приложении, ссылаемся на него так: <Car />.

Пример

Отобразим компонент Car в элементе "root":


createRoot(document.getElementById('root')).render(
  <Car />
);

Пропсы (props)

В компонент Rect можно передавать аргументы в виде props (пропсов), что означает - свойства (properties).

Аргументы отправляются в компонент в виде HTML-атрибутов.

Подробнее о пропсах вы узнаете в соответствующей главе.

Пример

Используем атрибут для передачи цвета компоненту Car и применяем его в функции рендера:


function Car(props) {
  return (
    <h2>Я {props.color} - автомобиль!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car color="красный" />
);

Компоненты внутри компонентов

Мы можем обращаться к компонентам изнутри других компонентов.

Пример

Используем компонент Car внутри компонента Garage:


function Car() {
  return (
    <h2>Я - автомобиль!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Кто живёт в моём гараже?</h1>
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

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

Один и тот же компонент можно рендерить несколько раз.

Пример

Используем компонент Car дважды внутри компонента Garage:


function Car() {
  return (
    <h2>Я - автомобиль!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Кто живёт в моём гараже?</h1>
      <Car />
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Предыдущий пример может показаться бессмысленным, но если мы передадим разные аргументы компоненту Car, ситуация изменится.

Пример

Используем компонент Car для отображения двух разных автомобилей:


function Car(props) {
  return (
    <h2>Я {props.brand}!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Кто живёт в моём гараже?</h1>
      <Car brand="Ford" />
      <Car brand="BMW" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Компоненты в файлах

React поощряет повторное использование кода, и бывает полезно разделить компоненты по отдельным файлам.

Для этого создайте новый файл в папке src с расширением .jsx и разместите там код компонента.

Помните, что имя файла должно начинаться с заглавной буквы.

Пример

Это новый файл Vehicle.jsx:


// Vehicle.jsx
function Car() {
  return (
    <h2>Привет, я машина!</h2>
  );
}

export default Car;

Чтобы использовать компонент Car, необходимо импортировать файл Vehicle.jsx в ваше приложение.

Пример

Импортируем файл Vehicle.jsx в приложение и используем компонент Car:


// main.jsx
import { createRoot } from 'react-dom/client';
import Car from './Vehicle.jsx';

createRoot(document.getElementById('root')).render(
  <Car />
);