Create a SharePoint List using PNP JS in O365

The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready .

The SharePoint Patterns and Practices client side libraries were created to help enable developers to do their best work, without worrying about the exact REST api details. Built with feedback from the community they represent a way to simplify your day-to-day dev cycle while relying on tested and proven patterns.

https://github.com/SharePoint/PnP-JS-Core

This article describes completing basic operations using the JS core library. It assumes you have added the library to your project either via CDN, bower, or npm package. The API is fluent and matches the structure of the underlying REST API to make it easy to discover the capabilities through intellisense

All of the samples posted below are TypeScript examples.

You can use Visual Studio or your own custom development environment to build SharePoint Framework solutions

Follow the below link to Set up your SharePoint Framework development environment.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

You can use any code editor or IDE that supports client-side development to build your web part, such as:

Import pnp js inside your typescript file.

The steps and examples in this documentation use Visual Studio Code, but you can use any editor of your choice.

Below is the example of reading data from SharePoint Online O365.

Example

import{ Web } from "sp-pnp-js";  
 import {  
   Version  
 } from '@microsoft/sp-core-library';  
 import {  
   BaseClientSideWebPart,  
   IPropertyPaneConfiguration,  
   PropertyPaneTextField  
 } from '@microsoft/sp-webpart-base';  
 import {  
   escape  
 } from '@microsoft/sp-lodash-subset';  
 import styles from './CreatePnPList.module.scss';  
 import * as strings from 'createPnPListStrings';  
 import {  
   ICreatePnPListWebPartProps  
 } from './ICreatePnPListWebPartProps';  
 export default class CreatePnPListWebPart extends BaseClientSideWebPart  
 < ICreatePnPListWebPartProps > {  
   private CreateList(): void {  
     let spWeb = new Web(this.context.pageContext.web.absoluteUrl);  
     let spListTitle = "SPFxPnPTest";  
     let spListDescription = "SPFxPnP Test";  
     let spListTemplateId = 100;  
     let spEnableCT = false;  
     lists.add(spListTitle, spListDescription, spListTemplateId, spEnableCT).  
 then(function(splist) {  
       getElementById("ListCreationStatus").innerHTML += 'New List' + spListTitle + 'Created';  
     });  
   }  
   public render(): void {  
     domElement.innerHTML = 'Welcome to SharePoint
 Framework Development using PnP JS Library Test';  
     CreateList();  
   }  
   protected get dataVersion(): Version {  
     return Version.parse('1.0');  
   }  
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {  
     return {  
       pages: [{  
         header: {  
           description: strings.PropertyPaneDescription  
         },  
         groups: [{  
           groupName: strings.BasicGroupName,  
           groupFields: [  
             PropertyPaneTextField('description', {  
               label: strings.DescriptionFieldLabel  
             })  
           ]  
         }]  
       }]  
     };  
   }  
 }