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

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

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

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

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

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

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

По мере роста вашего проекта вы заметите, что многие ваши дизайны можно собрать, повторно используя уже написанные компоненты, что ускорит разработку. Наше оглавление выше можно добавить на любой экран с помощью<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, вы должны обернуть её в пару круглых скобок:

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

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

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

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

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

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

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

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

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

Резюме

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

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