Monday, September 3, 2018

First Lightning Component

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

TOPICS TO COVERED:

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

What is a lightning 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.
     Example: 

     Mycomp.cmp(Sample component)

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

      Example:

      Mycontroller.js
  • 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:

      MycompApp.app(Sample 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

</aura:Component>



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

Click File>New>Lightning Application.


Type the below code and click save.

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


Now, Click on the preview button.


Lightning component






















So, Our first lightning component is ready.

1 comment:

  1. The renderer is used to define custom renderer methods to override the standard render lifecycle. This is the standard render lifecycle in aura components :

    render() : This is called to render the component body on the browser.
    rerender() : This is called if any data is modified on an aura component.
    afterRender() : This is called after the render() method has finished.
    unrender() : This is called when a component is destroyed from the browser view.

    ReplyDelete