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

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

Вы узнаете

  • Что такое компонент
  • Какую роль играют компоненты в React-приложении
  • Как написать ваш первый React-компонент

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

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Кэтрин Джонсон"
    />
  )
}

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

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

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

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

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

Pitfall

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

Шаг 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>
);

Pitfall

Без скобок любой код на строках после return будет проигнорирован!

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

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

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

export default function Gallery() {
  return (
    <section>
      <h1>Изумительные учёные</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

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

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

  • <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: вы можете определить компонент один раз и затем использовать его в любом количестве мест и сколько угодно раз.

Pitfall

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

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

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

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

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

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

Deep Dive

Компоненты на все случаи жизни

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

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

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

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

Recap

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

  • React позволяет вам создавать компоненты, переиспользуемые элементы UI для вашего приложения.

  • В React-приложении каждый элемент UI это компонент.

  • Компоненты React — это обычные функции JavaScript, за исключением того, что:

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

Challenge 1 of 4:
Экспортируйте компонент

Этот пример не работает из-за того, что корневой компонент не экспортирован:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Аклилу Лемма"
    />
  );
}

Попробуйте исправить его самостоятельно прежде чем смотреть в решение!