Основы компонентов React 101: создание повторно используемых и удобных в обслуживании элементов интерфейса
Узнайте, почему разделение интерфейсов на небольшие компоненты React улучшает возможности повторного использования, читаемость и сотрудничество в команде, а затем создайте свой первый функциональный компонент.
Знакомая ситуация для любого разработчика фронтенда
Представьте: это ваш первый неделя в новой стартап-компании.
Ваш менеджер заходит к вам и говорит:
"Главная страница должна быть готова к пятнице."
Вы открываете дизайн в Figma.
Он состоит из следующих разделов:
- Верхняя навигационная панель
- Большой баннер
- Зона поиска
- Раздел с основными товарами
- Раздел с отзывами клиентов
- Таблица цен
- Раздел с часто задаваемыми вопросами
- Форма для подписки на рассылку
- Футер сайта
Задача кажется довольно простой.
Вы создаете один HTML-файл и начинаете по порядку создавать каждый раздел.
К пятнице всё готово.
Всё работает без проблем.
Вы очень довольны результатом.
Прошел месяц, и продукт развился.
Команда по маркетингу хочет новый дизайн баннера.
Дизайнеры перерабатывают панель навигации.
Команда по разработке продукта требует дополнительного раздела с тарифами.
Теперь отзывы клиентов должны загружаться динамически.
Не прошло и долго, как объем одного файла превысил 2 000 строк.
Поиск одной кнопки превращается в поиски среди лабиринта кода.
Что еще хуже, незначительная правка одной части страницы может сломать совершенно другую, не связанную с ней часть.
Звучит знакомо?
Именно эта проблема побудила разработчиков искать другой подход к созданию интерфейсов.
Вместо того чтобы создавать одну огромную страницу, что, если собрать ее из множества небольших, повторно используемых элементов?
В React эти элементы называются компонентами.
Почему один огромный файл разрушается
Представьте типичную веб-страницу, созданную старым способом.
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
Каждый элемент страницы находится внутри этого одного файла.
По мере роста проекта вы заметите:
- Размер файла продолжает увеличиваться.
- Совместная работа в команде становится сложнее.
- Ничего нельзя по-настоящему повторно использовать.
- Баги начинают появляться чаще.
- Поддержка кода становится изнурительной.
Теперь посмотрите, как React обрабатывает ту же страницу.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
Вместо того чтобы собирать всё в один файл, каждый раздел становится самостоятельной единицей.
Эта модель называется архитектурой на основе компонентов.
Определение React-компонента
По сути, компонент — это просто повторно используемый фрагмент интерфейса.
Можно рассматривать его как функцию на JavaScript, возвращающую JSX.
Вместо того чтобы помещать всю страницу в один файл, её разделяют на меньшие, более специфичные части.
Каждая из этих частей отвечает за выполнение ровно одной задачи.
Например:
Панель навигации становится отдельным компонентом.
Подвал страницы — ещё одним компонентом.
Карточка товара — ещё одним компонентом.
Раздел профиля пользователя также является отдельным компонентом.
Затем эти компоненты собираются вместе, чтобы создать полноценное приложение.
В результате получается кодовая база, которую гораздо проще читать, тестировать и обновлять со временем.
Изменение подхода к UI
Это одно из самых важных изменений в мышлении, с которыми вы столкнётесь при изучении React.
Перестаньте думать в терминах целых страниц.
Начните думать в терминах отдельных частей.
Вместо того чтобы спрашивать:
"Как мне построить эту главную страницу?"
Попробуйте спросить:
«Какие меньшие элементы вместе образуют эту главную страницу?»
Как только это становится понятно, React начинает казаться гораздо более интуитивным в использовании.
Сравнение с повседневной жизнью
Подумайте о сборке города из LEGO.
Вы ведь не будете каждый раз лепить совершенно новую кирпичицу, когда она понадобится.
Вместо этого вы берете уже имеющиеся кирпичицы.
Некоторые из них формируют стены.
Другие превращаются в окна.
Ещё другие составляют крыши.
Сочетая эти одинаковые повторно используемые кирпичицы, вы можете построить бесчисленное количество разных зданий.
Компоненты React работают точно таким же образом.
Один и тот же компонент Button может появляться:
- На экране входа
- Внутри модального окна
- На странице оформления заказа
- В навигационной панели
Вы создаете его всего один раз.
Затем вы помещаете его туда, где он нужен.
В этом и заключается настоящая ценность компонентов.
Логика модели компонентов React
React опирается на компоненты, потому что они решают реальные, практические проблемы.
1. Повторное использование
Создайте его один раз.
Используйте бесконечно снова и снова.
Вместо того чтобы двадцать раз переписывать один и тот же код кнопки, вы определяете единственный компонент Button и вставляете его там, где он нужен в приложении.
2. Читаемость
Рассмотрим два сценария одновременно.
Один файл длиной 2 000 строк.
Против...
Двадцати отдельных файлов, каждый из которых имеет одну ясную цель.
К какому из них вы предпочтете вернуться через шесть месяцев?
Меньшие компоненты просто проще понимать.
3. Обслуживаемость
Представьте ситуацию, когда ваша компания решает изменить цвет основной кнопки.
Если бы вы не разделили интерфейс на компоненты, такое изменение потребовало бы поиска и редактирования десятков файлов.
Но с помощью одного повторно используемого компонента кнопки изменения вносятся в одном месте.
Все экраны, использующие эту кнопку, мгновенно отражают обновление.
4. Совместная работа команды
Представьте пять разработчиков, работающих над одним и тем же кодовым базисом.
Один занимается навигационной полосой.
Другой работает над разделом главного экрана.
Третий создает карточки продуктов.
Четвертый занимается нижней частью страницы.
Задача пятого разработчика — объединить все эти элементы воедино.
Поскольку каждая функция находится в своем собственном компоненте, никому не нужно мешать работе других или ждать, пока освободится файл.
Именно такой параллельный подход к работе является причиной того, почему компоненты играют столь важную роль в командах по разработке в реальном мире.
Функциональные компоненты
Современные кодбазы React почти полностью основаны на функциональных компонентах.
По сути, функциональный компонент — это просто функция на JavaScript, которая возвращает JSX.
Вот самая простая версия, которую можно написать:
function Welcome() {
return <h1>Hello, React!</h1>;
}
На первый взгляд это похоже на обычную функцию JavaScript — потому что таковой она и является.
Отличие заключается в том, что вместо числа или строки она возвращает JSX, а React использует этот JSX для определения того, что нужно отобразить на экране.
Рассмотрим её по частям:
function Welcome()
Здесь мы объявляем функцию под названием Welcome.
Обратите внимание на заглавную букву «W» в начале имени.
React особенно обращает внимание на первую заглавную букву, чтобы понять, что функцию следует рассматривать как компонент.
Далее идет эта строка:
return <h1>Hello, React!</h1>;
Задача функции — возвращать JSX.
Поэтому каждый раз, когда React отрисовывает Welcome, появляется именно этот заголовок.
Вот и всё.
Вы только что создали свой первый компонент.
Создание вашего первого компонента
Когда проект начинает расти, разработчики обычно создают отдельный файл для каждого компонента.
Типичная структура папок может выглядеть так:
src
├── App.jsx
└── components
└── Welcome.jsx
Вот что находится внутри Welcome.jsx:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Разделение компонентов на отдельные файлы помогает сохранять код чистым и значительно упрощает его навигацию по мере роста проекта.
Экспорт компонентов
Возможно, вас интересует назначение этой строки:
export default Welcome;
Предположим, вы только что написали надежный, повторно используемый компонент.
Пока он находится только в своем собственном файле, ничто другое в вашем приложении не может к нему обратиться.
Экспорт позволяет использовать его в других местах.
Это немного похоже на публикацию рукописи.
Как только она становится общедоступной, любой может её взять и прочитать.
Здесь действует та же логика — как только вы экспортируете компонент, любой другой файл в вашем проекте может импортировать его и использовать.
Существуют и другие способы экспорта компонентов, о которых мы расскажем позже в этой серии, но export default — это стандартный выбор при начале работы.
Импорт компонентов
Давайте импортируем Welcome в App.jsx и начнем им пользоваться.
import Welcome from "./components/Welcome";
Эта строка по сути дает указания React:
«Возьмите компонент
Welcomeиз этого файла, чтобы я мог использовать его прямо здесь».
После импорта его отрисовка требует почти никаких усилий:
function App() {
return (
<>
<Welcome />
</>
);
}
Посмотрите поближе на эту часть синтаксиса:
<Welcome />
Хотя Welcome изначально был обычной функцией JavaScript, мы можем использовать его так же, как нативный HTML-тег.
Это один из самых элегантных аспектов работы с React — ваши пользовательские функции превращаются в повторно используемые элементы интерфейса.
Как React воспринимает компонент
Когда React сталкивается с этой строкой:
<Welcome />
он не интерпретирует её как разметку.
Вместо этого происходящее «под капотом» выглядит примерно так:
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
Проще говоря, каждый компонент сводится к вызову функции, который возвращает часть интерфейса.
Как только эта идея становится ясной, компоненты больше не кажутся чем-то вроде особого волшебства.
Правила именования
Существует несколько правил именования, которые стоит запомнить.
Хорошие варианты имён:
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Имена, которых следует избегать:
- navbar
- footer
- component
- abc
В чём здесь логика?
React использует правила прописных букв в качестве сигнала, отделяющего пользовательские компоненты от встроенных тегов HTML.
Возьмём этот пример:
<Navbar />
React воспринимает это как ссылку на собственный пользовательский компонент.
Сравните это с:
<div>
которое React интерпретирует как стандартный, встроенный элемент HTML.
Выбор понятных, описательных имен также приносит пользу, когда другим разработчикам потребуется позже прочитать и понять ваш код.
Основные выводы
Вот краткий обзор того, что мы рассмотрели до сих пор.
- Компонент — это самодостаточный, повторно используемый фрагмент интерфейса.
- Создание приложения на React по сути означает сборку и объединение компонентов.
- Функциональные компоненты — это обычные функции JavaScript, возвращающие JSX.
- Разделение приложения на компоненты улучшает читаемость, повторное использование и долгосрочную поддержку.
- Хорошо спроектированный компонент сосредотачивается на выполнении одной задачи.
- Обычной практикой является хранение каждого компонента в отдельном файле и его импорт там, где он нужен.
- Правила прописности используются React для различения ваших пользовательских компонентов от обычных элементов HTML.
Связанная литература
- Создание умственной модели для React: согласование данных, состояние и хуки — Ознакомьтесь с логикой основных концепций React — согласование данных, компоненты, параметры, состояние и хуки — чтобы развить интуицию в работе с этим фреймворком вместо запоминания API.
- Работа с состояниями интерфейса в реальном мире с использованием условной отрисовки в React — Узнайте, как создавать интерфейсы для аутентификации, ролей, разрешений, показа состояния загрузки, обработки ошибок и отображения пустого состояния в React с помощью практических подходов к условной отрисовке.
catch () вызывает ошибку SyntaxError в JavaScript — Узнайте, почему пустой список параметров в блоке catch полностью нарушает парсинг кода на JavaScript, и ознакомьтесь с двумя грамматически корректными способами написания блока catch без параметров.