Classic People picker in Spfx

// add sp component loader
import { SPComponentLoader } from '@microsoft/sp-loader';


//Add below people picker html

<div id="peoplePickerUsers"></div>

// add the below function to OnInit methos

 public onInit(): Promise<void>
  {
  SPComponentLoader.loadCss("/_layouts/15/1033/styles/Themable/corev15.css");
   SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    }) .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/1033/strings.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/clienttemplates.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.core.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/clientforms.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/clientpeoplepicker.js', {
        globalExportsName: 'SP'
      });
    }).then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/autofill.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): void =>
    {
     //bind People picker control
     this.initializePeoplePicker("peoplePickerUsers");
    });

   // return Promise.resolve<void>();
return Promise.resolve();
  }

// declare three variable to intialize the control

declare var SP: any;
declare var SPClientPeoplePicker: any;
declare var SPClientPeoplePicker_InitStandaloneControlWrapper: any;

// Add function to intialize the people picker control

private initializePeoplePicker(peoplePickerElementId:string):void
{
    let schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

//To Get The People Picker Value

private getPeopleUserInfoGroups(pickerPickerControlId:string): void

{

this.peoplePickerLoginName="";

//var pickerDiv = $("[id^='" + pickerPickerControlId + "']");

let pickerDiv:any =document.querySelectorAll("[id^='" + pickerPickerControlId + "']");

var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[1].id];

let users:any = peoplePicker.GetAllUserInfo();

if (users.length > 0)

{

for (let i:number = 0; i < users.length; i++)

{

console.log(users[i].Key);

this.peoplePickerLoginName=users[i].Key;

this.GetUserIdByLoginName(this.peoplePickerLoginName);

}

}

}

private async GetUserIdByLoginName(loginName:string)

{

let tempUserInformation:any;

tempUserInformation= await pnp.sp.web.siteUsers.getByLoginName(loginName).get();

return tempUserInformation;

}

// To set the people picker value

private setPeoplePickerValue(controlNameID:string, LoginNameOrEmail:string) {

//var fieldName = id + '_TopSpan';

let peoplePickerDiv:any =document.querySelectorAll("[id^='" + controlNameID + "']");

// Get the people picker object from the page.

let peoplePicker:any = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[1].id];

peoplePicker.AddUserKeys(LoginNameOrEmail, false);

}