Laravel e seus componentes
2025-05-04 19:45:55
O Laravel assim como outras ferramentas e frameworks também possue várias funcionalidades e benefícios disponíveis, os componentes obviamente não poderiam ficar de fora dessa, por mais que simples, o Laravel dispõe de componentes fáceis de usar e muito úteis para o dia a dia do código. Neste pequeno post irei tentar passar uma ideia geral de como usá-los e situações que eles possam ser úteis, vamos lá?O que são componentes?Pense em um componente como uma pequena “caixa”, onde você guarda algumas linhas de código e pode reutilizá-las ou chamá-las sempre que precisar, e voilá o código dentro da caixa irá se replicar apenas ao utilizar o componente, sem a necessidade de duplicar o código em si. Eles são muito úteis para quando se tem uma estrutura (código) que irá se repetir diversas vezes durante o projeto, e o interessante, é que podemos aplicar essa lógica em tudo! Desde ícones até seções inteiras, basta sua interpretação afiada pegar a necessidade.Como utilizá-los? Sem muita enrolação, vamos ao que importa! Cada componente tem uma forma de uso dependendo de sua linguagem ou framework, no Laravel é bem simples, dentro da pasta resources/views você irá criar a pasta components, é dentro dessa pasta que irão ser armazenados os componentes, podendo ter subpastas também.resources/
└── views/
└── components/
├── layout/
│ ├── header.blade.php
│ ├── footer.blade.php
│ └── sidebar.blade.php
├── form/
│ ├── input.blade.php
│ ├── select.blade.php
│ └── textarea.blade.php
├── buttons/
│ ├── primary.blade.php
│ └── secondary.blade.php
├── modals/
│ └── confirm-delete.blade.php
├── alerts/
│ └── success.blade.php
└── cards/
└── user-card.blade.php Como consegue ver no exemplo acima, os componentes são arquivos .blade comuns, porém ao chamá-los desse diretório, o Laravel irá interpretá-los como componentes. Agora sua dúvida deve ser: “certo, criei o componente, taquei o código lá dentro, mas e agora?” Bem, agora é só chamar, e isso é super simples.<x-subpasta.componente />Vamos imaginar que queira chamar o componente user-card.blade.php dentro da pasta cards, ficaria assim: <x-cards.user-card />Fácil né? Attributes e propsAgora vamos nos aprofundar um pouco mais, além do uso dos componentes em si, temos também dois indivíduos bastante importantes, attributes e props, os attributes servem como uma forma de "estilização forçada”, onde o que for passado nele, vai reescrever ou adicionar a estilização do elemento marcado, vamos ao exemplo? {{-- Blade --}}
<x-button class="bg-green-600 hover:bg-green-700">
Salvar
</x-button>{{-- Componente --}}
<button type="submit" {{ $attributes->merge(['class' => 'px-4 py-2 rounded bg-blue-500 text-white']) }}>
{{ $slot }}
</button> {{-- Resultado HTML --}}
<button type="submit" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded text-white">
Salvar
</button> Já as props são informações que passamos para o componente, informações essas que normalmente são dinâmicas e vem do banco de dados, onde as mesmas serão usadas dentro do componente para preencher suas informações. {{-- Blade --}}
<x-alert type="success" message="Usuário cadastrado com sucesso!" />{{-- Componente --}}
@props([
‘type’,
‘message’,
])
<div class="alert alert-{{ $type }}">
{{ $message }}
</div> {{-- Resultado HTML --}}
<div class="alert alert-success">
Usuário cadastrado com sucesso!
</div> E com isso aprendemos o básico dos componentes Laravel, espero que tenha lhe ajudado a sanar suas dúvidas. Gostou das dicas? Não deixe de conferir as outras postagens, tenho certeza de que serão úteis para você como desenvolvedor. 😊