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

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.

As most of you know that lightning is future of salesforce and sometimes we need the customized solution in order to achieve our business requirement. Lightning Component basically runs on Aura framework. So, 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 Javascript file which is being used as Client side controller and this is middleware between apex controller and component.
• Helper – Helper is also a javascript and work in 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 styling our lightning component.
• Documentation – A description, sample code, and one or multiple references to 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.

Woohoo, you have just created your first lightning component. In next blog, we will learn how to use variables in lightning component and dynamic variable bindings.

Sharing is Caring 🙂

Please do not forget to like our facebook page and subscribe to get the latest news about lightning and classic tutorial 🙂