/    Sign up×
Articles /Pin to ProfileBookmark

You’ve been structuring files in projects wrong

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

├── 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).



Help @richardoliverbray spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,