New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separate container & presentational components #8

Open
benoror opened this Issue Nov 24, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@benoror
Copy link
Collaborator

benoror commented Nov 24, 2018

@diegoajv

This comment has been minimized.

Copy link

diegoajv commented Nov 29, 2018

@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

This comment has been minimized.

Copy link
Collaborator

benoror commented Nov 29, 2018

@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 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment