function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
rsajjarsajja 

How a lightning component loads?

Can anyone please help me try to understand, how a Salesforce Lightning component loads?

Thanks for your help!
Ajay K DubediAjay K Dubedi
Hi rsajja,

Follow the steps to understand that how Salesforce Lightning component loads:

Load the lightning Component using an Apex Controller class.Display the data via component attributes and update the counters dynamically.
Create the controller class.

1. Click File | New | Apex Class and enter Controller Name like "ApexController" in the New Class window. This creates a new Apex class, "ApexController.apxc."
2. Write the Controller code as:
public with sharing class ApexController {
  @AuraEnabled
  public static List<SObject> method() {

   // Write your code here
  }
 }
3. Create the lightning component "component.cmp", update the 'aura:component' tag to include the controller attribute.
<aura:component controller="ApexController">
4. Then add an 'init' handler to load your data on component initialization.
<aura:component controller="ApexController">
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   <!-- Other aura:attribute tags here -->
   <!-- Other code here -->
 </aura:component>
   On initialization, this event handler runs the doInit action that you are creating next. This init event is fired before component rendering.
5. After that you add the client-side controller action for the init handler. 
    In the sidebar, click 'CONTROLLER' to create a new resource, "componentController.js".
({
  doInit : function(component, event, helper) {
     
     // Write your code here
     
  }, // delimeter is used for future use 
 })
6. Create the helper function to display the records and dynamically update the counters. 
    Click 'HELPER' to create a new resource, "componentHelper.js".
({
   getRecords: function(component) {
  
  // Write your code here
     
  }, // delimeter is used for future use 
 })
7. Now save the changes and reload the browser.

   For implement this, that how actually lightning component loads or works follow the link below -
   https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/qs_aotp_app_step3_model.htm
   I hope, It will help you.

   Regards,
   Ajay
brahmaji tammanabrahmaji tammana
Hi,

In short, After the component instances are deserialized, the following things will happen:

> Initialization of init event
> render, afterender and aura:doneWaiting events will be fired
> Styling

Thanks
Brahma