Microsoft 365 Community Community Demos, 21 Aug 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Call Demo - React Functional Components and React Hooks within SPFx solutions

Description

This community call demo is taken from the SharePoint Framework community community call recording on 15th of August 2019. In this video, Bill Ayers is demonstration how to use React Functional Components and React Hooks within SharePoint Framework solutions.

Presenter - Bill Ayers (Flow Simulation Ltd) - @SPDoctor

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-15th-of-august-2019/

More details on the samples demonstrated in this demo - see following locations:

- https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-functional-component
- https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-functional-stateful-component
- https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-functional-component-with-data-fetch

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

So react, functional components and hooks is the topic so that two related things react. Functional components have been around for a while react. Hooks is fairly new, so new, in fact that you would be on line one SharePoint framework to automatically get the version of react that we need for react hooks which is 16.8 so you'd.

A

That's timely, a 1.91 release. Before with the earlier releases, you have to fill around to get it to use a different version of the react framework which isn't much fun. So that's me boring slide, but there's my blog sites. If you want I've, got an article well and that's my Twitter handle, so why functional components so normally, when we build a react component, we use a class and it's a derived class from reactant, but there's another way of building a react component which is just to make a simple function and look how simple that is.

A

It's simply a function. That's got the name of the component, then a single argument, which is your pause, and then you just return, and this would be in a TSX file- obviously return the the react. Elements that you want to render very clean, very simple has Gordon Ramsay would probably say you don't have any this and that in all those complexities you can get a bit of kudos if you've got one of these hipster functional programmers, of course, and says: hey man, you know you should be using functional programming.

A

Well, yeah, okay, Java Script is kind of functional. Actually, it's it's not even a classical language, so it's not a natural fit to use classes in JavaScript or typescript. So this does fit better with the way the underlying language was constructed as a prototypal inheritance model very easy to test. It's a pure function, so the only thing it depends on is the properties that come in, which is one of the argument.

A

So that's great now, of course, if you want to do something like state in a lot of components are actually pure functions, but often you you want some kind of state and for that we have to introduce hooks, which is the problem that reacts Hawkes. So so it might look like a fairly esoteric thing, but it does mean that your code is a lot cleaner and at least for going on if you use this functional component approach rather than classes. So let's look at what happens if we were to run the yeoman generator.

A

So now you should see my PowerShell window, so the drill up a little I. Do you at Microsoft, slash, SharePoint and you've, probably seen this a thousand times and I build just the box human generator, and we answer all the questions and eventually it says: do you want to use the know? Javascript framework, knockout or yeah I? Think you get a pick react. Why? Wouldn't you and I'm not going to go through all this, but eventually that would generate this project in hello world and, if I open the editor in there.

A

This is what you'll see in because it's a react. Web part you get a components, library or subdirectory, and then in there there's a TSX file. I assume everybody's familiar with react, and you get this strange syntax where it returns all the divs and this magical, TSX compiler comes and composes it all and turns it into valid typescript and on silently JavaScript. But it's a class based on react component. So if I wanted to make that a functional component, what I could do is, and nobody suggesting you should go in and refactor everything to do.

A

A

Default function, hello, world and then I just passed through the props I could make those strongly typed if I want to and then I don't need to do a render method class. It's just gonna return. I've got an extra close race which I get right now, let's simplify that into a react, functional component, so all this is doing is returning all this I have to change. This is now there's no this anymore, so they can that's a simplification.

A

So let's return the props and if you want to be really clever, you could use aid array, destructuring, sorry, an object, destructuring option operator here and what that does is you could just pass that as a description I'll come back to this D structuring a bit later it. So that's just a feature of the language. It's nothing to do with the making a functional component right. So I've got an example.

A

So if you go the let's go to the top, so I go to the point under get up so github / share point and then there's a library called or a project called SP dev effects. Webparts and you can download that be aware that that's about a gigabyte now they do so. You might want to sparse check out if you just wanted a few samples, so I go down into samples. I'm actually got a few here which are all starting with react, fun and react functional component.

A

This is this is the simplest one which is just going to be like the hello world webparts, so I've built one here. So if you want to download that and try it, you can do I'll just show you what it looks like. So it's this functional component, hello, world I've, actually strongly typed the properties.

A

