Cómo moverse por bloques de código con React y Tailwind

Mientras trabajaba en un sitio web de Next.js, tuve la necesidad de mover un componente React a un lugar completamente diferente en mi marcado, dependiendo del tamaño de la pantalla.

En particular, tenía un componente de la barra lateral que quería en el lado izquierdo de la pantalla en una pantalla grande, pero antes del contenido en una pantalla más pequeña.

Debido a la forma en que organicé el marcado HTML y el CSS, no me quedó claro de inmediato cómo realizar esta transición sin volver a escribir una buena parte de ella.

Así que miré a Tailwind para darme una buena solución.

Y así fue: agregué el componente dos veces en la pantalla, asignando la clasehidden xl:blocka la parte de la "pantalla grande", yxl:hiddenal fragmento de las pantallas más pequeñas:

<div className="hidden xl:block">
  <Sidebar />
</div>

<div className=“xl:hidden”> <Sidebar /> </div>

El inconveniente, por supuesto, es que el componente se renderiza dos veces, pero al ser un componente de presentación simple sin lógica, era un compromiso con el que podía vivir.

Descarga mi gratisReact Handbook


Más tutoriales de react: