Quick Reference Study Notes for Salesforce Lightning Components (Advanced)

Salesforce Lightning Components

Lightning components are open source UI framework for web development. There are aura documents present in every org and they can be opened by navigating to this link --Instance URL -- .salesforce.com/auradocs. These docs are helpful in creating a lightning based component or app in your Org.

Lightning Components Framework

Lightning Components are used to create stand-alone web applications which can be used as both Mobile and desktop application. This framework is used to create a single page application with a dynamic environment as well as responsive UI for lighting platform app.

The client side of this framework uses javascript to send a call to process some data and the server side uses apex to fetch data and another process.

The lightning component uses similar markup as HTML to create UI. some of the tags are these

  • aura:application

  • aura:component

  • aura:attribute

  • aura:handler

  • aura:iteration


These tags are used to create a basic lightning component. We will discuss the use of these tags later.

This is a graphical representation of the Lightning Components framework

Component Bundle :

A Lightning component contains these files each and every file have their own purpose on the client side.


Resource Name


Component or  Application                            

sample.cmp or sample.app

This is required part of the lightning component. It contains markup to design the app or component. There is only one component or app in the bundle.

CSS Styles


This is a CSS file which is used to style the application UI.



This is a JS file which communicates from the client-side. It contains all the functions which are called from markup.



This is required for the component to use it in Lightning Pages or Lightning App Builder.



This class contains JavaScript functions that can be called from any JavaScript code in a component’s bundle. It can also be used to made calls to Server-Side(Apex).



This file contains information about component i.e description, sample code, and one or multiple references to example components.



This JS file used to render client-side to override default rendering for a component.



It is custom icon resource for components to be used in the Lightning App Builder.

The relationship between files of Lightning component / Execution Process

All the files of the component bundle have their specific use. Here is an image which enables you to know how the component files are interlinked.

*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."


This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree