Как структурировать файлы в больших проектах 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