Creación de componentes Blade con Laravel 10 en adelante

Descubre en este video cómo organizar eficientemente las plantillas y la lógica de las vistas de tu aplicación Laravel usando componentes de Blade. Aprenderás técnicas precisas para controlar dónde Blade renderiza tu HTML con la directiva @stack. Además, crearemos un nuevo componente y exploraremos la promoción de parámetros de PHP 8, una característica que simplificará y hará más elegante tu código. Este tutorial llevará tus habilidades con Blade a un nuevo nivel en tan solo unos minutos.

Esta lección incluye un video premium

Regístrate para ver este video y cientos de lecciones exclusivas.

Mira el código en GitHub: actual, resultado, comparación.

Migrando nuestra plantilla

Para comenzar, generemos un nuevo componente usando el comando php artisan make:component seguido del nombre de nuestro componente, en este caso NoteCard. Lo que se verá de la siguiente manera:

php artisan make:component NoteCard

Una vez que Artisan genere exitosamente nuestro nuevo componente, necesitamos hacer disponible la información de nuestras tarjetas declarándola como una propiedad pública a través del constructor de clase:

<?php

namespace App\View\Components;

use App\Models\Note;
use Illuminate\View\Component;

class NoteCard extends Component
{
    public function __construct(public Note $note)
    {
    }
}

Para esto utilizamos la Nueva forma de definir constructores en PHP 8.

No olvides importar el modelo de notas App\Models\Note en nuestro nuevo componente de notas

A continuación, vamos a mover el HTML de tarjetas hacia la vista del componente, y lo invocaremos en nuestro listado de notas, por cada iteración de nuestro bucle @forelse de la siguiente manera:

<div class="cards">
  @forelse ($notes as $note)
    <x-note-card :note="$note" />
  @else
    <p>No tenemos notas</p>
  @endforelse
</div>

Recuerda que para pasar la nota debes comenzar el atributo con dos puntos, de lo contrario pasarás la cadena literal "$note".

Migrando código JavaScript a nuestro Layout

Para mover nuestro código JavaScript, primero nos dirigiremos a /resources/layouts/app.blade.php, una vez aquí reemplazaremos la linea {{ javascript ?? '' }} que hemos agregado en lecciones anteriores, y utilizaremos en su lugar la directiva@stack, a la cual pasaremos como argumento el nombre 'scripts', justo antes del cierre de etiqueta </body>:

@stack('scripts')
</body>
</html>

Luego, regresando al listado de notas, en lugar de utilizar <x-slot:javascript> vamos a utilizar la directiva @pushOnce haciendo referencia el nombre de nuestro stack (scripts).

@pushOnce('scripts')
  <script>
    // Código JavaScript
  </script>
@endPushOnce

Por supuesto, puedes darle el nombre que quieras al stack y puedes crear tantos stacks como sean necesarios en tus plantillas.

Acto seguido, copiaremos todo este código y lo colocaremos justo al final de la plantilla de nuestro componente.

Agregando lógica a nuestro componente

Hay varias formas de agregar lógica a nuestro componente. Podemos, por ejemplo, pasar datos a través del método render tal como lo lograríamos desde nuestros controladores y rutas:

<?php

// ...

    public function render(): View|Closure|string
    {
        return view('components.note-card', [
            'editUrl' => route('notes.edit', ['id' => $this->note->id]),
        ]);
    }

View|Closure|string es parte de la firma del método render y esto nos indica que es permitido retornar diferentes tipos de dato: vistas, funciones anónimas o cadenas de texto. En nuestro ejemplo retornamos una vista haciendo uso del helper view.

También es posible crear métodos personalizados dentro de nuestros componentes como veremos en la siguiente lección.

Conclusión

Como has aprendido en esta lección, combinar componentes de Blade con el uso de la directiva @stack te brinda una manera muy poderosa de organizar y controlar la posición de las plantillas y vistas de tu aplicación.

Además puedes mover la lógica de las vistas dentro de tus componentes, desarrollando así una aplicación muy limpia y organizada.

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.