В этой статье мы рассмотрим компоненты React и все, что пользователь должен знать о них перед созданием компонентов в приложении React.
Компоненты React позволяют разделить пользовательский интерфейс на независимо функционирующие части приложения React. Пользователи могут работать с этими компонентами и вносить в них изменения, не затрагивая другие компоненты приложения. Компоненты выполняют определенную функцию в приложении, а также сообщают странице, что отображать. Формат компонента React может быть похож на то, что пользователь видел раньше, если в прошлом он работал с «ванильным» JavaScript.
Компоненты React очень похожи на функции JavaScript, но с некоторыми отличиями. Ниже приведен пример пустого компонента React:
Как видно из примера, структура компонента почти такая же, как у функции JavaScript. Оба имеют ключевое слово «функция», имя функции и возвращаемое значение. Хотя то, что что-то похоже на что-то другое, не означает, что они похожи. Некоторые ключевые отличия компонентов, на которые следует обратить внимание: имена компонентов должны начинаться с заглавной буквы, компоненты возвращают то, что выглядит как теги HTML-элемента, а под компонентом находится своего рода оператор экспорта. Это то, что делает компоненты React уникальными.
JSX
Компоненты возвращают что-то под названием JSX, которое является расширением синтаксиса для JavaScript, которое можно использовать для описания того, как должны выглядеть страницы. JSX возвращает элементы React, которые обеспечивают структуру страницы при отображении. JSX — это не HTML, а нечто, что будет отображать HTML на странице для пользователя. Пользователи могут вкладывать элементы JSX друг в друга (точно так же, как HTML), чтобы еще больше структурировать возвращаемое значение, но важно отметить, что все элементы JSX должны быть вложены в один общий контейнер «div». Атрибуты стиля также можно добавить в элементы JSX, введя ключевое слово «стиль» в качестве атрибута элемента. JavaScript можно встроить в JSX, если он заключен в фигурные скобки ({}), и его можно использовать для создания условий и других действий. Ниже приведены два примера синтаксиса JSX:
Импорт и экспорт
Чтобы компоненты можно было использовать и повторно использовать в приложении, необходимо добавить операции импорта/экспорта. Первой операцией, которую мы рассмотрим, будет импорт. Пример импорта показан ниже:
Это делает «импорт» стандартного «экспорта» из импортируемого компонента. Другими словами, пользователь будет импортировать значение экспорта «ReactComponent» из местоположения (относительного пути) компонента, то есть «./ReactComponent». Импорт позволит пользователю экспортировать значение одного компонента внутри других компонентов, что означает, что приложение может быть более динамичным. Отсюда пользователь может понять, что такое «экспорт». Пример экспорта показан ниже:
Экспорт, показанный выше, является экспортом «по умолчанию», что означает, что пользователь собирается экспортировать значение по умолчанию из компонента. Пользователь также может иметь именованные экспорты, которые просто указывают определенную часть компонента, который необходимо экспортировать. Цель экспорта — упаковать то, что мы хотим использовать из компонента, и подготовить его для импорта в другой компонент, если это необходимо. Благодаря импорту и экспорту компонентов наши приложения React становятся более динамичными и организованными.
Пример импорта и экспорта именованных значений показан ниже:
Использование компонентов в ваших приложениях React может сделать приложение чище, понятнее и динамичнее. Это также может сократить время и энергию, необходимые для жесткого кодирования HTML, а затем манипулирования страницей с помощью JavaScript! Теперь у вас должны быть инструменты, необходимые для создания структуры базового компонента в вашем приложении React.
