Задание 5: Разбиение модуля на компоненты

Итак, перейдем к следующему практическом упражнению. Цель упражнения - научиться применять иерархию компонентов (Screen → Feature → Component) на реальном модуле.

Наша задача - разбить Restaurant Module из Figma на Features и Components. Мы не будем использовать Shared-компоненты и Screens — в этом упражнении фокус только на элементах внутри модуля.

Инструкции к упражнению

1. Откройте макет Restaurant Page в Figma

Это экран ресторана, который пользователи видят после выбора ресторана на главной странице. Внимательно посмотрите на макет и определите на какие основные части или логические блоки можно разбить страницу. Например - шапка ресторана, блок отзывов и т.д.

2. Сделайте визуальное разбиение страницы на компоненты

На следующем шаге необходимо подробнее поработать с макетом и разбить его на компоненты. Можно скопировать изображение в Excalidraw, Figma или другой редактор и нарисовать рамки вокруг всех логических частей UI. Вы можете использовать просто лист бумаги и карандаш для этой цели.

Главное придерживаться строгих правил и использовать определенные цвета для каждого из уровней, например:

• Фиолетовый — Features
• Зелёный — Components
• Shared (чёрный) и Screens (синий) — не используем в этом упражнении

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

3. Дайте имена всем компонентам

Это самая сложная часть. Хорошие имена должны быть:

• понятными
• короткими
• отражать роль элемента
• соответствовать структуре модуля

Примеры правильных имён:

• RestaurantHeader
• MenuCategory
• DishCard
• DishOptionSelector

Примеры плохих:

• Box1
• TopSection
• MenuThing

4. Создайте структуру модуля в коде

В папке проекта:

modules/
  restaurant/
    features/
    components/
    RestaurantScreen.tsx  (если хотите, но необязательно)

Структура должна соответствовать вашему разбиению из шага №2. Обратите внимание, что у нас нет задачи реализовать верстку. Нам не нужно копировать макет, достаточно сделать компоненты-заглушки, например:

export default function DishCard() {
  return <div>DishCard</div>;
}

Главная цель — правильно структурировать модуль.

Пример: разбор Delivery модуля (как ориентир)

В качестве примера можете ориентирваться на следующую иллюстрацию

В Delivery Module были выделены такие фичи:

• Filters Feature
• OffersCarousel Feature
• RestaurantsCarousel Feature

И внутри них — компоненты:

• CategoryCarousel
• OfferCard
• RestaurantCard
• FilterTag
• FilterDropdown

В коде получилась вот такая структура:

modules/
  delivery/
    DeliveryScreen.tsx
    data.ts
    features/
      Filters/
      OffersCarousel/
      RestaurantsCarousel/

Ровно то же самое нужно сделать для Restaurant Module.

Подсказки и рекомендации

1. Фичи обычно крупнее, чем кажется Если в элементе есть подкомпоненты, или есть состояние, или какая-то внутренняя логика — то вероятнее всего это Feature. Например:

• верхний блок ресторана → Feature
• категория меню → Feature
• список блюд → Feature
• модальное окно выбора ингредиентов → Feature

1. Компоненты должны быть маленькими, атомарными и изолированными
2. Ничего не переносим в Shared на этом этапе Даже если вы понимаете, что это какой-то компонент, например кнопка, может быть вынесен в качестве элемента дизайн системы — в этом упражнении оставляем в modules/restaurant.