Do you have any examples of organising code by feature? I'm curious as to how that goes as I very much have a similar approach to this article at the moment, but I'm definitely open to trying different methods.
Ignore me, I should learn to google things more haha. I'm guessing you mean something along the lines of this right? reactjs.org/docs/faq-structure.htm...
That's interesting, I'll have to try that approach in my next project. It can be super frustrating sifting through a huge components directory so having one common directory for anything shared and everything else being at a page or feature level could look more organised.
Yh this is it exaxtly. I haven't done a lot of next.js so I'm not sure how this works with pages, but essentially you have a folder for a feature, say like "user" then within that you can have your UserProfile component, your EditProfile component and whatever else all conveniently co-located. I also a proponent of having your tests next to their subject files so they're easy to update.
If these folders grow too large you can break them down into sub features.
As Robin has alluded to you can have a common folder. I in fact have a fairly large common folder, broken down into sub-features - e.g. common/buttons. I also don't like the index.js approach as someone else has mentioned so I would have common/buttons/SaveButton.js, common/buttons/CancelButton.js etc. Then one index.js file in buttons to export these.
For common you can even then add a webpack alias so you can import these from anywhere without lots of ../../, e.g. import { SaveButton } from "@common/buttons";
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Organising code by feature is the way forward. I shudder whenever I see /components...
Do you have any examples of organising code by feature? I'm curious as to how that goes as I very much have a similar approach to this article at the moment, but I'm definitely open to trying different methods.
Ignore me, I should learn to google things more haha. I'm guessing you mean something along the lines of this right? reactjs.org/docs/faq-structure.htm...
That's interesting, I'll have to try that approach in my next project. It can be super frustrating sifting through a huge
componentsdirectory so having onecommondirectory for anything shared and everything else being at a page or feature level could look more organised.Yh this is it exaxtly. I haven't done a lot of next.js so I'm not sure how this works with pages, but essentially you have a folder for a feature, say like "user" then within that you can have your UserProfile component, your EditProfile component and whatever else all conveniently co-located. I also a proponent of having your tests next to their subject files so they're easy to update.
If these folders grow too large you can break them down into sub features.
Seems to be maintainable, but how do you deal with shared and small components like buttons?
As Robin has alluded to you can have a common folder. I in fact have a fairly large common folder, broken down into sub-features - e.g.
common/buttons. I also don't like theindex.jsapproach as someone else has mentioned so I would havecommon/buttons/SaveButton.js,common/buttons/CancelButton.jsetc. Then oneindex.js filein buttons to export these.For common you can even then add a webpack alias so you can import these from anywhere without lots of
../../, e.g.import { SaveButton } from "@common/buttons";