¿Qué es un Layout?

Un layout es utilizado para mantener una estructura consistente en todo el sitio web o aplicación. Puedes utilizar librerías como react-router-dom para crear rutas y definir qué componentes se van a renderizar en cada sección del sitio.

Este layout será un componente, que se comportará como un padre, ya que a él le podemos asignar todos los estilos que nosotros deseamos que sean transferidos a sus childrens. Así obtenemos un componente que podemos usarlo como un wrapper que envolverá a cualquier otro componente hijo y le permitirá usar todos los estilos que posee.

De esta manera conseguimos esa consistencia para que nuestros componentes hijos compartan los mismos estilos, por ejemplo, de márgenes, tipos de letra, colores, etc, que su componente padre.

Uso

En nuestro proyecto dentro de los Components creamos uno nuevo, Layout/index.js. En este procedemos a crear un div que contenga todos los estilos deseados y adentro definimos como props children.

import React from 'react';

const Layout = ({ children }) => {
  return (
    <div className='flex flex-col items-center mt-20'>
        {children}
    </div>
  )
}

export default Layout;

Para implementarlo, importamos el componente Layout y envolvemos a nuestro componente hijo, por ejemplo a MyOrders:

import Layout from '../../Components/Layout';

function MyOrders() {
  return (
    <Layout>
      <div>MyOrders</div>
    </Layout>
  );
}

export default MyOrders

Así podemos continuar con cada componente, o incluso si nos conviene más envolver toda la aplicación, para así ya no envolver individualmente cada componente:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './Pages/APP'
import './index.css'
import Layout from './Components/Layout'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Layout>
      <App />
    </Layout>
  </React.StrictMode>,
)