Separate container & presentational components

[benoror]

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

[dajvisha]

@benoror I was thinking about a better way to struct React Projects to be scalable and easier to understand, and I find this book Atomic Design. The concept is the following.

Build a web application using the Atomic Design Methodology for UI:

1. Atoms: Buttons, Labels, etc.
2. Molecules: Search Bar, Information Cards, etc.
3. Organisms: App sections. Header, Body, Footer, etc.
4. Templates: Manages the logic and organisms distribution - A Container.

It would be a good idea to have this concept in mind for this project.

Bonus: The heartache of design at scale

[benoror]

@diegoajv Awesome! Thanks for the refs. 100% agree, design-driven is the foundations for great UI/UX, thus great products! Tbh, I'm not very good at the design department, therefore I struggle with it. That's why the code it's messy (it started as a hackweek Mockup, remember?)

Regarding Atomic Design, I fully agree it should be used as well, specially when dealing with Components (like in React). But that doesn't clash with the "container & presentational components" approach, it rather complements it. You can read more about it here, by the React wizard @gaearon (Dan Abramov):

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

spoiler alert: there's is an even newer approach, but probably too bleeding-edge and hard to grasp (at least for me) at this moment: React Hooks

p.d. Feel free to contribute anything, no matter how small, if you'd like 😄