How to structure files in large React projects
React is a very open component library and there’s no specific way to layout files. This can be a good thing for small projects but a bad thing (kind of) for very large projects.
I’ve come up with what I think is a decent way to structure files for large projects, not just react ones but all kinds of front end projects. This is something that I am suggesting for my specific use case but this might not be suitable for everyone. If you agree with it great, if not that’s also fine, I’m very open to feedback so feel free to add a comment below or contact me on Twitter.
If you’re into learning through videos then you’re in luck because that’s where the bulk of this article is. If you’re not into videos then I’m truly sorry, however, you can look at the TL:DR below to get an idea of what I believe is the ideal file structure for a large front end project and jump to the video if you want a deeper explanation.
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
