Ваш первый компонент

Компоненты: строительные блоки пользовательского интерфейса

В веб-разработке HTML позволяет нам создавать богатые структурированные документы с помощью встроенного набора тегов, таких как <h1> и <li>:

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

Этот разметка представляет эту статью <article>, её заголовок <h1>, и (сокращённый) список содержания в виде упорядоченного списка <ol>. Такая разметка, совместно со стилями CSS и интерактивностью JavaScript, лежит в основе каждого сайдбара, аватара, модального окна, выпадающего списка — каждого элемента пользовательского интерфейса, который вы видите в веб-приложениях.

React позволяет объединить вашу разметку, CSS и JavaScript в пользовательские «компоненты», переиспользуемые элементы пользовательского интерфейса для вашего приложения. Код списка содержания, который вы видели выше, может быть преобразован в <TableOfContents /> компонент, который можно отображать на каждой странице. Под капотом он по-прежнему использует те же HTML-теги, такие как <article>, <h1>, и т.д.

Так же, как и с HTML-тегами, вы можете комбинировать, упорядочивать и вкладывать компоненты для проектирования целых страниц. Например, страница документации, которую вы читаете, состоит из компонентов React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

По мере роста вашего проекта вы заметите, что многие ваши проекты можно создавать, переиспользуя уже написанные вами компоненты, что ускорит разработку. Наш список содержания выше можно добавить на любой экран с <TableOfContents />! Вы даже можете начать проект с тысяч компонентов, которые публикует сообщество разработчиков React, таких как Chakra UI и Material UI.

Определение компонента

Традиционно, при создании веб-страниц, веб-разработчики размечали контент и затем добавляли интерактивность, вставляя фрагменты JavaScript. Это работало отлично, когда интерактивность была дополнительной возможностью. Сейчас это ожидается для многих сайтов и всех приложений. React ставит интерактивность на первое место, сохраняя при этом использование той же технологии: компонент React — это функция JavaScript, которую можно дополнить разметкой. Вот как это выглядит (вы можете отредактировать пример ниже):

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

И вот как создать компонент:

Шаг 1: Экспорт компонента

Префикс export default — это стандартный синтаксис JavaScript (не специфичный для React). Он позволяет пометить главную функцию в файле, чтобы потом импортировать её из других файлов. (Подробнее об импорте в Импортирование и экспорт компонентов!)

Шаг 2: Определение функции

С помощью function Profile() { } вы определяете функцию JavaScript с именем Profile.

Шаг 3: Добавление разметки

Компонент возвращает тег <img /> с атрибутами src и alt. <img /> записывается как HTML, но на самом деле это JavaScript под капотом! Этот синтаксис называется JSX, и он позволяет вам встраивать разметку внутри JavaScript.

Оператор возврата может быть записан на одной строке, как в этом компоненте:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Но если ваша разметка не находится на одной строке с ключевым словом return, вы должны заключить её в пару скобок:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

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

Теперь, когда вы определили свой Profile компонент, вы можете вложить его в другие компоненты. Например, вы можете экспортировать Gallery компонент, который использует несколько Profile компонентов:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Что видит браузер

Обратите внимание на разницу в регистре:

• <section> — строчная буква, поэтому React понимает, что мы ссылаемся на HTML-тег.
• <Profile /> начинается с заглавной буквы P, поэтому React понимает, что мы хотим использовать наш компонент с именем Profile.

И Profile содержит ещё больше HTML: <img />. В итоге, вот что видит браузер:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Вложенность и организация компонентов

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

Поскольку компоненты Profile отображаются внутри Gallery — даже несколько раз! — мы можем сказать, что Gallery является родительским компонентом, отображающим каждый Profile как «дочерний». Это часть магии React: вы можете определить компонент один раз, а затем использовать его в любом месте и любое количество раз.

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}