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

Компоненты: строительные блоки UI

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

<article>
  <h1>Мой первый компонент</h1>
  <ol>
    <li>Компоненты: строительные блоки UI</li>
    <li>Определение компонента</li>
    <li>Использование компонента</li>
  </ol>
</article>

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

С React можно объединять разметку, CSS и JavaScript в ваши собственные “компоненты”, переиспользуемые элементы UI для вашего приложения. Код оглавления выше, можно превратить в компонент <TableOfContents /> и отрендерить его на любой странице. Внутри он всё ещё использует те же HTML-теги, такие как <article>, <h1> и т.д.

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

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Документация</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

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

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

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

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

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

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

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

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

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

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

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

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />;

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

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
  </div>
);

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

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

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

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

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

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

<section>
  <h1>Изумительные учёные</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Кэтрин Джонсон" />
</section>

Вкладывание и организация компонентов

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

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

export default function Gallery() {
  // 🔴 Никогда не определяйте компонент внутри другого компонента!
  function Profile() {
    // ...
  }
  // ...
}

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

// ✅ Определяйте компоненты на верхнем уровне
function Profile() {
  // ...
}