Laravel: componentes BLADE Y USO BASICO.

Para que usar componentes?

Los componentes en BLADE nos ayudan a crear elementos dinámicos que podemos reutilizar en las vistas.

Existen dos enfoques para crear componentes:

• Componentes basados en clases.
• Componentes anónimos.

COMPONENTE ANÓNIMO

Los componentes anónimos se deben crear de manera manual; así que creamos el directorio resources/views/components y el archivo alert.blade.php utilizando siempre la convención Kebab case.

<div>
</div>

El archivo debe contener una etiqueta padre, la cual es generalmente un <div> con su correspondiente cierre, aunque puede ser cualquier otra etiqueta; esto lo hacemos para que todo este contenido se ubique dentro de esta etiqueta ya que es obligatorio si quieres utilizar variables que ayuden a dinamizar el contenido de los componentes, además mantener nuestro código organizado. Ahora vamos a escribir un texto estático para verificar su funcionamiento, aunque como ya se menciono, la idea de utilizar componentes, es que sean dinámicos.

<div>
Hola Mundo
</div>

Una ves creado el componente puede visualizarlo utilizando la etiqueta del componente en el body de la vista welcome.blade.php, que viene por defecto cuando creamos un proyecto laravel :

//resources/views/welcome.blade.php
<x-alert/>

La etiqueta del componente BLADE comienzan con una x- seguida del nombre en convención Kebab Case

Si recargamos nuestra pagina podemos ver el texto que colocamos en el componente.

Componente basado en clases

Para su creación podemos utilizar el siguiente comando ARTISAN utilizando la convención Pascal Case

php artisan make:component Alert 

El comando creara dos directorios:

• El primer directorio se crea en resources/views/components y contiene una vista para el componente llamada alert.blade.php
• El segundo directorio es app/View/Components y contiene la clase componente Alert.php

Para probar su funcionamiento puedes colocar algún texto en la vista del componente y utilizar su etiqueta para llamarlo desde una vista blade.

Solución de errores

Un error común es crear un componente basado en clases y eliminar el directorio app/View/Components junto con su contenido para utilizar solo la vista para el componente, como si fuera un componente anónimo, al hacerlo y recargar el navegador aparece el siguiente error:

Target class [Illuminate\Support\Facades\App\View\Components\Alert] does not exist. (View: /var/www/resources/views/welcome.blade.php)

podemos solucionar esto utilizando el siguiente comando ARTISAN que borra todos los archivos compilados de las vistas:

php artisan view:clear

Ahora puede recargar la pagina y no habrá ningún inconveniente.