Monday, September 3, 2018

First Lightning Component

Today in this blog post we will learn how to built our first lightning component.

First let see what is component bundle?

A component bundle contains a component or an app and all its related resources.

When you build lightning component you deal with the following component bundles,

  • Component

  1.  Components contains markup for component or app.
  2.  The only required resource in a bundle.
  3. Each bundle contains only one component or app resource.

Mycomp.cmp(Sample component)

 or app)
  • Controller
Controller is used to handle client side events in components.



  • Helper
Contains Javascript functions to handle logic.

Ex: Myhelper.js
  • Style
Contains styles for the component.

Ex: Mycomp.css
  • Documentation
Documentation includes description and example to demonstrate the use of component.

Ex: MyComp.auradoc
  • Renderer
Contains default rendering behavior for component, We can override this by custom renderer.

Ex: MyCompRenderer.js
  • SVG
It is a  custom icon resource for components that get displayed before the component name in lightning app builder or community builder.

Ex: MyComp.svg
  • Design
File required for components used in Lightning App Builder, Lightning pages, Community Builder, or Flow Builder.
  • App
App is used to run the component.

STEPS to build your first lightning component:

1)open Developer console.

2)Click File>New>Lightning component

3)Give Name,Description to lightning component.(Name=Firstlightningcomponent)

4)Under Component type below and click save.

<aura:Component>     // This is component tag.

Hi,Display this text.    // Any text you want to display


5)To preview the above component,We need lightning application.

Click File>New>Lightning Application.


<c:Firstlightningcomponent>       // Name of Lightning component

Now,Click on preview on button.

Lightning component

So,Your first lightning component is ready.

TAGS:First Lightning Component,Lightning Component Framework,Build your first lightning component,salesforce components,lightning component,lightning component salesforce.

No comments:

Post a Comment