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

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

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

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

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

React позволяет объединять разметку, CSS и JavaScript в настраиваемые «компоненты» — повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <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, которую вы можете дополнить разметкой. Вот как это выглядит (вы можете отредактировать пример ниже):

export default function Profile() {  return (    <img      src="https://react.dev/images/docs/scientists/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 можно писать в одной строке, как в этом компоненте:

return <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />;

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

return (
  <div>
    <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

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

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

function Profile() {  return (    <img      src="https://react.dev/images/docs/scientists/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>Удивительные ученые</h1>
  <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

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

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

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

Компоненты могут отображать другие компоненты, но ни в коем случае нельзя вкладывать их определения друг в друга:

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

Приведенный выше фрагмент кода работает очень медленно и вызывает ошибки. Вместо этого определите каждый компонент на верхнем уровне:

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

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

Когда дочернему компоненту нужны данные от родительского, передавайте их через props, а не вкладывайте определения друг в друга.

Компоненты на всех уровнях

Ваше приложение React начинается с «корневого» компонента. Обычно он создается автоматически при запуске нового проекта. Например, если вы используете CodeSandbox или фреймворк Next.js, корневой компонент определяется в pages/index.js. В этих примерах вы экспортировали корневые компоненты.

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

Фреймворки на основе React идут еще дальше. Вместо того, чтобы использовать пустой HTML-файл и позволять React «взять на себя» управление страницей с помощью JavaScript, они также автоматически генерируют HTML из ваших React-компонентов. Это позволяет вашему приложению отображать некоторый контент до того, как загрузится код JavaScript.

Тем не менее, многие веб-сайты используют React только для добавления интерактивности к существующим HTML-страницам. У них есть много корневых компонентов вместо одного для всей страницы. Вы можете использовать столько React, сколько вам нужно — или совсем немного.

Краткий обзор

Вы только что получили первое представление о React! Давайте подведем итоги и повторим некоторые ключевые моменты.

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

1. Их имена всегда начинаются с заглавной буквы.
2. Они возвращают разметку JSX.