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

Matt G Dec 9 '18 ・1 min read

#discuss

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

DISCUSS (3)

Abhijit Parida

Dec 9 '18

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...

JD Gonzales

Dec 10 '18

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

Author

Dec 10 '18

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?

code of conduct - report abuse

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

Matt G Dec 9 '18 ・1 min read

What are "HTML-CSS-JS" and "CSS-in-JS", anyway?

What They Don't Teach You at a Computer Science Masters

Andrew Healey - Apr 24

Which way of centering via Flex do you prefer?

Antonio Radovčić - Apr 24

where should I apply for job change? any job portal recommandations?

SHARAD SHINDE - Apr 24

dev.to Follow Challenge!

robencom - Apr 24