Componentes

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.

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.

Les comparto mis aportes:

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! 😄

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 .

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.

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');
    }
}

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

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.

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.

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

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 />.

Cada vez me está pareciendo mejor Laravel

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 }} </h2>
        <h3 class="text-md text-gray-500">{{ $course->excerpt }} </h3>

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