Как должна выглядеть модульная архитектура frontend react?

Question

[991o2o9]

Можете объяснить, как работает модульная архитектура для главной страницы? У нас есть компоненты, такие как хедер и футер, которые, я понимаю, должны быть в отдельных модулях. Как структурировать остальную информацию на главной странице, включая герой-блок с баннером и фотографией с бэкенда, блок с цифрами, который анимируется, услуги, которые используются на двух страницах, и слайдеры с новостями, которые могут быть на разных страницах? Как должна выглядеть папка modules, и что из всего этого должно находиться в папке components

Comments

[Михаил Р.]

что из всего этого должно находиться в папке components

Либо то, что необходимо использовать в нескольких местах, либо объёмный по коду компонент (чтобы не захломлять страницу кодом), либо клиентский компонент в рамках серверной страницы.

[Антон Иванов]

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

[Антон Иванов]

Можно модулем считать набор страниц/роутов, объединённых общим смыслом. Например, каталог товаров это модуль. В каталоге есть страница со списком товаров, а есть детальное описание товара. Есть корзина, тоже отдельный модуль. В корзине есть страницы, список отложенных товаров, оформление заказа и т.п.

Answer 1

[Сергей Сунцев]

Очень абстрактный вопрос, но постараюсь на него ответить. раз вопрос касается реакта, то я предположу что имеется ввиду модуль, как ES module scope
Просто представь, что у тебя один файл с реакт компонентом это модуль. Модули можно агрегировать друг с другом посредством фасадных файлов. Следовательно, ты разбиваешь компоненты по модулям, обычно это один компонент - один модуль, либо комбинируешь их по предметной области, к примеру компонент списка с компонентом элемента этого списка.

Теперь, когда мы знаем что такое модуль мы можем выстроить с ними какую - либо архитектуру.
Архитектура клиентских приложений дело не хитрое. Делай компоненты для вьюшек, это будет модульный каркас и делай компоненты для ui, это будут кирпичики.

Проблемы возникают, когда количество каркасов переваливает удобоваримое количество (обычно когда начинаешь путаться в них). Тогда стоит их разбивать на более крупные модули. Старайся это делать по предметной области.

Если стоит цель в построении архитектуры для большого проекта, когда ты знаешь что проект точно будет большим и долгим, то лучше взять какой то готовый шаблон и не изобретать велосипеды.
feature-driven
feature-sliced-design