The force:recordData component allows us to load the record from the Salesforce object, using recordId. recordId on the standard record page can be obtained by implementing the force:hasRecordId interface, shown as follows:

<aura:component implements="force:hasRecordId">
<!-- The following is an attribute that automatically holds the Id if the component implements the force:hasRecordId -->
<aura:attribute name="recordId" type="String" />

    <!--... -->
    
</aura:component>

The syntax for loading the data for the record using force:recordData is as follows:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="recordId" type="String"/>


    <force:recordData aura:id="recordLoader"
      recordId="{!v.recordId}"
      layoutType="FULL"
      targetRecord="{!v.record}"
      targetFields="{!v.simpleRecord}"
      targetError="{!v.recordError}"
      recordUpdated="{!c.handleRecordUpdated}"
      mode = "VIEW"
      />

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.recordError}
            </ui:message>
        </div>
    </aura:if>
</aura:component>

You will notice that we have targetRecord and targetFields attributes, both of type object. They are almost identical, and they hold recordData, with a key as the field name. Using targetRecord, the syntax was too long, and targetFields simplified it.

With targetRecord, the syntax to get the field value will be v.targetRecord.fields.Name.value, while for targetFields, the syntax to extract the value of the field is simplified to v.targetFields.Name. Note that Name is the field's name.

Also, notice that we have layoutType, which can have one of two options: FULL or COMPACT.

With FULL, the fields configured by the Salesforce administrator for the page layout are automatically queried. COMPACT queries for fields in the COMPACT layout.

You can also specify fields explicitly by using the fields attribute and specifying the list of fields, separated by commas.

The mode attribute is always view by default, but for edit layouts, you can specify EDIT.

The recordUpdate object provides the ability to hook the event to the component, to handle any data changes.

The controller code to handle record changes for various use cases is shown as follows. Notice that the event automatically has a property named changeType, to help identify the type of operation that happened on the record:

({
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
           // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            // there's an error while loading, saving, or deleting the record
        }
    }
})