Sundly
Separate container & presentational components
@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:
- Atoms: Buttons, Labels, etc.
- Molecules: Search Bar, Information Cards, etc.
- Organisms: App sections. Header, Body, Footer, etc.
- 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
@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 😄