Creación y Uso de Componentes Blade en Laravel

Cuando el diseño visual ya está resuelto, el siguiente paso es optimizar el código para que sea fácil de mantener a largo plazo. Aquí es donde los componentes Blade de Laravel se convierten en aliados indispensables: permiten aislar fragmentos de HTML, reutilizarlos en distintas vistas y aplicar cambios en un solo lugar que se reflejan en todo el sitio.

¿Cómo se crea un componente Blade con Artisan?

El proceso comienza en la terminal de Visual Studio Code. Con el comando php artisan make:component se genera la estructura necesaria [01:07]. En el ejemplo, el componente se llama CourseCard (tarjeta de curso), aunque puede llevar cualquier nombre descriptivo.

bash php artisan make:component CourseCard

Al ejecutar este comando, Laravel crea automáticamente un archivo dentro de la carpeta resources/views/components/ [01:38]. Inicialmente ese archivo está vacío y listo para recibir el HTML que se desea aislar.

¿Qué contenido se coloca dentro del componente?

Del archivo Livewire original se extrae únicamente el diseño de cada tarjeta de curso, sin incluir el @foreach. La lógica de consulta permanece en la clase Livewire; el componente Blade solo se encarga de la presentación visual [02:06].

• Se corta el bloque HTML que representa una tarjeta individual.
• Se pega dentro del archivo del componente Blade.
• Se organiza el código para que quede limpio.

¿Cómo se invoca el componente en las vistas?

Utilizar el componente es extremadamente sencillo. Se emplea la sintaxis <x-nombre> [02:25]:

blade @foreach($cursos as $curso) <x-course-card :curso="$curso" /> @endforeach

• La etiqueta <x-course-card> llama al componente.
• El atributo :curso pasa la variable necesaria para que el componente renderice la información de cada curso.
• Esta misma línea se puede reutilizar en cualquier vista que necesite mostrar tarjetas de cursos.

¿Por qué un componente Livewire puede contener componentes Blade?

Un componente Livewire maneja consultas a la base de datos, lógica de negocio y diseño. Dentro de su vista puede incluir N cantidad de componentes Blade [03:24]. Cada componente Blade funciona como un fragmento de HTML aislado, sin mayor complejidad.

Esta separación ofrece ventajas claras:

• Reutilización real: la misma tarjeta aparece en la sección de cursos similares, en últimos cursos y en el home, todo apuntando a un único archivo.
• Edición centralizada: si el cliente pide eliminar el extracto de las tarjetas, el cambio se hace en un solo sitio y se refleja en todas las páginas [03:44].
• Organización superior: el código queda estructurado por responsabilidades.

¿Qué problemas resuelve trabajar con componentes?

En el desarrollo tradicional era común copiar y pegar bloques de HTML en múltiples archivos. Esto generaba un escenario problemático: al solicitar un cambio, el programador lo aplicaba en algunas zonas pero olvidaba otras, provocando inconsistencias y errores difíciles de rastrear [04:30].

Trabajar con componentes Blade elimina ese riesgo:

• Un único componente, una única edición, múltiples efectos en todo el sitio web.
• La variable $cursos se genera en la clase Livewire correspondiente, ubicada en app/Http/Livewire/ [04:52], y se pasa al componente Blade de forma transparente.
• Se obtiene el mismo diseño visual pero con una arquitectura de código preparada para crecer sin acumular deuda técnica.

El concepto de mantenibilidad queda resuelto desde el inicio: cada pieza visual vive en su propio archivo, cada consulta en su clase, y la conexión entre ambos es clara y predecible. Si estás construyendo un proyecto con Laravel y Livewire, aplicar esta práctica desde el primer día te ahorrará horas de trabajo en el futuro. ¿Ya utilizas componentes Blade en tus proyectos? Comparte tu experiencia en los comentarios.