In recent Laravel projects that I have been working on, I noticed that I reuse a lot of UI components in different projects. This obviously means I was wasting time and also re-inventing the wheel every time I started a project. Then I discovered Laravel ; I blamed myself for not seeing this earlier as it could have saved me a lot of time in my projects. components So what are Laravel components? They are sort of slots that let us build large applications which are made up of reusable, independent, and decoupled components. Almost all modern systems are composed of self-contained, independent, reusable small entities. Each of these entities has a specific functionality provided to the system as a whole. The Laravel components are small entities with an interface that is well defined. These serve as the building block for a large software system. All the related data is encapsulated in the reusable unit. To help you understand more, let me share a Laravel component that I am building for my . admin-dashboard starter kit See below! An Alert Component So I noticed that I use alerts a lot, specifically in these three areas: On authentication to display error and success messages to the user. When I store a model to show to the user that he/she has successfully stored some data. When I redirect a user after completing some tasks. To avoid jotting them down all over my projects and the hustle of defining an information alert or warning alert, or failed alert, I will create a simple component that I will later reuse; please follow along. First, I will create a component using a Laravel command: php artisan make:component Alert The above command will do two things create a view template for the component on also create a file on resources/views/components/alert.blade.php app/View/Components/Alert.php Where I wrote my wishlist HTML in the blade file and some PHP code in the PHP file. Once your component has been generated, it may be rendered using its . name:<x-alert/> We can also pass variables in the component via attributes that are prefixed with : <x-alert :message="$message"/> You have to define the component’s required data in its class constructor (In Provided PHP FILE). All public properties on a component will automatically be made available to the component’s view. It is not necessary to pass the data to the view from the component’s render method. But if you use the component in a loop, then you have to pass data in the render method as well see below. And in the component’s blade file, we can access variables using blade expression.{{$message}}. Well, that's mostly it. I can reuse anywhere on my views also if I start a new project, I can just copy my components and use them that way. <x-alert/> I am still looking for a way that I can store them, say, on a package management system then hit a command that will generate all my saved components. Maybe even choose the ones that I want at that particular time. Know of such a solution? Please let me know in the comments section. Thanks for reading the article! If you enjoyed it, please don’t forget to show your appreciation by clicking 👏 below! Before you go… If you have any questions or comments, contact me: Mail: epmnzava@gmail.com Twitter: https://twitter.com/epmnzava github: https://github.com/dbrax

Twitter

How to Secure Your Laravel Application 

Paypal Integration Package Built With PHP

Nominated for 2022 - HackerNoon Contributor of the Year - Laravel

Nominated for 2022 - HackerNoon Contributor of the Year - Php

Nominated for 2022 - HackerNoon Contributor of the Year - Software Engineering

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Open Source

Too Long; Didn't Read

Using Components in Laravel: A Gentle Introduction

Using Components in Laravel: A Gentle Introduction

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Guide to Upgrading Laravel to Version 9 🚀

8 Steps to Find the Best Reporting Component for Your Application

A Beginner's Guide to Performance Optimization Using React.memo()

Best-practices learnt from delivering a quality Angular4 application

Share Code between React and React Native Apps

Content vs Container

A Quick Guide to Upgrading Laravel to Version 9 🚀

8 Steps to Find the Best Reporting Component for Your Application

A Beginner's Guide to Performance Optimization Using React.memo()

Best-practices learnt from delivering a quality Angular4 application

Share Code between React and React Native Apps

Content vs Container

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps