DEV Community

Opinionated React: Folder Structure & File Naming

faraz ahmad on February 16, 2020

Intro I've been working with React for over 4 years. During this time, I've formed some opinions on how I think applications should be. ...
Read full post
Collapse
 
jkhaui profile image
Jordy Lee •

Great template, I follow something similar. The one thing that annoys me when looking up react projects on GitHub is they all use different directory structures.
This is one area I wish react was more opinionated about, even if it just involved recommended guidelines for project structure

Collapse
 
farazamiruddin profile image
faraz ahmad •

It took me a long time to land on this. I tried several different styles, but this is the one that has worked the best for me thus far.

Collapse
 
jannikwempe profile image
Jannik Wempe •

Interesting...
I have a similar approach. Would be very interesting to see the structure inside of /components. Is there any nesting? A folder for each component with styles/test/... next to the component file itself? A single index.ts to re-export all components? Or a index.tsx in every components folder?

As you can see, I think there are many different approaches to the /components folder. Would love a followup article or edit on that.

Do you have any project where you applied that structure, that you can share? Would be interested in some API files.

Thanks :)

Collapse
 
farazamiruddin profile image
faraz ahmad • • Edited

I don't use any nesting in any of the folders. The shape of of my components folder is like so:

/components
  /__tests__
    Button.test.tsx
Button.tsx

I usually don’t have styles files in my apps. I use plain css frameworks like tailwind or bootstrap so there is not a separate styles file.

Collapse
 
connerthebush profile image
Conner Bush • • Edited

I see you have /components for shared components and /pages for the exact page matches, but what do you do with one-off components? For example, a Contacts.jsx page has a ContactList component. It’s not a shared component, but it’s not a page, either. I suppose in this design those components either are flattened into the one page component or live as a separate component but in the same file as the page. Is that correct?

Collapse
 
farazamiruddin profile image
faraz ahmad •

That's correct! I will split up my page into sub-components, all within the same file as the page.

import * as React from 'react'

export const ContactsPage: React.FC = () => {
  return (
    <div>
      <h1>Contacts</h1>
      <ContactsList />
    </div>
  )
}

const ContactsList: React.FC = () => { ... }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vincevegas profile image
vince vegas •

What if the component item does have a third-party library attach to it
eg.

import React from 'react';
import Zoom from 'react-reveal/Zoom';

const movieCard = () => (

....content

)

Is this the right structure if one component has some functionality on it

Collapse
 
aubreyhbarkun profile image
aubrey •

Can't tell you how much I appreciate this. Simple, concise. Well done.

Collapse
 
anuraghazra profile image
Anurag Hazra •

Hey great article, I wanted to ask you, how do you structure your graphql related files (client, queries, mutations, generated code)

Collapse
 
farazamiruddin profile image
faraz ahmad •

I like to write my GraphQL queries and mutations in-line within the component file, since my queries are almost always 1:1 with the component that is using it. You can see this here: dev.to/farazamiruddin/an-opinionat...

As far as generated code, I keep a top level folder for all generated code and title it __generated__. All the auto-generated type definitions go in there.

Collapse
 
felipetomazec profile image
Felipe Tomaz •

Awesome articles, man!

Collapse
 
farazamiruddin profile image
faraz ahmad •

Thank you! I appreciate it 🙏🏽

Collapse
 
hanuz06 profile image
Andrey Li • • Edited

Thank you Faraz. I started a new project and follow your folder structure. I wonder how do you use AppRoutes.tsx? Is it just used in App.tsx like <AppRoutes/>.

Collapse
 
nuwannnz profile image
Nuwan Karunarathna •

Interesting article! btw I have a question. Where do you put the files related to Redux like the actions and redcuers?

Collapse
 
farazamiruddin profile image
faraz ahmad •

Thank you! I don't use redux, but if I did (or any other state management library for that matter), I would follow the same principle; flat folders, long file names.

/src
  /actions
    user-actions.ts
    movie-actions.ts
  /components
    MovieList.tsx
  /reducers
    user-reducer.ts
    movie-reducer.ts
Collapse
 
neuhaus93 profile image
Lucas Arendt Neuhaus •

What about custom hooks? Does it go on services?
Really liked the template, but that's one thing I would have in mine (a hooks/ folder).