Creación y Uso de Componentes Blade en Laravel

Clase 17 de 21 • Curso de Introducción a Laravel 8

Resumen

¿Cómo crear y optimizar un componente en Laravel usando Blade?

En el mundo del desarrollo web, la eficiencia y la organización del código son esenciales para mantener un sistema bien estructurado y fácil de mantener. En este contexto, los componentes en Laravel, específicamente los componentes Blade, ofrecen una estructura robusta que no solo permite una mejor organización del código, sino que también facilita el mantenimiento y la reutilización en toda la aplicación. Aquí te guiaremos a través de la creación de un componente Blade para optimizar el trabajo con tarjetas de cursos en una aplicación Laravel.

¿Cuál es el proceso para crear un componente Blade?

La creación de un componente en Laravel es un proceso sencillo pero poderoso que mejora significativamente la organización y mantenimiento del código. Para comenzar, abre tu terminal en Visual Studio Code o cualquier otra plataforma de desarrollo con soporte de terminal y ejecuta el siguiente comando:

php artisan make:component CourseCard

Este comando generará un componente llamado CourseCard, el cual estará ubicado en una carpeta llamada components dentro del directorio de vistas de recursos. En este componente, podrás insertar toda la configuración y diseño correspondiente a la tarjeta de un curso.

¿Cómo utilizamos el componente creado en las vistas?

Una vez que hayas creado el componente, su uso dentro de tus vistas es sumamente sencillo gracias a la sintaxis limpia y directa que ofrece Blade. Después de crear y configurar el componente, simplemente necesitas referenciarlo en tus vistas de la siguiente manera:

<x-course-card :course="$course" />

En este fragmento, el componente CourseCard se utiliza para mostrar la información del curso. La variable course que se pasa al componente se define en el controlador, facilitando el paso de datos dentro del componente.

¿Qué beneficios ofrece la reutilización de componentes?

La reutilización de componentes en Laravel proporciona múltiples beneficios que incluyen:

Mantenimiento simplificado: Un cambio realizado dentro del componente afecta a todas las instancias donde se utiliza, eliminando el tedio de actualizar múltiples ubicaciones de código.
Eficiencia de tiempo: Evita el trabajo repetitivo de copiar y pegar código, que no solo es ineficiente sino propenso a errores.
Consistencia: Asegura que el mismo diseño y lógica de negocio se aplique en toda la aplicación, manteniendo una experiencia de usuario uniforme.

Al utilizar componentes como CourseCard, los desarrolladores pueden concentrarse más en las necesidades del negocio y menos en los problemas de implementación técnica. Además, si en el futuro se necesita cambiar un aspecto de la tarjeta, como eliminar un extracto, solo se realiza el cambio una vez en el componente y se refleja automáticamente en todas las partes de la aplicación donde se utiliza.

Conclusión

El uso de componentes Blade en Laravel no solo mejora la estructura del código, sino que también proporciona una manera más fácil y eficiente de gestionar el contenido complejo de las aplicaciones web. A través de una única edición, es posible afectar significativamente todo el sistema y evitar errores redundantes, resultando en un proceso de desarrollo más ágil y efectivo. Continúa explorando y utilizando tecnologías que optimicen tu flujo de trabajo y te permitan centrarte en lo que realmente importa, el crecimiento y evolución de tu aplicación.

Alex Maldonado

student•

Este concepto es super útil y recomendable de entender, yo, por mucho tiempo programé sin buenas practicas, y como bien dice Italo, repetía mucho código, y al momento de realizar cambios, era todo muy tedioso.

Afortunadamente, desde hace ya un tiempo me propuse mejorar como profesional, estudiar mucho, y en ese proceso, entender los beneficios de los componentes y reutilizar código, es una excelente practica. Agiliza mucho el proceso de desarrollo.

Jimmy Buriticá Londoño

student•

Un Componente Blade es un código HTML sin mayor complejidad. Un Componente Livewire puede tener dentro de si N cantidad de componentes Blade, además de su propia lógica.

Anthony Will Solsol Soplin

student•

No es tanto así, lo que faltó explicar es que un componente también tiene un archivo .php dentro de App\View\Components donde puedes declarar las variables y funcionalidades antes de renderizar el componente. Además un componente puede tener N cantidad de componentes anidados dentro

Carlos Eduardo Gomez García

teacher•

De hecho hoy en día es muy importante escribir código sin repetir, de ahí la frase "Don't Repeat Yourself". Es difícil adaptarse a trabajar de esta forma, pero cuando lo logras es increíble, porque efectivamente el cambio lo haces en un solo lado. . Y de hecho aquí me gustaría poner de ejemplo a Laravel, si Laravel se hubiese programado con código repetido no sería lo que es hoy en día y no estaríamos viendo este curso. Afortunadamente existen muchas convenciones dentro de PHP para evitar eso, se les llaman convenciones PSR seguro de la que has escuchado más es sobre PSR-4. Básicamente estas convenciones te dan herramientas para que puedas crear código PHP prolijo y que sea compatible con otras librerías, por eso Laravel funciona. . Además, si le sumas los principio SOLID y metodología TDD tienes un código impecable y fácil de mantener, y los componentes son parte del código prolijo para el front. . De hecho el desarrollo web moderno apunta a empezar a crear todo pensando en componentes, ya existen los WebComponents nativos, y si quieres aprender Vue verás que todo se basa en componentes... ¡Usa componentes! :D

