Building Components in the Beautiful Laravel
Tags: laravel, webdev, php
Published: 2019-01-24 17:44:06

---
title: Building Components in the Beautiful Laravel
published: true
description: detailed step by step tech-notes on building and using components in laravel
tags: laravel,webDev,php
cover_image: https://thepracticaldev.s3.amazonaws.com/i/w9es7u20mzz2sleb6wom.jpg
---

In the beautiful __Laravel__ We've so many useful tools to cutdown development-time and help building scalable modern web-apps. In this tech-note i'd like to guide you through the process of building and using __Components__.

#### 1- What are Components in Laravel?
Components are a reusable group of elements. Like you may want to create a Navbar to be used in almost all of your web-app pages. So you build your Navbar as a Component and tell laravel to grab it whenever you need it, and for many times as you like.

![step by step](https://i.pinimg.com/564x/9c/3d/5b/9c3d5bb9a5f2486512ab65c48a9f04cc.jpg)


### 2- how do i build & use Components ?
_2-1_
__First__ of all let's create a new directory inside our Resources directory in a _Laravel project_, So at your side you'll have something like this structure __(resources/views/layouts/components)__ .


_2-2_
__Make__ a new file and call it ( __navbar.blade.php__ ) and save it inside ' __components__ ' directory you've just created in step _2-1_ .

_2-3_
__With__ any IDE ,'maybe [sublime](https://www.sublimetext.com/)', Please copy and paste the following bootstrap Navbar code to your file __navbar.blade.php__ 
> _note that: i've deleted most of the navbar-tags for the reading-time but you can find the full tags code at [BootStrap](https://getbootstrap.com/docs/4.2/components/navbar/)_

_code_
> `<nav class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
        </nav>`

_2-4_
__We've__ created components directory , navbar file as our new component example and finally added the code to the __navbar.blade.php__ . Now it's time to use it. i will give you the Easy way first , then the professional way later on. 

_(Easy way)_: 
Inside any page of your project let's assume it's __index.blade.php__ and for sure it's inside the ' __views__ ' directory, Please start using the following blade-directive.

_code_
 > `@component('layouts.components.navbar') 
       @endcomponent`

And you did it !! , Now you've successfully created a navbar-component and used it. But if you noticed this navbar is totally __hardCoded__ and this is not good for building a dynamic project. So let's add some modifications to the navbar tags at __navbar.blade.php__ .

_2-4-2_
__I Will__ add a variable called barndName, please notice the following code modifications:
 
_code_
 > `<nav class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="#"> {{$brandName}} </a>
        </nav>`

_2-4-3_
__Now__ in the __index.blade.php__ , I will inject the variable with a value to the component element using the same blade-directive like the following:

_code_
 > `@component('layouts.components.navbar')
        @slot('brandName')
            value and it could be anything
        @endslot
         @endcomponent`

>please notice the new directive __@slot__ , that i used to call the __variable__ i've created in __navbar.blade.php__


__A More Professional Way__
__We'll__ add a small modifications to the way we've just learned. and believe me it's not hard as it sounds. just follow my steps

_2-4-4_
__Now__ what do you think if we named our component as navbar and just call it using the blade directive like __@navbar__, isn't it much easier and readable. Let's do it.

_2-4-5_
__We__ need to tell laravel that the __@navbar__ means the component __navbar.blade.php__ you've just created, So please Laravel grab it once i call it @navbar.

Please go to the following file: __(app/providers/appServiceProvider.php)__ , and go to the function __boot()__ , then add the following code inside the function body

_code_
> `Blade::component('layouts.components.navbar','navbar');`

> the first part in brackets is the component location , and the second part is the name you wanna call it with. This process is called __Aliasing__. 
now at any location in your webApp you just call your component with __@navbar__ .

> don't forget to import the __Blade Facade__ inside your __appServicesProvider.php__ . 

OR just add this line before the class name.

_code_ 
 > `use Illuminate\Support\Facades\Blade;`

_2-4-6_
__Now__ it's time to call your aliased , renamed component from any page within your webApp lets stay with __index.blade.php__ (go back to point __2-4-3__ to review the Easy way of calling your component)

now you just write the following code to call your navbar component and inject data to it.

_code_
> `@navbar(['brandName'=>'Munch any value']) @endnavbar`

__WOW you've just called your component and injected data into it__. 
please notice the following:
> we inject data as an __associative array__. ['Name']=>['value'] pairs.
> the __name / key__ must have the same spelling as the variable in your component, review step __(2-4-2)__.
>if you defined more variables in your component, simply add them to your array like __['var1'=>'val1','var2'=>'val2']__ .

_2-5_
__Now__ you can easily build your own components and reuse it within any Laravel project you have just repeat the process whenever , wherever you want a component

_3_
__Thanks for your time__, i hope i was useful to you. 
if you like my tech-note please feedback to me or give me hints on how to make it better.