Типизация с TypeScript в React

Спасибо!

спасибо!

Огромное спасибо за проделанную работу по проекту и остальные видео! Тащусь от людей у которых все по полочкам!

Хотел бы у Вас узнать по структуре Frontend проекта на React. Сейчас все компоненты размещаются в одном месте — src. Но со временем в src будет большой список разных папок и станет не понятно что из этого страницы, что из этого модули или что-то другое. В Api приложении на Slim Вы использовали для всех http запросов одну папку — Http. По аналогии с этим во frontend можно сделать общую папку Page куда положить всё что относится к странице:

src/Page/Layout 
src/Page/Home 
src/Page/Join
src/Page/Error

В добавлении к этому общую инфраструктуру Api, Alert, Form, OAuth можно положить в Shared:

src/Shared/Api 
src/Shared/Alert, 
src/Shared/UI/Form
src/Shared/OAuth

Только вот у OAuth имеется зависимость от Layout. Прежде чем поместить в Shared - придётся избавиться от этой зависимости.

Откуда пришла такая мысль? Это Feature Sliced Design. Правда там предлагается ещё разделить Feature и Entity по отдельным папкам. Я бы этого делать не стал. Ведь Feature, как мне кажется, это как Command из с бакенд приложения. Команды никогда не выносятся в src.

В итоге получилась бы следующая структура:

└── src/
    ├── App/                    # Layer: Приложение
    |                           #
    ├── Process/              	# Layer: Процессы (опционально)
    |   ...                     #
    |                           #
    ├── Page/                   # Layer: Страницы
    |   ├── {SomePage}/ 		#     (н-р страница Join, Error, Home)
    |   ├── Layout 			#     (шаблоны страниц)
    |   ...                     #
    |                           #
    ├── Widget/                 # Layer: Виджеты
    |   ├── {SomeWidget}/       #    (н-р виджет Header)
    |   ...                     #
    |                           #
    ├── {SomeFeature}/          # Layer: Фичи
    |   ├── {SomeFeature}/		#	  (н-р фича Auth)
    |		├── Entity 			#     (н-р сущность User)
    |   ...                     #
    |   ...                     #
    |                           #
    ├── Shared/                 # Layer: Переиспользуемые ресурсы
    |   ├── Api/                #     Логика запросов к API
    |   ├── Alert/              #     Всплывающие окна
    |   ├── Config/             #     Конфигурация приложения
    |   ├── OAuth/              #     OAuth
    |   └── Ui/					# 	  UIKit приложения
    |		├── Form			#         
    |   ...                     #
    |                           #
    └── index.tsx/              #

1. Что можете сказать по такой структуре?
2. Что можете сказать в целом о подходе Feature Sliced Design, если Вы с ним знакомы?

При желании можно получше подумать о структуре и в целом можно её сделать практически такой, как на Backend приложении. Это было бы полезно для ориентации в проектах. Особенно в Full stack разработке.