There are many guides on how to structure web apps and React in particular.
Move files into folders based on Smart/Dumb components.
Organise th...
For further actions, you may consider blocking this person and/or reporting abuse
I hate this approach. Oh, how I hate this approach.
Let's say - you need a Button.
Even worse scenario - you have keep this component discoverable. You have to know there to look for it.
Separation shall not be done by how something is made - it's an implementation detail. Separation shall be done by a responsibility you can reason about -
screen
,page
,component
,internal component stuff which shall not be ever used outside
.Smart/Dumb component separation is also quite dumb. It's a right separation, but you might have both components if not in one file, then in one directory.
Separation should be made in a way you never would be forced to rename or move your component after refactoring, and it would be always easy to find it. And use. And test.
Thank you for this strong opinion :)
It is always good to know what are the drawbacks of a given approach.
This idea is a living process.
Thanks to your feedback, maybe we will optimize it, or discover even something better.
I've tried this approach and I didn't like it. Mostly because I found it problematic to find the components I was looking for.
For example: imagine a
Button
withIconButton
andProgressButton
variants. In this case, theButton
goes to Atoms,IconButton
to Molecules (as it contains other components) and theProgressButton
to organisms (as it tracks some progress in the state). Now, it wasn't always clear to me where should I look for the specific component. And this was an even bigger problem for someone who just joined the project. It's a lot easier to have related components next to each other.(btw. I know that the
ProgressButton
could just acceptprogress
and be a Molecule, treat it just as an example!)This wasn't a problem when the project was small, but as soon as it became bigger, it was a lot easier to just put all components into one folder, or just structure them by
feature
.But that's just my opinion :D It "feels right" for me - quoting Dan Abramov's words - but everyone feels different :)
Thanks for this insight ;D
I wonder if I will have the same feeling when my project grows.
Cool idea. I use
screens
andcomponents
, but the components directory gets rather unwieldy xDSame here, tho I have a folder called "modules" which I believe is similar to the
Utils
mentioned in the main thread.You could try dividing your components folder (instead of src) using the organic analogy, perhaps that would help?
I got
modules
components
screens
utils
The components directory is the biggest, but I'm looking into react-native-elements right now, so maybe this will remove the need for most of my small/dumb components.
I like the idea, but personally I dont think the
logic|state => Organism
rule should be so strict. In my experience there would be many times in which a component such as a form uses stateful logic, but doesn't contain "application specific" logic (I hope that term makes sense), which would make it be more suited as a Molecule rather than an Organism.I like this separation, it’s very interesting. The naming is also intuitive.
I use Redux on my projects, so for me Organisms would be connected components.
For Atoms could be PureComponents, that would be a good approach, simplifying its lifecycle.
Cool idea. The pages and other components coexist in Organisms. Have you had any difficulty with the coexistence? I tried multiple ways to structure so far with no luck.
Right now, I use pages, containers, components to structure my project.
If you like you can add Pages (if they combine multiple Organism). We need to listen to Dan and do what works for us :)
I would suggest you to test it and see how you like it.
if e.g a Card use a CardHeader, the CardHeader should be in atoms in a Card folder or in the molecules folder
I don' like long import strings, so in my case, I want to have a flat folder structure.
I prefer to not do multiple nestings. So I have only one Atom folder, one Molecules ,etc.
I think that with something like this:
it gets harder to navigate the project.
But please, test it and see if it works for you :)
This is really cool.
I aways get confused on how to manage my files on project. Moving files doesn't seems right unless you have a better folder structure.
You use an example of a Form as a molecule, but say that once they have logic they are an organism. Wouldn't a form have logic?
🤔
Valid point.
I had in mind more of a business logic component, but a form should also fall into Organisms.
I'm editing it to 'Card'
thx :)