Step 4 - define the function that will make SPHttpClient request to read list items and test the web part

Add the following code after the _readAllItems function:

private _getListItems(): Promise<ISPListItem[]> { 
  const url: string = this.context.pageContext.site.absoluteUrl+ 
    "/_api/web/lists/getbytitle('My List')/items"; 
  return this.context.spHttpClient.get(url,SPHttpClient.configurations.v1) 
     .then(response => { 
        return response.json(); 
      }) 
    .then(json => { 
      return json.value; 
    }) as Promise<ISPListItem[]>; 
} 

This function will use SharePoint API to read all list items in from the list called My List which we created in step 1.

Now it is time to test our web part. In the command line, type in the following command:

gulp serve --nobrowser 

Next, switch to the browser and open the workbench from the Team site of the Office 365 Group we created in step 1. The URL is something like https://yourtenant.sharepoint...