Microsoft 365 Community Community Demos, 18 Jun 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using React Hooks with SharePoint Framework

Description

In this 8-minute developer focused demo, Paul Schaeflein introduces viewers to the Adaptive Card Viewer that uses React Hooks to get information. Essentially this is the React Hooks version of The Adaptive Cards Host (Hugo Bernier) demoed on this call in April. The React FunctionComponent uses React useEffect hooks to get info. Hooks and functional components can be used along-side class components. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 18, 2020.

Demo Presenter: Paul Schaeflein (AddIn365) | @paulschaeflein

Supporting materials:
• react-adaptivecards-hooks | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-adaptivecards-hooks
• Creating an SPFx Web Part using React Hooks | https://www.schaeflein.net/creating-an-spfx-web-part-using-react-hooks/
• Adaptive Cards Host web part | Hugo Bernier (Tahoe Ninjas) | @bernierh https://twitter.com/bernierh | https://www.youtube.com/watch?v=gWrvC-0HF4A

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

Now the next part of my talk was to talk about react, hooks and so I'm going to switch over it now to a couple of different Visual Studio code windows. The first one is this adapter. This is in the the the samples repo. This is the adaptive card web part.

A

History is demo of this and I want to compare and contrast that with the hooks version, and so a couple things that I want to call out. First of all is that hooks are optional. You can run those side by side, they run on function, components, but they work well class components, and so what I did is just to go through his web part here and I've changed it around. So let me bring this one up here, trying to race through this. Obviously we're not gonna I'm, not gonna cover the whole.

A

The whole thing right, so we have two different versions here: well, I'm, not gonna, do em side by side. That's not gonna work with me today, but what I want to point out here? We look real close to here. What what I've done is the the actual web part and it's generated is untouched.

A

Basically, right, SharePoint framework creates a class and that's fine hooks are not supported in classes, but if you think through what needs to happen here in general, but we just use I just used the built-in web part to host a functional component, which is the this root component and then, of course, all that work to be done for properties, as still as it always was, so that part still works so close at the component.

A

This is a functional component pair, so functional component, so it can use hooks right and there's a couple of custom hooks that I used. One of them is a card service which will make a call out to an HTTP endpoint use the list data service.

A

So that's basically using this pjs to read a list and then there's a couple of built-in ones here to set state so things that you would expect I'm gonna be setting stay for stuff I need to do, and then you can see here we're using the the user effect cook to react when something changes. So again, you can read more about this in links that we'll post, but when I have this dependency of null.

A

That means this kind of component mount so when it did mount it'll go through, and what I want to point out here is that it's going to connect to the context right. So this is the SharePoint context that we gave as part of our web part. If I go back to my tap on here, you'll notice, that's when I do render. It is passing this that context into the route component, and so it's available there. I can then pull information out of that now.

A

Another thing that what this component is doing is it's importing a context, and the idea around this is I can now use an app context when I render and I can provide things that are put in the context are now available to all children and which, basically, is everything in my web part. Why do I care about this? Because I can now reference things from the context instead of having to pass it down so the reason I?

A

This becomes interesting to me because, as I drill down into other components, I don't necessarily need to have the passed in as a property right. There's no properties that are passed in I just use the context, so this makes sense I'm just one child on, but if I keep going further down into my adaptive card host, they come into the adaptive Connard host control.

A

Again, I'm going to then get the context and I don't have to pass in any properties. The properties that I'm passing in are really only things that are going to directly control the rendering what I need the context, because I want to switch when the theme changes right. So if the sharepoint web hurt the SharePoint site theme, changes I may want to react that or I want to make an HTTP call in response to handler on the adaptive card. I don't necessarily have to pass in a property- that's not necessarily used.

A

So this is the kind of the idea around using context and using hooks I want to go back to my viewer web partners. A couple of a bunch of other hooks in here, I scroll down, I, know I'm, going very fast here. Sorry about that, not this one! If I go back to the adaptive card, viewer.

A

I got my myself all confused here. If I go back to adaptive, hard host component, yeah, all right, so you'll notice, here it's reacting to- is the data loading I'm going to show a spinner or I'm going to show the adaptive card if I look at the adaptive card? What's interesting here, I think, is that if looking at this closely, this is a class component. In fact, it's unchanged from what Hugo had prepared. The key point here is I can use hooks and functional components alongside class components.

A

I don't have to change everything, so I was able to to leave a top-level part. The original SP FX generated web part is a class and the the bottom bottom entry, the rendering component is still class and everything in between is set up to be hooks. And so, if you look at both projects, just use a lot of services in here, and this is I've abstracted out a bunch of the stuff to do HTTP context and there's also a reducer. You can read more about the use reducer hook as well.

A

The reducer becomes helpful because, as I make change or as the information comes back from from my data from a GP endpoint, this will obey you reflected in the state and so in this hooked, when this hook monitor the state when the state changes it'll cause a rerender. So in this particular example, you can see what I'm just saying, hey I've got here's my my data that came in as a payload right when my Stipe is complete.

A

Here's the bad can pass the data in here by using this dispatch method in the reducer, and this will cause a rear-end úrsula car. The web part will be render so and you can see, there's various hooks on different different dependent properties and that I find this becomes less much cleaner to have individual methods the based on changes instead of a big monolithic data, rendering once if I go back to the OL and you'll notice.

A

If I come into the adaptive card host component in here, there's a lot of if statements going through and checking through, what's going on, so it's just a way that get us a little bit more straightforward code. In using the hooks, along with the context so talking about hooks just to recap, there are some reasons why the react team built them the bottom one. There is what helps me confused the this.

A

What is this in a particular class so that doesn't matter because it's a function and now it doesn't factor to use context and state- and here are a bunch of links and I'm happy to take any questions that folks have excellent. Thank you. Paul.