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,
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.
5)To preview the above component, We need a lightning application.
Click File>New>Lightning Application.
Type the below code and click save.
Now, Click on the preview button.
So, Our first lightning component is ready.
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
- Components contain markup for components or apps.
- The only required resource in a bundle.
- 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
Example:
Mycontroller.js
- Helper
It contains Javascript functions to handle logic.
Example: Myhelper.js
Example: Myhelper.js
- Style
It contains styles for the component.
Example: Mycomp.css
Example: Mycomp.css
- Documentation
Documentation includes a description and an example to demonstrate the use of the component.
Example: MyComp.auradoc
Example: MyComp.auradoc
- Renderer
Contains default rendering behavior for component, We can override this by a custom renderer.
Example: MyCompRenderer.js
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
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)
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.
The renderer is used to define custom renderer methods to override the standard render lifecycle. This is the standard render lifecycle in aura components :
ReplyDeleterender() : 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.