campingList.cmp

    <aura:component controller="CampingListController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" >
<aura:attribute name="items" type="Camping_Item__c[]"/>


<aura:handler name="init" value="{!this}" action="{!c.doInit}" />     
<aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>

 <div class="slds-grid">
    <div class="slds-col slds-col--padded sls-p-top--large">
        <c:campingListForm />
    </div>
</div>
<!-- ITERATING ITEM LISTS -->
<div class="slds-card slds-p-top--medium">

    <c:campingHeader />

    <section class="slds-card__body">
        <div id="list" class="row">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </div>
    </section>
</div>  
<!-- / ITERATING ITEM LISTS -->
</aura:component>
Step 2:- Controller
({
    
    doInit: function(component, event, helper) {
    
        var action = component.get("c.getItems");
    
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.items", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
    
        $A.enqueueAction(action);
    },    
    
    handleAddItem: function(component, event, helper) {
        var item = event.getParam("item");
                
        var action = component.get("c.saveItem");
        action.setParams({
            "item": item
        });
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {        
                var theItems = component.get("v.items");
                theItems.push(item);
                component.set("v.items",theItems);
            }
        });
        $A.enqueueAction(action);
    }
    
})

<aura:component controller="CampingListController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" >

    <aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
                                                                   'Quantity__c':0,
                                                                   'Price__c':0,
                                                                   'Packed__c':false,
                                                                   'sobjectType':'Camping_Item__c'}"/>

    <aura:registerEvent name="addItem" type="c:addItemEvent"/>

    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="newCampaingForm">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newCampaingForm" class="slds-text-heading--small 
                                                    slds-p-vertical--medium">
                    Add Expense
                </legend>
                <!-- CREATE NEW Camping FORM -->
                    <div class="slds-col slds-col--padded slds-p-top--large">
        
        
        <c:campingHeader />
        
        <div aria-labelledby="newCampaingForm">
            
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                
                <legend id="newCampaingForm" class="slds-text-heading--small 
                                                   slds-p-vertical--medium">
                    Add Expense
                </legend>
                
                <!-- CREATE NEW Campaing FORM -->
                <form class="slds-form--stacked">
                    
                    <!-- For Name Field -->
        <lightning:input aura:id="expenseform" label="Camping Name"
                         name="expensename"
                         value="{!v.newItem.Name}"
                         required="true"/>
        <!-- For Quantity Field -->
        <lightning:input type="number" aura:id="campingform" label="Quantity"
                         name="expenseamount"
                         min="1"
                         value="{!v.newItem.Quantity__c}"
                         messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
         <!-- For Price Field -->
        <lightning:input aura:id="campingform" label="Price"
                         formatter="currency"
                         name="expenseclient"
                         value="{!v.newItem.Price__c}"
                          />
         <!-- For Check Box -->
        <lightning:input type="checkbox" aura:id="campingform" label="Packed"  
                         name="expreimbursed"
                         checked="{!v.newItem.Packed__c}"/>
        
        <lightning:button label="Create Camping" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateItem}"/>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
                
            </fieldset>
            <!-- / BOXED AREA -->
            
        </div>
        <!-- / CREATE NEW EXPENSE -->
    </div>
            </fieldset>
            <!-- / BOXED AREA -->
        </div>
    </div>
</aura:component>

({    
    
    clickCreateCampingItem : function(component, event, helper) {
        
        var validCamping = true;

        // Name must not be blank
        var nameField = component.find("name");
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
            validCamping = false;
            nameField.set("v.errors", [{message:"Camping Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }

        
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price) || isNaN(price) || (price <= 0.0)){
            validCamping = false;
            priceField.set("v.errors", [{message:"Camping Item price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        var quantityField = component.find("quantity");
        var quantity = quantityField.get("v.value");
        if ($A.util.isEmpty(quantity) || isNaN(quantity) || (quantity <= 0)){
            validCamping = false;
            quantityField.set("v.errors", [{message:"Camping Item quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }

        if(validCamping){
            
            helper.createItem(component);
            
        }
        
    },
})

<aura:component implements="force:appHostable">
    <aura:attribute name="item" type="Camping_Item__c" />
    <p>Name :
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Quantity :
        <ui:outputNumber value="{!v.item.Quantity__c}" />
    </p>
    <p>Price :
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Packed? :  
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>

<aura:component >
  <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem >
            <lightning:icon iconName="action:goal" alternativeText="My Camping"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping</h1>
                <h2 class="slds-text-heading--medium">My Camping</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

public with sharing class CampingListController {

    @AuraEnabled 
    public static List<Camping_Item__c> getItems() {
        return [SELECT Id, Name, Price__c, Quantity__c, Packed__c FROM Camping_Item__c];
    }
    
    @AuraEnabled
    public static Camping_Item__c saveItem(Camping_Item__c item) {
        upsert item;
        return item;
    }
}

({
        
    packItem : function(component, event, helper) {
        var pack = component.get("v.item");
        pack.Packed__c = true;
        component.set("v.item",pack);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
        
    }
    
    
})

<aura:event type="COMPONENT">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>
**Step 12 --CampingListFormHelper.js**
({
    
     createItem : function(component) {
        var newItem = component.get("v.newItem");
        var addEvent = component.getEvent("addItem");
        addEvent.setParams({"item" : newItem});
        addEvent.fire();
        component.set("v.newItem",
                     { 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Packed__c': false,
                    'Price__c': 0,
                    'Quantity__c': 0});
    }
})