Introducere în Livewire: cum să faci aplicații reactive fără JavaScript

Sumar

1. Ce este Livewire?
2. De ce să folosești Livewire
3. Instalarea Livewire în Laravel
4. Crearea primului component Livewire
5. Binding și interactivitate în timp real
6. Validare formulare Livewire
7. Concluzie

Ce este Livewire?

Livewire este un framework full-stack pentru Laravel care permite crearea de interfețe reactive fără a scrie cod JavaScript. Componentele Livewire sunt scrise în PHP și gestionează interacțiunile frontend automat prin AJAX.

De ce să folosești Livewire

• Reducerea dependenței de JavaScript.
• Integrare perfectă cu Laravel Blade.
• Actualizări în timp real fără reîncărcarea paginii.
• Ușor de întreținut și scalabil.

Instalarea Livewire în Laravel

1. Asigură-te că ai un proiect Laravel:

composer create-project laravel/laravel myapp

2. Instalează Livewire:

composer require livewire/livewire

3. Include directivele Livewire în Blade:

<livewire:styles />
<livewire:scripts />

Crearea primului component Livewire

php artisan make:livewire Counter

Aceasta va crea:

• app/Http/Livewire/Counter.php – componenta PHP
• resources/views/livewire/counter.blade.php – view-ul Blade

Exemplu Counter Component

Counter.php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

counter.blade.php

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">Crește</button>
</div>

Adaugă componenta în view:

<livewire:counter />

Binding și interactivitate în timp real

Livewire permite să faci binding direct între proprietățile PHP și inputurile din Blade:

<input type="text" wire:model="name">
<p>Hello, {{ $name }}!</p>

Totul se actualizează automat fără refresh de pagină.

Validare formulare Livewire

$this->validate([
    'email' => 'required|email',
]);

În view, poți afișa erorile:

@error('email') <span class="error">{{ $message }}</span> @enderror

Concluzie

Livewire aduce reactivitate în Laravel fără să scrii JavaScript. Este ideal pentru aplicații CRUD, formulare și componente interactive rapid de implementat.