Cuando trabajas con múltiples páginas en una aplicación React, mantener una apariencia visual uniforme puede convertirse en un dolor de cabeza. La solución más elegante es crear un componente layout que actúe como contenedor compartido, evitando repetir código y garantizando que todas las vistas tengan los mismos estilos base.
¿Por qué necesitas un componente layout en tu proyecto React?
Imagina que tienes páginas como Home, My Account, My Orders y Sign In. Todas necesitan ciertos estilos comunes: que el contenido esté centrado, que exista un margen superior para que no se solape con el navbar, que la distribución sea consistente. Sin un layout, tendrías que copiar y pegar esos mismos estilos en cada página, lo cual rompe un principio fundamental: no repetir código.
El componente layout funciona como un wrapper o encapsulador [01:06]. Envuelve el contenido de cada página y aplica los estilos compartidos en un solo lugar. De esta forma, si en el futuro necesitas ajustar un margen o cambiar la alineación, solo modificas el layout y todas las páginas se actualizan automáticamente.
¿Cómo se construye el layout paso a paso?
Primero, dentro de la carpeta components, creas una nueva carpeta llamada layout con su archivo index.jsx [02:20]. La estructura del componente es sencilla:
jsx
const Layout = ({ children }) => {
return (
<div className='flex flex-col items-center mt-20'>
{children}
</div>
);
};
export default Layout;
¿Qué significa la prop children?
La prop children es un concepto clave en React [03:52]. Permite que el componente reciba cualquier elemento hijo sin saber de antemano qué será. Estás preparando el layout para que sea un encapsulador genérico: dentro puede venir Home, My Account o cualquier otra página.
¿Qué hacen las clases de Tailwind aplicadas?
Cada clase cumple un propósito específico:
- flex: activa el modelo de caja flexible.
- flex-col: organiza los elementos hijos en columna [02:55].
- mt-20: añade un margen superior para que el contenido no quede oculto detrás del navbar [03:10].
- items-center: centra los elementos horizontalmente [05:18].
El margen superior es especialmente importante porque el navbar tiene posición fija. Sin ese espacio, el contenido de las páginas se escondería debajo de la barra de navegación.
¿Cómo se integra el layout en cada página?
Una vez creado el componente, lo importas en cada vista y reemplazas el div contenedor por Layout. En Home, por ejemplo [03:22]:
jsx
import Layout from '../../components/layout';
const Home = () => {
return (
<Layout>
Home
</Layout>
);
};
Este mismo patrón se replica en todas las páginas: My Account, My Orders, Not Found y Sign In [06:02]. El proceso es mecánico pero garantiza que cada vista comparta la misma estructura base.
Durante la implementación también surgió un detalle importante: al navbar le faltaba la propiedad top-0 [04:20] para que quedara correctamente pegado en la parte superior del navegador. Pequeños ajustes como este son normales y se detectan al probar visualmente.
¿Qué beneficios concretos obtienes con este patrón?
- Consistencia visual: todas las páginas comparten márgenes, alineación y distribución.
- Mantenimiento sencillo: un cambio en el layout se refleja en todas las vistas.
- Código limpio: eliminas la duplicación y mantienes componentes con responsabilidades claras.
- Flexibilidad: puedes decidir si centrar todo verticalmente o dejar que cada página controle su propio justify-content [05:30].
Con el navbar funcionando y el layout aplicado en cada página, la base de la aplicación queda sólida y lista para construir componentes más complejos como las cards de productos. Si ya implementaste ambos componentes, comparte en los comentarios cómo quedó tu proyecto y qué ajustes personalizaste en tu layout.
