Componente Livewire

Livewire es super interesante y útil, lo he estado utilizando unos meses, y me ha encantado.

Si quieren profundizar un poco más, yo aprendí y comencé gracias a Italo también, en su canal de Youtube.

Les dejo una pequeña lista de reproducción donde Italo explica super bien como realizar un CRUD con Livewire

https://www.youtube.com/playlist?list=PLhCiuvlix-rSRRmZAL2CNOMAUjgEiFoSl

En lo personal me agrada más esta forma para pasar la información a la vista:

public function render()
{
    $courses = Course::latest()->with('user')->take(9)->get();
     return view('livewire.course-list', compact('courses'));
}

Mis aportes:

Les super recomiendo el curso oficial de livewire impartido por el propio creador de este framework. https://laravel-livewire.com/screencasts/installation

Componente Livewire

Podemos crear componentes con livewire, pero necesitamos usar el siguiente comando:

php artisan make:livewire *nombreComponente*

Y este dentro de 📁 views → livewire creará los componentes, además de crear un lugar donde alojar nuestros componentes en 📁 app → Http → Livewire . Para llamarlos dentro de otro archivo vamos a escribir

<livewire:*nombre-componente*></livewire:*nombre-componente*>

En el archivo del componente dentro App, tenemos que decirle que nos va retornar, indicarle la tabla y la columna.

public function user()
{
    return $this->belongsTo(User::class);
}

Uhhh me gusta cómo maneja Laravel los componentes, prácticamente hay un controlador por cada componente 🤔
.
Mirando los snippets que me proporciona VSCode veo que también se pueden importar scripts y styles usando estos componentes, me pregunto cómo manejara Laravel los requests a cada componente… 🤔

Ya me gustaba laravel, ahora me gusta mas!

Ojo con la sintaxis

<liveware:course-list>

que no tira error.

la manera correctar de llamar el componente sería:

@livewire('name-component')

no en forma de etiqueta, aunque funciona y no da error no es como expone la documentación oficial.

El comando del livewire 😃

php artisan make:livewire CourseList

A la hora de hacer la prueba del curso, hay un error con respecto a la ubicación de los archivos de Livewire

Documentación oficial de Livewire 👌🏻

https://laravel-livewire.com/

MI menu

class Menu extends Component
{
    public function render()
    {   //$categories = Category::all();
        
        $categories_id = Category::pluck('id'); 
        $sub_category = array();
        foreach($categories_id as $key => $category_id){
           $categories[$key] = Category::where('id',$category_id)->with('subcategories')->get();            
        }
        $categories =  json_encode($categories);
        $categories =  json_decode($categories);
   
        return view('livewire.menu')->with('categories',$categories);        
    }
   
}

La relaciòn

class Category extends Model
{
    use HasFactory;
   
    public function subcategories(){

        return $this->hasMany(Subcategory::class);
    }
    
}

Mi vista

<div class="hidden sm:block sm:ml-6">          
          <div class="flex space-x-4 group inline-block relative">
        @foreach ($categories as $data)
            <div class="relative">
              @foreach ($data as $category)              
                <span class="pr-4 font-semibold"><a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" role="menuitem" tabindex="-1" id="menu-item-0">{{$category->name}}</a></span>                                                                               
                @foreach ($category->subcategories as $subcategory)
                <div x-show="open" class="block px-4 py-2 text-sm bg-gray-100 rounded-md">  
                  <a href="#" class='block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white'>{{$subcategory->name}}</a>
                </div>    
                @endforeach                
              
              @endforeach
            </div>                
            @endforeach
          
          </div>
        </div>

Que decepcionante que en este curso donde se supone que aprenderemos livewire como una de las novedades de laravel el profesor entregue esta calidad tan pésima de la funcionalidad. No entiendo, ¿Por qué no profundizar más en esta herramienta, por qué no puede ser este el curso definitivo para eso? Es lamentable que de manera gratuita encuentre información más enriquecida de esto cuando se supone que pago por lo que tanto dice Freddy “No somos la única ruta, pero sí la más fácil”. A este paso también debería agregar “la más pobre en información”

Realmente!!! Este curso me aclara mis DUDAS … He sufrido con tutoriales, libros, consultas y no he podido aclarar mis “problemas” … creo que seguiría repitiendo cursos y cursos hasta aprenderlo bien …

Otra opciòn para insertar los componentes de livewire es usando las etiquetas de blade
algo así:

<div>
        @livewire('course-list')
</div>

index.blade.php

@extends('layouts.web')

@section('content')
    <div class=text-center>
        <h1 class="text-3xl text-gray-700 mb-2 uppercase">Últimos Cursos</h1>
        <h2 class="text-xl text-gray-600">Fórmate online como profesional en Tecnología</h2>
        <h3 class="text-lg text-gray-600">70% de los graduados duplica sus ingresos</h3>
    </div>

    <livewire:course-list>
@endsection

course-list.blade.php

<div>
    Hola
    @foreach($courses as $course)
        {{ $course->id }}

    @endforeach
</div>