How to Structure Folder Components

How do you guys structure your folder components? This is always a issue 😄 never happy about the outcome. I usually have a folder "components" and for instance a component Blog which is a folder and inside I have like BlogDetail, BlogOverview, BlogCard and a index.js where i export all the components. Wondering how you guys structure your projects?

Sounds a bit similar to the structure in Sara Vieira’s Opinionated React; which I do my best to follow.
Not because I think it’s entirely “correct”, but I was in need of conventions and it seemed as good as any!


https://opinionatedreact.com/

Ha, we’ve had this discussion at work recently. I’ve trained my eye to look at the folder name so I don’t mind it.

How would you deal with this? Any suggestions?

I like the

index.js

approach because I know what the “root” element is in a folder which has multiple components related to the “root”. But yeah you’ve got to look one step backwards to know where you are, occasionally.

same here! I hate importing like this:

import BlogHeader from "components/BlogHeader/BlogHeader".

^^ I’ve seen this solved by having an

index.js

that just exports the root element. But then I don’t love having that file in every directory just for that purpose 😄