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.
Ex: 

Mycomp.cmp(Sample component)

 or 

MycompApp.app(Sample app)
  • Controller
Controller is used to handle client side events in components.

Ex:

Mycontroller.js

  • 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

</aura:Component>



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

Click File>New>Lightning Application.


Type:

<aura:application>
<c:Firstlightningcomponent>       // Name of Lightning component
</c:Firstlightningcomponent>
</aura:application>


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