Create Your First Lightning Component

Create Your First Lightning Component

In this article, we will learn how to create a first lightning component with all the basic component descriptions.

Prerequisite: – 

1. Lightning Experience must be enabled.
2. My Domain Must be enabled and deployed. Click here to set up one if you do not already have one.

Lightning Component basically runs on the Aura framework. Follow the below steps to create your own lightning component.

Step 1- Click on your name and then Open Developer Console into New Window

Step 2 – Click on File -> New -> Lightning Component -> Name it FirstComponent and Click Submit. It will open a development workspace where we can develop/put HTML or predefined aura tags.

Step 3 – Files that each component includes

• Component – Component is Client-side XML markup which we use to display the details to our users using different aura tags or with the help of standard HTML tags.
• Controller – Controller is a Javascript file that is being used as a Client-side controller and this is a middleware between apex controller and component.
• Helper – Helper is also a javascript and works on the client-side, we put those methods in the helper that are reusable like putting validation or any method which we are calling from multiple components. One helper can be used in between multiple components you can also say it like utility class.
• Style – Style is used to put all our CSS here that we may use to style our lightning component.
• Documentation – A description, sample code, and one or multiple references to the example component.
• Renderer  – Client-side renderer to override default rendering for a component.
• Design – If we want some predefined attribute values while using our component in Community, lightning App builder then we use Design attribute.
• SVG – Custom icon resource for components used in the Lightning App Builder or Community Builder.

Step 4 –  Write Static text into your Component. Put “This is My First Lightning Component” between <aura: component> opening and closing tags.

Step 5 – Test your component, to test we will create a Lightning App. File -> New -> Lightning Application -> Name it FirstComponentApp -> Submit. Incorporate you component into app and Click preview to see the output. Put <c:FirstComponent></c:FirstComponent> between <aura:application> openting tags, save and Click Preview.

Our first lightning component is ready.

Like our post & bookmark this blog for your future learning. 

Any suggestions and improvements are most welcome, please comment your suggestions and improvement in the comment box. 

Happy Coding Sharing Is caring. 😀😀😀