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.

So, Our first lightning component is ready.