Salesforce Lightning Component development small test knife

Let's first explain that the Controller in the component is the Apex class that binds the background and interacts with it. The method of this class needs to be annotated with @AuraEnabled. handler is a method called back during component loading. Action indicates which 
method in the Controller.JS file in the component is called. This may be too abstract, look at the code for details. 
component file code:

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:appHostable"
 description="HelloLightning" controller="FirstLingtningController">
 <aura:attribute name="myList" type="List"/>
 <aura:handler name="init" value="{!this}" action="{!c.Init}"/>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
        　　<tr class="slds-text-title_caps">
           　　<th>Id</th>
        　　　　<th>Account Name</th>
        　　</tr>
        </thead>
    <tbody>
            <aura:iteration items="{!v.myList}" var="obj">
            <tr>
                    <td>{!obj.Id}</td>
                    <td>{!obj.Name}</td>
                </tr>
        </aura:iteration>
        </tbody>
 </table>
</aura:component>

Code in ControllerJs file:

({
  Init : function(component, event, helper) {
    var action = component.get("c.getAccounts" );//Call background method
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set( "v.myList" ,response.getReturnValue());//Assign the returned result to the declared variable
            }
         });
         $A.enqueueAction(action);
      
  }
}）

Background Apex class code:

public class FirstLingtningController {
    @AuraEnabled
    public static List<Account> getAccounts() {
        return [select Id,Name from Account Limit 20];
    }
}

display effect: