Начало работы с компонентами в React

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

В React каждый компонент является отдельным модулем. Попробуем сделать свой компонент, добавив файл "Mouse.js" со следующим кодом в проект:

import React from 'react';

function Mouse() {
   return <p>
      Тише, мыши, кот на крыше!
   </p>;
}

export default Mouse;

Функция этого простейшего компонента - это вывод предложения "Тише, мыши, кот на крыше!" на страницу. Теперь если нужно подключить этот компонент в основном "App", то потребуется сначала подключить файл "Mouse.js", а потом вызвать функцию через одноимённый JSX тег. Наша функция имеет название "Mouse", поэтому для её вызова надо использовать тег <Mouse />. Название тега всегда пишется с заглавной буквы. Этим признаком пользуется React, чтобы отличить простой HTML тег от компонента.

Попробуем вызвать наш компонент в приложении:

import React from 'react';
import Mouse from './Mouse';

function App() {
   return <div>
      <Mouse />
   </div>;
}

export default App;

В результате выполнения этого кода будет возвращён такой HTML:

<div>
   <p>
      Тише, мыши, кот на крыше!
   </p>
</div>;

Передача переменных в компоненты

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

import React from 'react';
import Mouse from './Mouse';

function App() {
   return <div>
      <Mouse friend="мыши" enemy="кот"/>
   </div>;
}

export default App;

Все значения попадают в первый параметр конструктора в виде объекта. Этому параметру в React принято давать называние "props". Обращение к его свойствам можно делать через "точечную" запись, как и в обычных объектах:

import React from 'react';

function Mouse(props) {
   return <p>
      Тише, {props.friend}, {props.enemy} на крыше!
   </p>;
}

export default Mouse;

Но часто делают деструктуризацию прямо в параметре. То есть записывают так:

import React from 'react';

function Mouse({friend, enemy}) {
   return <p>
      Тише, {friend}, {enemy} на крыше!
   </p>;
}

export default Mouse;

Вызов компонента несколько раз

В коде приложения может использоваться сразу несколько экземпляров одного компонента. И у вызова может быть свой набор атрибутов и значений. Например, можно записать так:

import React from 'react';
import Mouse from './Mouse';

function App() {
   return <div>
      <Mouse friend="мыши" enemy="кот"/>
      <Mouse friend="сыр" enemy="мышь"/>
   </div>;
}

export default App;

В результате выполнения кода появится такой HTML код:

<div>
   <p>
      Тише, мыши, кот на крыше!
   </p>
   <p>
      Тише, сыр, мышь на крыше!
   </p>
</div>;