Описание пользовательского интерфейса

React — это JavaScript-библиотека для рендеринга пользовательских интерфейсов (UI). Интерфейс строится из небольших элементов, таких как кнопки, текст и изображения. React позволяет объединять их в повторно используемые, вложенныекомпоненты.От веб-сайтов до мобильных приложений — всё, что отображается на экране, можно разбить на компоненты. В этой главе вы научитесь создавать, настраивать и условно отображать React-компоненты.

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

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

Импорт и экспорт компонентов

Вы можете объявлять множество компонентов в одном файле, но большие файлы могут стать сложными для навигации. Чтобы решить эту проблему, вы можетеэкспортироватькомпонент в его собственный файл, а затемимпортироватьэтот компонент из другого файла:

Написание разметки с помощью JSX

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

Если мы вставим существующую HTML-разметку в React-компонент, она не всегда будет работать:

Если у вас есть существующий HTML, подобный этому, вы можете исправить его с помощьюконвертера:

JavaScript в JSX с помощью фигурных скобок

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

Передача пропсов компоненту

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

Условный рендеринг

Вашим компонентам часто нужно отображать разные элементы в зависимости от различных условий. В React вы можете условно рендерить JSX, используя синтаксис JavaScript, такой как операторыif, && и ? :.

В этом примере оператор JavaScript&&используется для условного рендеринга галочки:

Рендеринг списков

Вам часто захочется отображать несколько похожих компонентов из коллекции данных. Вы можете использовать методы JavaScriptfilter() и map()вместе с React, чтобы фильтровать и преобразовывать ваш массив данных в массив компонентов.

Для каждого элемента массива вам нужно указатьkey. Обычно в качествеkeyвы захотите использовать ID из базы данных. Ключи позволяют React отслеживать положение каждого элемента в списке, даже если список изменяется.

Сохранение чистоты компонентов

Некоторые функции JavaScript являютсячистыми.Чистая функция:

• Занимается только своим делом.Она не изменяет никакие объекты или переменные, существовавшие до её вызова.
• Одинаковые входные данные — одинаковый результат.При одинаковых входных данных чистая функция всегда должна возвращать один и тот же результат.

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

Вы можете сделать этот компонент чистым, передав пропс вместо изменения существующей переменной:

Ваш UI как дерево

React использует деревья для моделирования отношений между компонентами и модулями.

Дерево рендеринга React — это представление отношений родитель-потомок между компонентами.

Пример дерева рендеринга React.

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

Моделирование отношений между модулями JavaScript — ещё один полезный способ понять ваше приложение. Мы называем это деревом зависимостей модулей.

Пример дерева зависимостей модулей.

Дерево зависимостей часто используется инструментами

Что дальше?

Перейдите кВаш первый компонент, чтобы начать читать эту главу страница за страницей!

Или, если вы уже знакомы с этими темами, почему бы не почитать проДобавление интерактивности?