SOLVED

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

Iron 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 (Iron 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 :)
1 best response

Accepted Solutions
best response confirmed by Americo Perez (Iron 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.

View solution in original post