SOLVED

Getting starting with @pnp/sp and react: Help!

%3CLINGO-SUB%20id%3D%22lingo-sub-305837%22%20slang%3D%22en-US%22%3EGetting%20starting%20with%20%40pnp%2Fsp%20and%20react%3A%20Help!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-305837%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EI%20want%20to%20begin%20developing%20web%20parts%20with%20SPFx%20%2B%20React%20%2B%20Pnp%20but%20I%20can't%20find%20samples%20using%20this%20tools%20together.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20found%20this%20page%20that%20show%20how%20to%20use%20Pnp%3A%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fpnpjs%2Fblob%2Fdev%2Fpackages%2Fsp%2Fdocs%2Findex.md%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EHere%3C%2FA%3E%26nbsp%3Band%20as%20you%20can%20see%20its%20focus%20in%20just%20Pnp.%3C%2FP%3E%3CP%3EThen%20I%20found%20this%20one%20showing%20how%20to%20get%20list%20items%20using%20Pnp%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2Fmaster%2Fsamples%2Fsharepoint-crud%2Fsrc%2Fwebparts%2FpnpjsCrud%2FPnpjsCrudWebPart.ts%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EThis%20one%3C%2FA%3E%26nbsp%3Bbut%20is%20not%20using%20React%20at%20all.%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20I%20decided%20to%20give%20it%20a%20try%20and%20try%20to%20start%20learning%20by%20doing%2C%20but%20right%20after%2010%20mins.%20I%20got%20stuck.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20a%20SPFx%20with%20React%20framework%20and%20installed%20the%26nbsp%3B%40pnp%2Fsp.%26nbsp%3B%20Then%20in%20an%20onInit()%20method%20I%20set%20the%20context%20(in%20the%20root%20webpart.ts)%3A%3C%2FP%3E%3CPRE%3E%3CSPAN%3Epublic%20%3C%2FSPAN%3E%3CSPAN%3EonInit%3C%2FSPAN%3E%3CSPAN%3E()%3A%20%3C%2FSPAN%3E%3CSPAN%3EPromise%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%3CSPAN%3Ereturn%20super%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EonInit%3C%2FSPAN%3E%3CSPAN%3E().%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E_%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%20%7B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3Esp%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Esetup%3C%2FSPAN%3E%3CSPAN%3E(%7B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%20%20%3CSPAN%3EspfxContext%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3E%7D)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%7D)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%7D%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3Epublic%20%3C%2FSPAN%3E%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E()%3A%20%3C%2FSPAN%3E%3CSPAN%3Evoid%20%3C%2FSPAN%3E%3CSPAN%3E%7B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%3CSPAN%3Econst%20%3C%2FSPAN%3E%3CSPAN%3Eelement%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3EReact%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EReactElement%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EIReadReactProps%20%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%3D%20%3C%2FSPAN%3E%3CSPAN%3EReact%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EcreateElement%3C%2FSPAN%3E%3CSPAN%3E(%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3EReadReact%3C%2FSPAN%3E%3CSPAN%3E%2C%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%7B%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%20%20%3CSPAN%3Edescription%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eproperties%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Edescription%3C%2FSPAN%3E%3CSPAN%3E%2C%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%20%20%3CSPAN%3EpageContext%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EpageContext%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20%20%20%3CSPAN%3E%7D%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%20%20ReactDom%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eelement%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EdomElement%3C%2FSPAN%3E%3CSPAN%3E)%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EBut%20now%20I%20don't%20fin%20the%20way%20to%20pass%20the%20context%20prop%20to%20my%20component.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20don't%20even%20know%20if%20the%20right%20way%20to%20use%20pnp.%26nbsp%3B%3C%2FP%3E%3CP%3EHas%20anyone%20a%20simple%20sample%20using%20SPFx%20%2B%20React%20%2B%26nbsp%3B%40pnp%2Fsp%20to%20get%20me%20in%20the%20right%20path%3F%20or%20a%20link%20with%20a%20sample%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-305837%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-306000%22%20slang%3D%22en-US%22%3ERe%3A%20Getting%20starting%20with%20%40pnp%2Fsp%20and%20react%3A%20Help!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-306000%22%20slang%3D%22en-US%22%3EGlad%20it's%20useful%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3E%3CBR%20%2F%3EMerry%20Christmas%20and%20happy%20new%20year%20%3A)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-305996%22%20slang%3D%22en-US%22%3ERe%3A%20Getting%20starting%20with%20%40pnp%2Fsp%20and%20react%3A%20Help!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-305996%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20Joel!%3C%2FP%3E%3CP%3EThis%20is%20exactly%20what%20I%20need%20to%20get%20started%2C%20is%20perfect!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhy%20people%20doesn't%20make%20more%20samples%20like%20this%20for%20us%20that%20need%20a%20little%20push%20to%20get%20started%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnyways%2C%20thanks%20a%20lot!!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMerry%20christmas%20and%20an%20happy%20new%20year!!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%2FAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-305861%22%20slang%3D%22en-US%22%3ERe%3A%20Getting%20starting%20with%20%40pnp%2Fsp%20and%20react%3A%20Help!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-305861%22%20slang%3D%22en-US%22%3EHi%20Americo%2C%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fjoelfmrodrigues%2Fdemos%2Ftree%2Fmaster%2FPnP%2520Controls%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fjoelfmrodrigues%2Fdemos%2Ftree%2Fmaster%2FPnP%2520Controls%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EI%20have%20a%20repository%20that%20I%20used%20for%20presentations%20that%20is%20using%20PnPjs%20on%20a%20very%20basic%20way%2C%20without%20a%20data%20service%20architecture%20which%20is%20what%20I%20use%20for%20production%20code.%3CBR%20%2F%3ECheck%20out%20the%20%22final%22%20folder%20for%20a%20working%20version%20of%20the%20code.%3CBR%20%2F%3EAlternatively%2C%20you%20can%20follow%20the%20instructions%20on%20the%20readme%20file%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3E%3CBR%20%2F%3EFor%20more%20detailed%20samples%2C%20check%20out%20the%20PnP%20web%20part%20samples%20repository.%20It%20contains%20amazing%20samples!%3CBR%20%2F%3E%3CBR%20%2F%3EHope%20it%20helps.%3C%2FLINGO-BODY%3E
Regular Contributor

