journey2salesforce

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

Welcome to Everyone(first Lightning Component)

636 total views, 1 views today

Rating: 5.0/5. From 10 votes.
Please wait...

You may also like...