Question

How to use atom component inside a atom component in react

Answer 1

Answer:

Explanation:

When we started to use Atomic Design within React we had to adjust some rules of the methodology to ensure that components were reused as much as possible, that they were stateless, without styles of positions and very specific margins so to avoid any side effects in the pages of application.

So with each new component we asked ourselves: “Are these components generic enough to avoid specificity and/or repeated code in whatever context they are used?”

So we were able to write a few rules:

The Atomic Design should have a file of variables and it must be imported by each component;

The atoms should be written without margins and positions;

Only the molecules and organisms can set the positions of atoms, but these stacks can’t have any styles of margins and positions;

Templates have only one function: to set the grid of pages but never positions of specific components;

Pages render the components with a template defined and it’s here that the Atomic Design will be connected to the rest of the application;