Primer componente Livewire con comentarios

Contenido del curso

Configuración

Diseño de un foro

Livewire

Optimización

CRUD

Detalles finales

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:43

Primer componente Livewire con comentarios

Curso de Laravel

Clase 11 de 25

Clase 11 / 25

Recursos

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.

Configuración

Desarrollo de foro interactivo con Laravel y LiveWire

Instalación de Laravel con kit de inicio LiveWire

Creación de modelos, migraciones y factories en Laravel

Creación de datos falsos para pruebas con factories y seeders

Diseño de un foro

Flujo completo de Laravel: ruta, controlador, modelo y vista

Diseño home en Laravel con Tailwind CSS

Desarrollo de página de detalles con rutas dinámicas en Laravel

Creación de componentes Blade para plantillas reutilizables en Laravel

Pregunta con respuestas dinámicas en Laravel

Relaciones polimorfas para comentarios en Laravel

Livewire

Primer componente Livewire con comentarios

Guardar comentarios en tiempo real con Livewire

Formulario para responder preguntas en Laravel

Botón de corazón reactivo con Livewire

Optimización

Refactorización de componentes Livewire y optimización con Traits

Eliminar preguntas y datos huérfanos en Laravel

Eliminación en cascada desde el modelo Laravel

Cómo eliminar el problema N+1 en Laravel

CRUD

Cómo crear el index del foro en Laravel

Crear preguntas en un foro con Laravel

Formulario de edición con rutas edit y update

Detalles finales

Control de acceso con middleware en Laravel

Políticas de acceso en Laravel con Blade

Separación de responsabilidades en controladores Laravel

URLs limpias con slugs en Laravel

Primer componente Livewire con comentarios