Урок 1 · React

Компонент React: часть интерфейса

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

Первый компонент

function Greeting() {
  return <h1>Привет, веб!</h1>;
}

export default Greeting;

Имя компонента начинается с заглавной буквы. Затем его можно использовать внутри другого компонента как HTML-тег.

Передаём данные через props

function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

<Greeting name="Маша" />

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

Выноси блок, когда он повторяется с разными данными или когда в файле уже трудно найти кнопку среди разметки. Не выноси каждый абзац. Компонент LessonCard имеет смысл. Компонент CardTitle из одного тега чаще мешает, чем помогает.

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

function LessonCard({ title, minutes, children }) {
  return (
    <article className="card">
      <h2>{title}</h2>
      <p>{minutes} минут</p>
      {children}
    </article>
  );
}

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

Данные текут сверху вниз

Родитель хранит список уроков и передаёт каждой карточке её объект. Карточка не лезет в глобальную переменную и не меняет props. Если карточке нужно сообщить о клике, родитель передаёт функцию. Такой путь легче проследить, чем сеть компонентов, которые поправляют друг друга.

Имена и состояние

• Имя — существительное по роли: SearchForm, SeatCounter.
• Состояние держи в ближайшем родителе, которому оно нужно целиком.
• Не дублируй в state то, что уже можно вычислить из props.
• Стили компонента не должны зависеть от случайной вложенности в конкретную страницу.

function LessonCard({ title, children }) {
  return (
    <article className="card">
      <h2>{title}</h2>
      <p>{children}</p>
    </article>
  );
}

<LessonCard title="HTML">Начни со структуры.</LessonCard>