Monday, September 3, 2018

First Lightning Component

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


1) What is component bundle?
2) Steps to built our lightning component.

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 contain markup for components or apps.
  2.  The only required resource in a bundle.
  3. Each bundle contains only one component or app resource.

     Mycomp.cmp(Sample component)

  • Controller
      The controller is used to handle client-side events in components.


  • Helper
      It contains Javascript functions to handle logic.

     Example: Myhelper.js
  • Style
      It contains styles for the component.

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

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

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

     Example: MyComp.svg
  • Design
      We use design resource to control which attributes are exposed to builder tools like Lightning App Builder, Lightning pages, Community Builder, or Flow Builder.
  • App
      The app is used to run the component.
      Example: app)

Steps to build our lightning component.

1)open Developer console.

2)Click File>New>Lightning component

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

4)Under the Component, type the below code 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 a lightning application.

Click File>New>Lightning Application.

Type the below code and click save.

<c:Firstlightningcomponent>       // Name of Lightning component

Now, Click on the preview button.

Lightning component

So, Our 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