No comprendo muy bien lo de componentes, contenedores. Lo que he leido es que hay contenedores Smart Components (con logica) y Dumb Compo...

Tambien tengo esa misma duda de componentes y contenedores

@Juan Daniel Zuluaga Serna Quizá este artículo te ayude a comprenderlo mejor: React Clean Architecture Respecto a los Dumb Components y Smart Components: Smart o Stateful: Tienen lógica y manejan estados o data. Dumb o Stateless: No tienen lógica, su función es meramente "pintar" algo en la pantalla. Ve este vídeo para que te quede más claro. (Puedes activar los subtítulos si no dominas el inglés aún) Respecto a los containers: En realidad tu puedes hacer que cualquier elemento (modal, container, input, button, nav, etc) sea un componente, tan solo con el hecho de crearlo en un archivo independiente, qué tanto hay que modularizar (crear estos componentes) depende de tu proyecto y de si vas a reutilizar ese componente en varias secciones de tu proyecto, lo que te permitirá que tu código sea más limpio y escalable. Por ejemplo, tienes ya tu prototipo te das cuenta de que usarás un container que tiene los mismos estilos para tus modales y para tus cards, fondo blanco, bordes redondeados y sombra, lo conveniente sería crear un componente que llamaremos Container el cuál tendrá esos estilos y recibira un child.

const Container = ({ children }) => {
  return <div className="container ">{children}</div>;
};

Al hacer esto puedes llamarlo en cualquier lugar de tu aplicación, por ejemplo, supongamos que en tuu page Home, tendrás varias cards, entonces creas un componente nuevo que se llamara Card. Card llamará a Container y dentro de Container puedes meter más componentes o simple jsx.

const Card = () => {
    return (
     <Container>
            	<Title/>
            	<Content/>
            	<button className='button'>Go</button>
     </Container>
    )
}

Supongamos que en otra page llamada Login y tendrás un form, el cual decides no será un componente, porque no lo utilizarás en ningún otro lado. Este, tendrá los mismo estilos de "fondo" que la card, así que reutilizas el componente Container.

const Login= () => {
    return (
    <Container>
      		<Title />
      		<input id="name" className="inputs" type="text" placeholder="Nombre" />
      		<input id="mail" className="inputs" type="mail" placeholder="Correo" />
      		<input
        		id="password"
        		className="inputs"
        		type="password"
        		placeholder="Contraseña"
      		/>
      		<button className="button">Log in</button>
    </Container>
    )
}

Espero que te ayude, saludos 😄🚀