Задание 5: Решение

Продолжительность: 11 мин

В этом уроке вы сможете найти мой вариант разбиения Restaurant-модуля на фичи и компоненты.

Мы продолжаем придерживаться того же подхода:

  • структура модулей — модульная архитектура, ближе к упрощённому FSD;
  • фокус — Features и Components;
  • без Shared и Screens, если это не нужно модулю.

Breakdown (разбиение) Restaurant-модуля

Вот логика, которой я придерживался:

  1. Restaurant Header (фича) Содержит несколько внутренних компонентов:
  • Restaurant Title — название, категория, рейтинг, теги.
  • Restaurant Cover.

Оба элемента — части одной фичи, потому что концептуально они образуют заголовок ресторана.

По такому же принципу сделаны разбиения для других частей макета. На рисунке ниже вы можете увидеть пример такого разбиения. Я не стал отмечать все компоненты внутри фичей, чтобы не перегружать рисунок, но общий принцип должен быть понятен.

Modules Breakdown

Для каждой фичи из разбиения на рисунке создана отдельная папка, по необходимости содержащая компоненты. Результат этой работы вы можете увидеть переключившись на ветку components-breakdown или посмотреть все изменения на странице пулл-реквеста в github

Это платный урок

Купите полный доступ к курсу чтобы просматривать данный контент

Основы архитектуры фронтенда

Изучите основы проектирования современных, высоконагруженных фронтенд-приложений.

3990 Скидка 75%
990

Безопасные платежи обрабатываются сервисом Юкасса

Комментарии

Войдите, чтобы оставить комментарий