You’ve been structuring files in projects wrong

@richardoliverbray • 4,000

Tip the AuthorCopy linkTweet this

Oct 19.2022

Originally posted here https://medium.com/octopus-labs-london/how-to-structure-files-in-large-react-projects-48ee3dc424ed

Okay I admit, I’ve got your attention with a somewhat catchy title but hear me out.

When you tend to have large React, Svelte, Vue, any frontend framework (or library) project, it’s easy to put all the components in a components folder, containers in the containers folder and so on. Well I have a different approach for really large projects. Something that looks a bit like this

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

This way it’s easy to remove pages without other parts of the site. All the general components go in the components folder. But Page specific components go in a sub-folder.

Not quite convinced?

Check out my video explanation on YouTube.

Let’s talk

It would be good to hear your thoughts on this approach, if you like or dislike it, and if you have any ideas for improvements. You can find me on the socials, or you can just write a comment below (if this has one).