Aura Components Basics Fully Explained with all the codes

Aura Components Basics : 

Aura Components Basics module is first step to learn Salesforce Lightning .If you wanted to start learning the Lightning , this module would the best option you have . Module covers from very basic understad to advanced understaing .Even though this module requires more time to be spent but it would be worth learning .Once you have started the module if you any errors in the codes you can refer in this blog .

High Level Explanation : 
step 1:The expenseApp starts the flow .
step 2:and invokes 'expenses' component.
step 3:expenses component calls 'expenseForm' component :
       <lightning:layoutItem padding="around-small" size="6">
            <c:expenseForm/>
        </lightning:layoutItem>

step 4:expenseForm cmp is responsible for form to create new expense record.
step 5:By using 'expensesItemUpdate' event ,expenseform sends newexpense record to be commited to data base
        to expense cmp .
step 6: expense componet handles the event fired from expense form in step5 with new expense record .
          <!--Event for creating the expense form-->
                <aura:handler name="createExpense" event="c:expensesItemUpdate"
                  action="{!c.handleCreateExpense}"/>

step 7: By using step 6 expense cmp commit the new expense form to database

step 8: From the UI if user checks/unchecks IsReimbursed? check box it will
        also commited to datebase using the event fired from expenseItem cmp
        <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

 
*****************   Expense App  *************************

<aura:application extends="force:slds" >
    <c:expenses/>
</aura:application>

*****************  Expense App End  *************************



*****************   expenses.cmp  *************************

<!--expenses-->
<aura:component controller="ExpensesController">
    <aura:attribute name="expenses" type="Expense__c[]"/> 
 
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <!--Event for updateing isReimbursed? checkbox-->
    <aura:handler name="updateExpense" event="c:expensesItemUpdate"
                  action="{!c.handleUpdateExpense}"/>
    <!--Event for creating the expense form-->
    <aura:handler name="createExpense" event="c:expensesItemUpdate"
                  action="{!c.handleCreateExpense}"/>
    <!-- NEW EXPENSE FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            <c:expenseForm/>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <c:expensesList expenses="{!v.expenses}"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small" size="6">
            <!-- Put something cool here-->
        </lightning:layoutItem>
    </lightning:layout>
 
 
</aura:component>

*****************   expenses.cmp end  *************************



*****************   expenses.JS *************************

<!--expenses-->
<aura:component controller="ExpensesController">
    <aura:attribute name="expenses" type="Expense__c[]"/> 
 
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <!--Event for updateing isReimbursed? checkbox-->
    <aura:handler name="updateExpense" event="c:expensesItemUpdate"
                  action="{!c.handleUpdateExpense}"/>
    <!--Event for creating the expense form-->
    <aura:handler name="createExpense" event="c:expensesItemUpdate"
                  action="{!c.handleCreateExpense}"/>
    <!-- NEW EXPENSE FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            <c:expenseForm/>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <c:expensesList expenses="{!v.expenses}"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small" size="6">
            <!-- Put something cool here-->
        </lightning:layoutItem>
    </lightning:layout>
 
 
</aura:component>

*****************   expenses.JS  end*************************



*****************   expenses.Helper  *************************

({
    createExpense: function(component, expense) {
        var action = component.get("c.saveExpense");
        action.setParams({
            "expense": expense
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var expenses = component.get("v.expenses");
                expenses.push(response.getReturnValue());
                component.set("v.expenses", expenses);
            }
        });
        $A.enqueueAction(action);
    },
        updateExpense: function(component, expense) {
        var action = component.get("c.saveExpense");
        action.setParams({
            "expense": expense
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                // do nothing!
            }
        });
        $A.enqueueAction(action);
    },

})

*****************   expenses.Helper end *************************


*****************   expenseForm.cmp  *************************

<aura:component >
    <aura:attribute name="newExpense" type="Expense__c"
                    default="{ 'sobjectType': 'Expense__c',
                             'Name': '',
                             'Amount__c': 0,
                             'Client__c': '',
                             'Date__c': '',
                             'Reimbursed__c': false }"/>
 
    <aura:registerEvent name="createExpense" type="c:expensesItemUpdate"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <!-- CREATE NEW EXPENSE -->
            <div aria-labelledby="newexpenseform">
                <!-- BOXED AREA -->
                <fieldset class="slds-box slds-theme--default slds-container--small">
                    <legend id="newexpenseform" class="slds-text-heading--small
                                                       slds-p-vertical--medium">
                        Add Expense
                    </legend>
                 
                    <!-- CREATE NEW EXPENSE FORM -->
                    <form class="slds-form--stacked">       
                        <lightning:input aura:id="expenseform" label="Expense Name"
                                         name="expensename"
                                         value="{!v.newExpense.Name}"
                                         required="true"/>
                        <lightning:input type="number" aura:id="expenseform" label="Amount"
                                         name="expenseamount"
                                         min="0.1"
                                         formatter="currency"
                                         step="0.01"
                                         value="{!v.newExpense.Amount__c}"
                                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
                        <lightning:input aura:id="expenseform" label="Client"
                                         name="expenseclient"
                                         value="{!v.newExpense.Client__c}"
                                         placeholder="ABC Co."/>
                        <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                                         name="expensedate"
                                         value="{!v.newExpense.Date__c}"/>
                        <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"
                                         name="expreimbursed"
                                         checked="{!v.newExpense.Reimbursed__c}"/>
                        <lightning:button label="Create Expense"
                                          class="slds-m-top--medium"
                                          variant="brand"
                                          onclick="{!c.clickCreate}"/>
                    </form>
                    <!-- / CREATE NEW EXPENSE FORM -->
                 
                </fieldset>
                <!-- / BOXED AREA -->
            </div>
            <!-- / CREATE NEW EXPENSE -->
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

*****************   expenseForm.cmp end  *************************


*****************   expenseForm.JS   *************************

({
clickCreate: function(component, event, helper) {
        var validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            var newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    },
})

*****************   expenseForm.JS end  *************************


*****************   expenseForm.Helper *************************

({
    createExpense: function(component, newExpense) {
        var createEvent = component.getEvent("createExpense");
        createEvent.setParams({ "expense": newExpense });
        createEvent.fire();
    },

})

*****************   expenseForm.Helper end    *************************



*****************  expensesItemUpdate.event  *************************

<!--expensesItemUpdate-->
<aura:event type="COMPONENT">
    <aura:attribute name="expense" type="Expense__c"/>
</aura:event>
*****************   expensesItemUpdate.event  End *************************


*****************   expensesList.cmp  *************************

<!--expensesList-->
<aura:component>
    <aura:attribute name="expenses" type="Expense__c[]"/>
    <lightning:card title="Expenses">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.expenses}" var="expense">
                <c:expenseItem expense="{!expense}"/>
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>

*****************   expensesList.cmp End *************************


*****************  expenseItem.cmp  *************************

<!--expenseItem-->
<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="formatdate" type="Date"/>
    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

*****************   expenseItem.cmp End  *************************


*****************   expenseItem.JS  *************************

({
    doInit : function(component, event, helper) {
        var mydate = component.get("v.expense.Date__c");
        if(mydate){
            component.set("v.formatdate", new Date(mydate));
        }
    },
 

    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    },
})

*****************   expenseItem.JS End  *************************

*****************   expenseItem.style  *************************

.THIS.slds-card.slds-theme--success {
    background-color: rgb(75, 202, 129);
}

*****************   expenseItem.style End  *************************

*****************   ExpensesController.apex  ServerSideController  *************************

public with sharing class ExpensesController {
    // STERN LECTURE ABOUT WHAT'S MISSING HERE COMING SOON
    @AuraEnabled
    public static List<Expense__c> getExpenses() {
        return [SELECT Id, Name, Amount__c, Client__c, Date__c,
                       Reimbursed__c, CreatedDate
                FROM Expense__c];
    }
 
     @AuraEnabled
    public static Expense__c saveExpense(Expense__c expense) {
        // Perform isUpdateable() checking first, then
        upsert expense;
        return expense;
    }
}
*****************   expenseItem.apex End  *************************



We hope your clear with the process now .

If you still require further clarifications,Please let us know in the comments .

Happy Learning☺☺☺