DEV Community

Shemona Singh
Shemona Singh

Posted on • Edited on

1

What file structure makes the most sense to you?

File structuring seems to be one of those overly debated topics, to the point where even the React documentation advises not to stress out over it.

That being said, for any project it does help a mighty amount to have a file structure that makes it easier for you to navigate.

I primarily use React, so I'll share a peak into the source of my React projects with some example files. For the components folder, organizing it according to Brad Frost's Atomic Design enables me to think like an architect as I build out UIs.

src/
  components/
    atoms/
      Label/
        tests/
          Label.test.tsx
        Label.tsx
        Label.scss
        Label.stories.tsx
    molecules/
      TextInput/
        tests/
          TextInput.test.tsx
        TextInput.tsx
        TextInput.scss
        TextInput.stories.tsx
    organisms/
      Form/
        tests/
          Form.test.tsx
        Form.tsx
        Form.scss
    pages/
      ContactUs/
        ContactUs.tsx
    templates/
      SignedIn/
        SignedIn.tsx
      SignedOut/
        SignedOut.tsx
  images/
    logo.svg
  redux/
    actions/
    reducers/
      store.js
  styles/
    main.scss
    variables.scss
  App.tsx
  App.scss
  index.tsx
Enter fullscreen mode Exit fullscreen mode

What ways of file structuring help (or hinder) you the most?

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay