Как структурировать файлы в больших проектах React

React — это очень открытая библиотека компонентов, и в ней нет определенного способа компоновки файлов. Это может быть хорошо для небольших проектов, но плохо (отчасти) для очень больших проектов.

Я придумал то, что я считаю достойным способом структурирования файлов для больших проектов, не только реактивных, но и всех видов интерфейсных проектов. Это то, что я предлагаю для своего конкретного случая использования, но это может не подходить для всех. Если вы согласны с этим, отлично, если нет, тоже хорошо, я очень открыт для обратной связи, поэтому не стесняйтесь добавлять комментарии ниже или связываться со мной в Твиттере.

Если вы хотите учиться с помощью видео, вам повезло, потому что основная часть этой статьи посвящена именно этому. Если вам не нравятся видео, мне очень жаль, однако вы можете посмотреть TL:DR ниже, чтобы получить представление о том, что я считаю идеальной файловой структурой для большого внешнего проекта, и перейти к видео, если вы хотите более глубокое объяснение.

TL:DR

public/
package.json
index.ts
src/
│
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.tests.tsx
│   │   └── Button.css
│   ├── Dropdown/
│   ├── Toaster/
│   ├── Header/
│   └── Footer/
│ 
├── layouts/
│   └── StoreLayout/
│       ├── components/
│       │   ├── SearchDropdown/
│       └── StoreLayout.tsx
│ 
└── pages/
    ├── StoreProductPage/
    │   ├── components/
    │   │   ├── Carousel/
    │   │   └── ProductCard/
    │   └── StoreProductPage.tsx
    │
    └── StoreCheckoutPage/
        ├── components/
        │   └── ProductCheckoutCard/
        └── StoreCheckoutPage.tsx

Видео объяснение