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. ...
For further actions, you may consider blocking this person and/or reporting abuse
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
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.
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 singleindex.tsto re-export all components? Or aindex.tsxin every components folder?As you can see, I think there are many different approaches to the
/componentsfolder. 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 :)
I don't use any nesting in any of the folders. The shape of of my components folder is like so:
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.
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?
That's correct! I will split up my page into sub-components, all within the same file as the page.
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
Hey great article, I wanted to ask you, how do you structure your graphql related files (client, queries, mutations, generated code)
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.Awesome articles, man!
Thank you! I appreciate it 🙏🏽
Can't tell you how much I appreciate this. Simple, concise. Well done.
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/>.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).
Interesting article! btw I have a question. Where do you put the files related to Redux like the actions and redcuers?
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.