Hi,

I want to begin developing web parts with SPFx + React + Pnp but I can't find samples using this tools together. 

I found this page that show how to use Pnp: Here and as you can see its focus in just Pnp.

Then I found this one showing how to get list items using Pnp: This one but is not using React at all. 

So I decided to give it a try and try to start learning by doing, but right after 10 mins. I got stuck. 

 

I created a SPFx with React framework and installed the @pnp/sp.  Then in an onInit() method I set the context (in the root webpart.ts):

public onInit(): Promise<void> {
return super.onInit().then(_=> {
sp.setup({
spfxContext: this.context
});
});
}

public render(): void {
const element: React.ReactElement<IReadReactProps > = React.createElement(
ReadReact,
{
description: this.properties.description,
pageContext: this.context.pageContext
}
);

ReactDom.render(element, this.domElement);
}

But now I don't fin the way to pass the context prop to my component. 

I don't even know if the right way to use pnp. 

Has anyone a simple sample using SPFx + React + @pnp/sp to get me in the right path? or a link with a sample? 

 

Best regards

Americo

3 Replies
best response confirmed by Americo Perez (Regular Contributor)
Solution
Hi Americo,

https://github.com/joelfmrodrigues/demos/tree/master/PnP%20Controls

I have a repository that I used for presentations that is using PnPjs on a very basic way, without a data service architecture which is what I use for production code.
Check out the "final" folder for a working version of the code.
Alternatively, you can follow the instructions on the readme file :)

For more detailed samples, check out the PnP web part samples repository. It contains amazing samples!

Hope it helps.

Thanks Joel!

This is exactly what I need to get started, is perfect!

 

Why people doesn't make more samples like this for us that need a little push to get started? 

 

Anyways, thanks a lot!!

 

Merry christmas and an happy new year!!

 

/Americo

Glad it's useful :)

Merry Christmas and happy new year :)