Post Thumbnail

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. 😊

Ver mais>