No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Introducci贸n a Laravel 8

Curso de Introducci贸n a Laravel 8

Profesor Italo Morales F

Profesor Italo Morales F

Componentes

17/21
Recursos

Aportes 14

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥淒on鈥檛 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 鈥榗ourse-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>