How do you organize your code / folder structure in you React app?

I have been searching for the holy grail of folder structure. Scaleable, maintainable, testable, and visually pleasing.

Comments

[JD Gonzales]

At work, we structure our app following the atomic design system. We’ve found it to be a great way to work and collaborate closely with designers and build reusable components. There’s minor deviation in parts but we mostly stick to that pattern. We literally have folders labeled, atoms, molecules, organisms, templates, and pages. It’s working great for us!

That coupled with styled components, and styled themeing makes our frontend development more logic/state/side effects focused and less on the “style” per se.

It’s still a WIP but both designers and developers are fans of it.

[Matt G]

That is super cool. I am actually on a team at work in charge of test driving atomic design w/ pattern lab. It is a long process, but I am enjoying so far as well.

Last night I decided to try it out on my personal project and I like the structure so far. Breaking my components folder into atoms, molecules, organisms, and pages has offered me a lot of clarity. The only problem is deciding which category my existing modules fit into.

Are you using Pattern Lab or are you using another system to work with your designers?

[JD Gonzales]

Wow I'm super late to this comment Sorry!

We've been using a combination of things we're experimenting with. We've tried using Framer X but getting our coded components into it is proving difficult. The ideal setup with them is nice because then you get the code for the designed component and it's prop-types and you have to less work from the ground up. Haven't quite figured that out.

Right now we're using good solid documentation in Notion. Our designer builds a feature, uses Storybook to figure out what components are available to him, and then documents new ones and places sizes for different browser widths etc. That's working for us right now until we come up with a more robust solution.

Atomic design is great. I was recently at React Day New York and a lot of companies use that same pattern to organize their component library.

[Abhijit Parida]

I like to keep things simple so I put all my components are in src/components and my pages are in src/pages (suffixed with -Page). All API stuff is in src/api and I also have a src/utils for stuff that doesn't fit anywhere else.

It looks something like this:

src/
  api/
    auth.js
    user.js
  components/
    Header.js
    Header.css
  pages/
    LandingPage.js
    DashboardPage.js
  utils/
    registerServiceWorker.js

Recommended reading material: hackernoon.com/the-100-correct-way...