LIGHTNING DEVELOPMENT : FIRST LIGHTNING COMPONENT

FIRST LIGHTNING COMPONENT

What is Lightning Component ?

• Lightning components are the self-contained and reusable units of an application.
• For example, Every car is assembled with small-small parts to complete the car manufacturing process. These parts can be replaced as well as reusable.

©Navigation 

Setup -> Developer console -> New -> Lightning Component

 

Let's create the first lightning component.....

Component 1      Helloworld1.cmp

=============================================
<aura:component >

<h1> This is the First Hello World </h1>

</aura:component>

=============================================

Component 2      Helloworld2.cmp

=============================================
<aura:component >

<h1> This is Second Hello World </h1>

</aura:component>
=============================================

We have 2 sample HelloWorld Lightning Components. Now to display a preview of these components we'll add them in Lightning Application.

©Navigation 

Setup -> Developer console -> New -> Lightning Application

Lightning Application  HelloWorld.app  

=============================================
<aura:application >

     <c:HelloWorld/>

     <c:HelloWorld2/>

</aura:application >

=============================================

• In this way, we can call multiple lightning components inside a lightning application wherein c: is default namespace to call lightning component. 
• If you have custom namespace available you can call your lightning components by using that namespace as well.

Now to preview the application we have preview button available on the right-hand side.

Now you will get the expected output as 

Output 

This is the First Hello World

This is Second Hello World

WOHOOOO.......We have just created a very first lightning component successfully

If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you 

Happy learning ☁️⚡️ (Learn. Help. Share.)

<< PREVIOUS                                                     NEXT >>