Learn Salesforce Anywhere Anytime

Theme Switch



The Lightning Component system is a UI framework for creating web applications for portable and desktop devices. It’s an advanced framework for building single-page applications with dynamic and responsive UIs for Lightning Platform applications. It utilizes JavaScript on the client-side and Apex on the server-side. 

The Lightning framework is another event-driven model that gives business and excellent data logic to develop unique web applications for the mobile and DESKTOP(PC’s). 

This lightning framework doesn’t altogether remove a page at a time. Instead, it uses JavaScript to make, change, and stimulate the UI. Lightning Components framework uses “BUNDLES” to store essential documents useful for creating lightning components.


  • Component– Component is used for configuring the layout with the help of a markup language.
  • Controller– It is used for handling client-side processing, and an apex controller is favored for server-side processing. The Client-Side controller uses JavaScript, whereas the server-side controller uses Apex.
  • Design– Using the Design resource, we will get a path to the component attributes from Lightning App Builder. So that System Administrators can further alter the component attributes as per the scenario/requirements.
  • Documentation– A documentation file is managed to provide source docs or sample code to users who have received your component.
  • Helper– A helper points at collecting reusable JavaScript functions not to create any redundant code in the controller.
  • SVG File– An SVG File allows you to add custom icons that can be used for further reference.


  1. Salesforce Custom MyDomain
  2. Developer Org
  3. Concepts of JavaScript


My Domain allows you to define a customer-specific brand name to add to your Salesforce org Domain (URL). So My Domain is used as your org-specific subdomain,

 for example, With a My Domain, you can customize your login page and completely manage user login and authentication. Because orgs with a My Domain are more protected, many Salesforce features require one, and that feature includes Aura Component too; for creating Aura Component, you need Salesforce My Domain. Without My Domain, you can’t make one.

Aura Component VS Standard Component VS App Exchange Component

Aura ComponentStandard ComponentApp Exchange Component
The Salesforce developers develop aura Components according to the various Business RequirementsSalesforce builds standard Component, and these are common featuresThe Salesforce Partners build app Exchange Components 
For example, your clients want any functionality as per their business scenarios like Custom Table with different customized options. For example, Tasks, Feed Items, Navigation, etc.For instance, Panda doc, Dynamic Maps, etc.

Let’s Build your First Aura Component 

Navigate to the Developer Console by click on the Setup Icon and right-click over the Developer console and choose Open in a New Tab. This will save you little time, and you end up seeing the developer console in the same browser. Enjoy this little tip.

Click on the File >> New >> Lightning Component

Now Select Appropriate Interfaces for Now Select all of them we will know about it later.

You will see something like this along with the seven other files that we discussed above. 

Along with <aura: component, you will see implements that mean you are adding suitable interfaces. Let’s talk about them (Link of the Different Interfaces in the Aura Component)

Hurray, You Just Created your First Lightning Aura Component. Let’s Learn about more terminologies.


You just created a lightning component, and if you want to preview it, you can either by placing your component over a lightning page or with the help of a Lightning App.

Yes, Similarly as you created a Lightning Component, you can create a Lightning Application. 

Below are the steps 

Click on the File >> New >> Lightning Application

When you successfully created the Application, you will see the code something like this.

<aura:application >


Make sure you extends force:slds to see the lightning Styling in your Component.

<aura:application extends=”force:slds” >


Now you need to call the component you want to preview 

<aura:application extends=”force:slds” >



And on the right-hand side, you will see a button called preview to preview the Application.