Crear un componente Livewire en Laravel te permite construir interfaces interactivas sin escribir JavaScript ni abandonar el ecosistema PHP. Aprenderás a generar componentes reutilizables, pasarles datos desde una vista y ejecutar acciones dinámicas como mostrar u ocultar formularios con un solo clic.

¿Cómo se genera un componente Livewire desde la terminal?

La generación de un componente parte de un comando de Artisan que crea automáticamente la estructura necesaria.

En el proyecto teníamos un problema común: la lógica de los comentarios estaba duplicada tanto en la pregunta como en la respuesta. La solución fue extraer ese bloque hacia un componente reutilizable. Para crearlo, ejecuta:

bash php artisan make:livewire comentario

Al presionar enter, Livewire genera dos archivos: uno con la lógica en PHP dentro de la carpeta de componentes y otro con la vista Blade. Esa separación es clave para entender cómo funciona la herramienta.

¿Qué diferencia hay entre Livewire y Volt? Livewire separa la lógica y la vista en dos archivos. Volt permite escribir ambas en un mismo archivo. Si vas a usar Volt, primero entiende bien Livewire.

¿Cómo se invoca un componente Livewire dentro de una vista Blade?

La sintaxis para insertar un componente se parece a una etiqueta HTML, pero con el prefijo livewire.

En la vista de las preguntas, identificamos la sección con la lista de comentarios y el botón agregar comentario, y la reemplazamos por la llamada al componente. Para evitar acoplarlo a un modelo específico, usamos una propiedad llamada commentable, ya que tanto preguntas como respuestas pueden recibir comentarios. La invocación queda así:

blade <livewire:comentario :commentable="$pregunta" />

El mismo componente se reutiliza debajo de cada respuesta, simplemente cambiando el valor que se pasa a commentable. Esto demuestra el principio de reutilización: una sola pieza de código sirve en múltiples contextos.

¿Cómo se reciben los datos en la clase del componente?

Dentro del archivo PHP del componente declaras una propiedad pública del tipo Model, porque puede llegar tanto una pregunta como una respuesta. Luego, en el método render, pasas los comentarios a la vista consultándolos a través de la relación:

php public Model $commentable;

public function render() { return view('livewire.comentario', [ 'comentarios' => $this->commentable->comentarios ]); }

Con eso, la variable $comentarios queda disponible en la vista y se renderiza correctamente.

¿Cómo se añade interactividad con wire:click y métodos públicos?

La magia de Livewire aparece cuando conectas eventos del navegador con métodos PHP del componente.

Para mostrar u ocultar un formulario de comentarios sin recargar la página, declaramos una propiedad booleana llamada showForm y la usamos en una condición dentro de la vista. Si es false, se muestra el botón agregar comentario. Si es true, aparece el formulario.

El paso clave es reemplazar el href del enlace por un evento Livewire:

blade <button wire:click="toggle">Agregar comentario</button>

Luego defines el método en la clase:

php public bool $showForm = false;

public function toggle() { $this->showForm = !$this->showForm; }

El término toggle significa conmutar: si está en falso, lo convierte a verdadero, y viceversa. Al hacer clic, la página no recarga, solo cambia el estado del componente y se actualiza la vista.

¿Qué hace wire:click en Livewire? Vincula un evento de clic del navegador con un método público del componente PHP. Permite ejecutar lógica del servidor sin recargar la página.

¿Para qué sirve la propiedad commentable? Es una propiedad polimórfica que recibe cualquier modelo capaz de tener comentarios, como una pregunta o una respuesta, y permite reutilizar el mismo componente.

Habilidades y conceptos clave que aparecen en la clase

A lo largo de la práctica se trabajan ideas que conviene fijar para usarlas en cualquier proyecto Laravel.

• Comando make:livewire: genera la clase y la vista del componente en un solo paso [0:30].
• Separación lógica y vista: Livewire entrega dos archivos, mientras que Volt los unifica [1:00].
• Propiedades públicas tipadas: usar Model como tipo permite recibir entidades distintas en el mismo componente [3:30].
• Relación commentable: patrón polimórfico para que distintas entidades compartan comentarios [2:00].
• wire:click: directiva que conecta eventos del DOM con métodos PHP [4:30].
• Método toggle: patrón habitual para alternar estados booleanos como mostrar u ocultar formularios [5:00].

Ahora te toca a ti: implementa este componente de comentarios y asegúrate de que también funcione dentro del módulo blog. ¿En qué parte de tu proyecto vas a reutilizar tu primer componente Livewire? Cuéntame en los comentarios.