👀 See Sanity in action: Watch product demo now →

How to Structure Folder Components

7 replies
Last updated: Mar 16, 2021
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?
Mar 14, 2021, 12:47 PM
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/
Mar 14, 2021, 1:07 PM
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.
Mar 15, 2021, 8:33 PM
user L
How would you deal with this? Any suggestions?
Mar 15, 2021, 11:32 PM
😄
Mar 16, 2021, 6:12 AM
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.
Mar 16, 2021, 6:12 AM
user S
same here! I hate importing like this:
import BlogHeader from "components/BlogHeader/BlogHeader".
Mar 16, 2021, 11:28 AM
^^ 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 😄
Mar 16, 2021, 11:45 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in