Laravel e seus componentes

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 props

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