Build your first Lightning Component – Only View

How to build your first Lightning Component?
Only View, No Logic

Step 1: Create Lightning Component Bundle named “Welcome”
After creation, we will get four primary files such as

• Welcome.cmp
• Welcome.css
• WelcomeController.js
• WelcomeHelper.js

We need to update Welcome.cmp & Welcome.css file for now.

Welcome.cmp | Describes View Layout

<aura:component>   
   

<div class="slds slds-m-top--x-large slds-align_absolute-center tagLine">
    	Welcome to Everyone !!
   </div>


</aura:component>

Welcome.css | Describes Styling

.THIS.tagLine{   
    font-size:30px;
    color:#0066CC;
}

Step 2: Create Lightning App named “LearningLightning”

LearningLightning.app | To run this newly created Lightning Component

<aura:application extends="force:slds">
    <c:Welcome/>
</aura:application>

You can notice that we are using the tag extends=”force:slds” to run the Lightning Application using Lightning Styles.

Step 3: Result

2,479 total views, 2 views today