So this is no not a huge difference, but it is significantly simpler and, as we get into more complicated examples, the story gets better, but look how quickly I can write using a functional component, a new component in here. So if I were to say my component name, give it a property equals bill and I can justify it up here or I could do it in a separate five I wanted to so I could all have to do is function. My component in the props then ripped h1 and hello props not source, it name.

A

Wasn't it and I've just written a another react component and you know I can't even art just from memory, so it just simplifies things a surprising amount and if you'll see what that that one looks like well, it just renders exactly the sound before I say: I will rent render the same, go to react fun using that one and I'll do a gulps here, I hope, I haven't got one running somewhere else.

A

Just check haven't accidentally left something running in the other window now so that will fire up and in the workbench and if I load that web part up. It just looks like the normal out-of-the-box web, pardon just to prove that I had that change. I just made if I save that it should reload shouldn't is because it's reloading.

A

And when that refreshes, those working.

A

And now it says hello bill, because I've got that extra component that I added in there right now, that's great, but you know. Typically, what we want is something that's got some state in it and, although, as I say, a lot of components, the smaller components might be pure, like that we often need to work with States.

A

So I've got another example here called Roman numerals and if I just go to that that one and I'll kill this go up a level and go into so this example they're all in the samples library and this one is called react, functional components, stateful and I'll. Do it gulp serve of this one as well? So all you need to do is go to that samples, library download it, and then you need to do an NPM install and then it will all be there and ready to run.

A

There are instructions on how to run these samples on github as well. So this is the Roman numerals web bar, but so this has got a little bit of state in it. So what happens here is I've got a an input box here when I changed in the values.

A

In this text box, the Roman numerals below changed come back and if I go to edit the web part I've actually got a couple of extra controls or I added just to make it a little bit more exciting and I can I've got some captions and things that I can put in there, and so now that I've done that I can use that increment and decrement counter. So this component has States needs to know what the users entered and what state it's in.

A

It's not purely dependent on the properties which we pass it through these controls in the web pal settings. So let's look at the code behind that. So this this is my Roman numerals webpart Roman, numerals tsx, and what we have here is in order to so it's still a functional ponent, but in order to support state on 911 I've used, this feature called react. Hooks now react rocks, has a number of methods they're, all they all start with. The word use.

A

So there are about 10 that come out of the box as it were for for hooks, and then you can write your own as well, so you can bundles functionality into these as well. So you know I, obviously can't I've got time to go into it in much detail, but if you want to learn more, you just Google for react.

A

Hooks you'll find a full explanation of how it works and how you use it, and this is a sort of the direction that react is is going at the moment, but it's a new enough feature that you need the latest version of the SharePoint framework to be compatible with it. So this is what this function you state does is it takes an argument which is in an initial value and I've actually taken one of the properties to provide that initial value, and then it returns a tuple, and so remember that spread operator.

A

Well, the the I use an object, destructuring operator. This is an array ad structuring operator that I'm using here that spreads those two elements into these two constants. So there's all that's really happening. You know I could have written this just as well as ooh, then just say value equals VAR value equals foo.

A

Zero is is equivalent to it to what we've done there. So, on the same with a second one, so it returns the value and then a setter, which is a function of course, so that setter is equivalent to in state you'd, have a set state function. If we were using a class-based react component, we use set State we'd have to set things up in the constructor and we might well find we had to do things in some of these component. Did mountain component did own methods as well? There might be some complexity around that too.

A

So this is really very simple. So just a one-line that this handles state for me, I can have other states as well. You know if I had and another variable called foo we're going to call that foo and set foo. You know the names are immaterial I can call them what I like, but the convention is to call it the variable name and then a setter prefix that would set. So that's how how that works. So now, when I go into the input control, you can see, the value is being picked up from value.

A

There's no, this and there's no. This variable that I have to worry about whether I've got the right one or not, and things like that and I've also got an on change method there or function that I've defined up here, which uses that set value to set the new value. So as I go into the input control its it sets the states to a new value and that causes a rerender and then I've also got.

A

If I choose to show these up/down buttons, then I've got an onclick event and I've used that could be a function as well, but I haven't have used a land or expression that then uses a set value to increment the value. So very simple, you know a very simple function. Actually that does a reasonable amount.

A

So that's that's. My second example where we have state and I've got a third one, which is also quite interesting, so I go up a level and go into reactor functional, do with data fetch and in this example. So if I do a gulp serve on this one, and we can have a look at that, how actually loaded it up already in another window which will save me running it as long as I, don't refresh the page right. This is the team's tracker.

