How to access apex class properties in lightning components

This post explains how to access apex class properties in the lightning component.

Example:
Lightning Component

<aura:component controller="LightningDemoController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="objClass" type="LightningDemoController" />
    
    <aura:handler name="init" value="{!this}" action="{!c.getAccRecors}" />
    
     <!-- Notification Library to show notices and toast messages-->
    <lightning:notificationsLibrary aura:id="notifLib"/>
    
    <lightning:card title="Account Records">
        <p>
         User Name: <b>{!v.objClass.strUserName}</b>
        </p><br/>
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">
                        <div class="slds-truncate" title="Id">Id</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Industry">Industry</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.objClass.lstAccs}" var="ac">
                    <tr>
                        <th scope="row">
                            <div class="slds-truncate" title="{#ac.Id}">{!ac.Id}</div>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="{#ac.Name}">{!ac.Name}</div>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="{#ac.Industry}">{!ac.Industry}</div>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="{#ac.Phone}">{!ac.Phone}</div>
                        </th>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </lightning:card>
</aura:component>

Lightning Component Controller

({
    getAccRecors : function(component, event, helper) {
        var action = component.get('c.retriveAccInfo');
        action.setCallback(this, function(response) {
            if(response.getState() === 'SUCCESS') {
                var result = response.getReturnValue();
                component.set('v.objClass', result); 
                if(result.lstAccs) {
                    component.find('notifLib').showToast({
                        "variant": "success",
                        "title": "Success!",
                        "message": "Account Retrived successfully."
                    });
                }
            }
        });
        $A.enqueueAction(action);
    }
})

Apex Class

public inherited sharing class LightningDemoController {
    @AuraEnabled public String strUserName {get;set;}
    @AuraEnabled public list<Account> lstAccs {get;set;}

    @AuraEnabled
    public static LightningDemoController retriveAccInfo() {
        LightningDemoController obj = new LightningDemoController();
        obj.strUserName = UserInfo.getName();
        obj.lstAccs = [SELECT Id, Name, Industry, Phone FROM Account limit 10];
        return obj;
    }
}

Result