Criando um Componente Simples com Laravel e Livewire

Fala pessoal, tudo certo com vocês?

Como sabemos, o Laravel é um dos frameworks de desenvolvimento web mais populares em PHP, e o Livewire é uma biblioteca que permite criar interfaces interativas usando componentes do Laravel sem a necessidade de escrever código JavaScript.

Particularmente, tenho migrado tudo para Livewire e não consigo imaginar desenvolver sem utilizar ele. Pretendo escrever bastante sobre e estou basicamente trocando o javascript por ele.

Neste artigo, vamos aprender como criar um componente simples utilizando o Laravel e o Livewire. Se você usa o Laravel e ainda não conhece o Livewire, é bom dar uma conferida:

https://laravel-livewire.com

Antes de começarmos, é importante garantir que você tenha o Laravel e o Livewire instalados em seu ambiente de desenvolvimento. Caso ainda não tenha feito isso, instale-os utilizando o Composer:

composer global require laravel/installer
composer require livewire/livewire

Caso tenha dúvidas em como utilizar o composer, verifique este artigo aqui:

https://lipsaraiva.com.br/gerencie-seus-pacotes-php-com-composer/

Com os requisitos instalados, vamos começar a criar nosso componente:

Passo 1: Criando o componente

No terminal, navegue até o diretório do seu projeto Laravel e utilize o comando abaixo para gerar um novo componente livewire chamado “Exemplo”:

php artisan livewire:make Exemplo

Após a execução deste comando, você encontrará o arquivo Exemplo.php no diretório app/Http/Livewire. Este arquivo contém a classe do componente que acabamos de criar.

Passo 2: Definindo a estrutura do componente

Abra o arquivo Exemplo.php e você verá duas funções principais: render() e mount().

A função render() é responsável por retornar a visualização do componente, enquanto a função mount() é executada quando o componente é inicializado. Vamos definir uma variável simples no mount() e retorná-la na visualização:

use Livewire\Component;
class Exemplo extends Component
{
    public $mensagem;
    public function mount()
    {
        $this->mensagem = 'Olá, mundo!';
    }
    public function render()
    {
        return view('livewire.exemplo');
    }
}

Passo 3: Criando a visualização

Agora, vamos criar a visualização para o nosso componente.

No diretório resources/views/livewire, crie um novo arquivo chamado exemplo.blade.php com o seguinte conteúdo:

<div>
    <h1>{{ $mensagem }}</h1>
</div>

Passo 4: Renderizando o componente

Para que o componente seja renderizado na tela, abra o arquivo de rota que deseja utilizar e adicione o seguinte código:

use App\Http\Livewire\Exemplo;
Route::get('/exemplo', Exemplo::class);

Passo 5: Executando o servidor de desenvolvimento

Agora que tudo está configurado, inicie o servidor de desenvolvimento do Laravel:

php artisan serve

Visite a URL http://localhost:8000/exemplo em seu navegador e você verá o componente sendo exibido com a mensagem “Olá, mundo!”.

Esta é apenas a ponta do iceberg amigos. Acompanhem para mais artigos sobre o livewire.