What is an Aura Component in Salesforce?

Aura Components are part of Salesforce’s Lightning Component Framework. They allow developers to build dynamic web apps for mobile and desktop devices. Aura was the original Lightning component model, introduced before Lightning Web Components (LWC).

Why Use Aura Components?

• Build interactive UIs in Lightning Experience
• Create reusable components with attributes and events
• Integrate client-side (JavaScript) and server-side (Apex) logic
• Support two-way data binding

Basic Structure of an Aura Component

An Aura Component includes multiple files:

• .cmp – Markup (HTML-like)
• Controller.js – Client-side logic
• Helper.js – Reusable JS logic
• Controller.cls – Server-side Apex

Sample Aura Component

1. Component Markup (helloAura.cmp)

<aura:component>
  <aura:attribute name="message" type="String" default="Hello from Aura!" />
  <h1>{!v.message}</h1>
</aura:component>

This component simply displays a message stored in an attribute.

2. Component with Controller (client-side interaction)

helloAura.cmp

<aura:component>
  <aura:attribute name="count" type="Integer" default="0" />

  <lightning:button label="Click Me" onclick="{!c.increment}" />
  <p>Count: {!v.count}</p>
</aura:component>

helloAuraController.js

({
  increment : function(component, event, helper) {
    var current = component.get("v.count");
    component.set("v.count", current + 1);
  }
})

This shows a button and increments a counter each time it’s clicked.

Calling Apex from Aura

Use the @AuraEnabled annotation in Apex classes to expose methods to Aura.

Example Apex Class

public with sharing class MyController {
  @AuraEnabled
  public static String getGreeting(String name) {
    return 'Hello, ' + name;
  }
}

Component with Apex Call

<aura:component controller="MyController">
  <aura:attribute name="greeting" type="String" />
  <lightning:button label="Greet" onclick="{!c.fetchGreeting}" />
  <p>{!v.greeting}</p>
</aura:component>

Controller JS

({
  fetchGreeting : function(component, event, helper) {
    var action = component.get("c.getGreeting");
    action.setParams({ name: "Developer" });

    action.setCallback(this, function(response) {
      component.set("v.greeting", response.getReturnValue());
    });

    $A.enqueueAction(action);
  }
})

When to Use Aura vs LWC

• Use Aura: If you’re working with legacy systems or need features like application events
• Use LWC: For modern development, performance, and web standards

Conclusion

Aura Components are powerful tools that help build dynamic and modular interfaces in Salesforce. While Lightning Web Components are the future, understanding Aura is still valuable for maintaining existing orgs and working with complex features.