Create Your First Lightning Component
In this article, we will learn how to create a first lightning component with all the basic component description.
- Lightning Experience must be enabled.
- 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.
- 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 🙂