A

So what that is doing is so this one I can't run in the workbench, because I have no contact to work with. So what it's doing is it's running inside a tenant in the tenant workbench, and it gives me a list of all the teams I'm a member of, and then I've also got a toggle here which shows the channels for each team. So when I click on that, it's actually making a another request using Patrick's p.m.

A

PJs library, of course, to populate these so that the the team team members, sorry, the team channels are shown as well. So let's look at the code behind that one.

A

So this is the team's tracker and I look at the team's tracker control itself. First, so again, I've used use data, so a react cook to manage a team's list.

A

State variable and we've got a set teams list and the second thing, the second type of hook we've used here- is one called use effect, which is intended for things that involve side effects.

A

That's why it's called use effect and what we do there is we pass the react to use effect, a function in this case, I've used a lambda can also spell it out as a function if I wanted to which has no parameters, but it calls the graph so back up here so where I've set this up in on in it in the sort of the higher level the actual web part.

A

The web part, of course, has to be class-based because it's extending a base client-side web part, and then it's got an on an it method, where I set up the the the P and pjs graph library and then down in the teams, tracker component itself, I'm using that and in this callback it's it's goes and gets the teams and then uses that setter on the state to update the list of teams. So when the control is first rendered, it's going trigger this. It will pass through this use effect.

A

And then, when that callback returns, it will then update the the control so you'll see a spinner which I think I've set somewhere where it is I think there's a spinner here. It is yes that a jet it shows until that teams list gets updated and then once the teams list is populated with an array of teams, it then maps that and outputs a series of list elements with each team, and that itself is another control which we'll look at in a second. So the one thing to watch out for here is you see.

A

I've put the second argument to use effect, which is quite important because just think about what happens here every time this team's tracker gets rendered. It calls this and what would happen is it would call this every time but then go and fetch the data and set the team's list variable and because that's like set state in react, then it will trigger a rerender of the component. They get a nasty infinite loop.

A

If you don't do something to say, only do it the first time, so this this empty array says, is I'm conditional on nothing and the consequence is it only calls this the first time that the component is rendered and it populates this this list, and then the list of teams is each team is rendered using this separate team component.

A

So if we go into the team component and itself is very simple, actually it too has state, which is the list of channels which might be empty depending on whether this show channels, property is true or not, so that ultimately comes from the the property pane. When we set up the properties of the webpart and then it'll either set the channels this to an empty list.

A

If we're not showing the channels it's or it'll, go off and get the teams now just a little side note, it might not be efficient to do that, but it's for the purpose of the demonstration I think it's you to do it.

A

That way, you might decide that there's the cost of making that call is too high and I want to cash it somewhere, and there are lots of ways of doing that as well, but just for the sake of this demonstration we're actually, when that gets shown, it's gonna go up off at each of these teams is going to populate itself, which keeps it nice and contained, and then again, I've got once I've got a channel list.

A

I'll use a map function to then output, a an array of list elements with the individual channels in and in this case, I'm dependent on whether I'm, showing channels or not. So this is something that the user can change through the through the web part property panel, a property pane, so I need to be aware. You see that's coming in as one of the props, but if that changes, I need to make sure that this use effect knows that and gets called again.

A

So this is really just an array of dependencies of what use effect is doing so all of that it would have taken a lot of fiddling around with lots of methods and did mount and did unmount and and you'd have to think about well. I know what do I do if the user changes this show channels amount, go and and deal with all this.

A

It all ends up being a lot simpler using this approach so yeah, it might not be obvious on this first initial glance, but I would encourage you to to go in and find out a bit more about it.

A

First of all get up to speed with SPF X 1.91. You can download these samples and they will work with even if you've got an earlier version of the SharePoint framework generator installed or you can because it will just do an NPM install. So that's not the problem, but if you're doing it from scratch- and you want to start using this approach- I wouldn't go and refactor everything to use functional components and Reax hooks.

A

That's totally unnecessary, but you might choose to I, have actually refactored a lot of my code using that, because the resulting code is so much cleaner and so much nicer that I've I've kind of got hooked on on this approach anyway. Learn about react, hooks, don't forget! There's you know Google for react, hooks and try those samples that I've got on github and and let's write some cleaner code. Everybody hope you like kit and there's some some links as well. Awesome. Thank you Bill great demo.

A

Oh hopefully that will encourage lots of folks to try out hooks.