Engell Eduardo Lopez Mairena

student•

Excelente explicación hermano. casualmente trabajando con vue y php me tope con los componentes y te regalo una duda en que momento tu recomendarías usar un componente .

Carlos Eduardo Gomez García

teacher•

Siempre, hoy en día la web casi que está basada en componentes porque son muy útiles, el componente header, el componente footer, el componente comentario, etc. De hecho, podríamos empezar a trabajar pensando directamente en componentes 🤔

Guillermo Camacho

student•

Les comparto mis aportes:

Camilo José Mezú Mina

student•

Muy bueno compañero

Blanca Segura Garcia

student•

Otro para mis cuadros de escritorio ... Felicitaciones por el buen trabajo ...

Martín S. Campos

student•

Tener el mismo código repetido en diversos módulos de un proyecto se le conoce como hardcoding, a la hora de hacer una modificación esta se debe hacer en todas las partes donde se utilizó el mismo código, nada mejor como usar componentes como en esta clase y/o funciones, así reduciendo el código y dar mas flexibilidad. En esta clase puedes ver mas acerca de ello .

María Sierra

student•

Página de curso individual

Para crear un componente en Laravel, utilizamos el comando

php artisan make:component course-card

Este creará un archivo Blade dentro de 📁 views → components, con el nombre que le dimos será el nombre del componente.

Para utilizarlo en otro archivo blade, escribimos x y el nombre, así:

<x-course-card :course="$course" />

:course="$course" esta es la forma de pasar una variable. el :course es el nombre de la variable dentro del componente y el ="$course" es la variable que le estamos pasando.

Santiago Andres Sierra Londoño

student•

Gracias que buen aporte.

Deyvi Edwin Jara García

student•

Tener en cuenta en caso les salga este error al querer pasar la variable al compontente.

ErrorException
Undefined variable: course (View: ..\resources\views\components\course-card.blade.php)

Para solucionar este problema se debe declarar en el constructor del componente el parametro requerido.

Archivo: app\View\Components\CourseCard.php

namespace App\View\Components;

use Illuminate\View\Component;

class CourseCard extends Component
{
    public $course;
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($course)
    {
        $this->course = $course;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.course-card');
    }
}

Jose Luis Junior Perez Gil

student•

gracias mi lord :)

Carlos Alberto Angel Angel

student•

a alguien le sale el error de que la variable $course no esta definida en el componente course-card?

Jimmy Buriticá Londoño

student•

Verifica que los 2 puntos ( : ) tengan espacio a la izquierda y ningún espacio a la derecha. Así:

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

Carlos Alberto Angel Angel

student•

Si tienen espacio a la izquierda y ningun espacio a la derecha, sige marcando el mismo error de variable indefinida

<div class="grid grid-cols-3 gap-4 mt-8">
    @foreach ($courses as $course)
    <x-course-card :course="$course" />
    @endforeach
</div>

Pablo Ignacio Leyton Zarta

student•

Increíble, el modo de uso de estos componentes. Esto ahorrara horas de trabajo.

Anthony Will Solsol Soplin

student•

Faltó explicar más posibilidades con un componente.

Un componente también tiene una clase en un archivo .php dentro de App\View\Components donde tiene su propio constructor y puedas declarar más variables y funcionalidades antes de renderizar el componente. Además de mencionar que un componente puede tener N cantidad de componentes anidados dentro.

Brian Sánchez Izquierdo

student•

A mi me genera error al darle el nombre 'course-card', específicamente en la clase del componente. Le tuve que dar otro nombre sin guion. Al final pasó y ya no me marcó ese error pero al implementar el componente e blade dentro de ambos foreach me marca que mi variable $course es indefinida.

Josseline Acosta

student•

Me pasó algo similar, en mi caso fue porque en los dos puntos posteriores al nombre del componente, necesitaba un espacio antes y posteriormente no.

Brian Sánchez Izquierdo

student•

Ya me funcionó, al parecer solo erá mi intellisense que marcaba mal el nombre de la clase creada para el componente de Blade.

Ricardo Carranza

student•

Y... ¿Cuál seria la diferencia entre un componente blade y uno de livewire? si es que existe.

Héctor Antonio Jiménez Manzo

student•

¿Cuál es la diferencia entre un componente hecho como el de esta clase y el que hicimos con la función @yield? Según entiendo, ambos te permiten crear componentes.

Augusto Gabriel Luna Bardales

student•

Una buen concepto que ayuda a mejor el mantenimiento y la reutilización de código

Santiago Andres Sierra Londoño

student•

Interesante el tema de componentes. En lo personal solo utilizaba @include() para segmentar mis vistas, descubrí ademas que @componente() funciona como alternativa para <x-component />.

Julian David Alzate Cuervo

student•

Cada vez me está pareciendo mejor Laravel

Juan José del Aguila López

student•

componente course-card-blade.php

<div class="bg-white shadow-lg rounded-lg px-4 py-6 text-center">
    <a href="{{ route('course',$course->slug) }}">
        <img src="{{ $course->image }}" alt="" class="rounded-md mb-2">
        <h2 class="text-lg text-gray-600 truncate uppercase">{{ $course->name }} </h3>
        <h3 class="text-md text-gray-500">{{ $course->excerpt }} </h4>

        <img src="{{ $course->user->avatar }}" class="rounded-full mx-auto h-16 w-16">
    </a>
</div>