React JS: Props (Свойства) — Урок 5. Создаем масштабируемые компоненты

Свойства (props) в React JS – незаменимый инструмент для создания масштабируемых приложений. Рассмотрим пример игрового сайта с блоками игр. Создание отдельного компонента для каждого блока неэффективно. Свойства позволяют решить эту проблему.

Создание компонента Game

Создадим компонент Game для отображения названия игры и возрастного ограничения. Структура компонента стандартная:

function Game() {
  return (
    <div>
      <h1>Game name</h1>
      <p>H</p>
    </div>
  );
}

Этот код отображает заголовок «Game name» и текст «H». Пока свойства не используются.

Добавление и использование props

Добавим атрибуты к компоненту Game. Имена атрибутов могут быть любыми, например, name и age.

<Game name="Forza" age="18+" />

Изменим компонент Game для отображения значений этих атрибутов:

function Game(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
}

props.name и props.age позволяют получить доступ к переданным значениям атрибутов. Результат – отображение «Forza» и «18+».

Использование компонента Game для нескольких игр

Создадим три блока игр, используя один компонент Game с разными свойствами:

<div>
  <Game name="Forza" age="18+" />
  <Game name="Mortal Kombat" age="17+" />
  <Game name="GTA 5" age="16+" />
</div>

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

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