Microsoft 365 Community Community Demos, 6 Jun 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Transforming your SharePoint Framework solutions to use React based implementation

Description

This community call demo is taken from the SharePoint Framework community call recording on 6th of June 2019. In this video, Hugo Bernier demonstrates the steps on transforming no-framework web part to use React based implementation.

Presenter - Hugo Bernier - @bernierh

Source code for the sample is available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-teams-tab-field-visit-mashup. You can also read more details around the solution from following blog post: https://tahoeninjas.blog/2019/04/19/converting-spfx-from-javascript-to-react/

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

Get to familiar on developing SharePoint Framework solutions using React and UI Fabric with following getting started tutorial - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components.

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

A

B

Those of you who are not familiar with what this demo is about, Eric and I- have got together. Eric had a good question and one of the previous calls, which was hey I've got a you know. I have a JavaScript web part and I would love to see detailed instructions on how to convert a JavaScript web part into a react web part. So that's what we did and it would you know if you've ever seen: Monty Python skit, where the scientists are building the world's funniest joke.

B

Where they're not allowed to see you know all parts of the joke, otherwise, they'll die because that's how funny the joke is that's kind of how we approach this presentation as well. You know Eric did his web part using just JavaScript and then I took his web part and I converted it to react. So since Eric is not here to present I'll show you what his whip read looks like well, it actually looks exactly like mine, but so hopefully you can see this wet part here which actually takes the github user name.

B

So, for example, if I put vaisseau here.

B

A

B

You know I, don't not like sharing my face, but.

B

You know the the article and the code are actually found in the SP dev effects web part samples, but there's a blog post, that's arguably too long, but the blog post actually walks you through every single step of creating the SPF X web part copying the code and making some conversions. Luckily, I'll save you the reading I will actually do that right now in front of you. So why would I take a web part and convert it to react and why wouldn't I use you know?

B

Angular are on lockout and honestly react does not necessarily any better than any of the other frameworks, but the one thing that we are getting with react. That's would be a bit more harder work if I was using. No framework is that you are getting a separation of duties, you're able to separate the components, the presentation component, the services that retrieve the data you're able to do that and- and you know it makes it obviously easier to test the other advantage that you're getting is instead of rendering the entire web part every time.

B

Any changes happen you're able to actually render smaller sections of the web part just by the way. These frameworks work, but probably the most important reason why you would use react is with react. You have the fabric, UI components, you have the pnp, reusable components which are readily available in react and, sadly knock out an angular don't get as much love when it comes to the fabric UI components.

B

So the only difference between the web part that Eric built versus my web part is I used a yeoman generator and at the end here, when it says which framework do you want to use, I chose react when Eric chose no framework, so this is kind of what the JavaScript your version of the web part right, looks like and by the way, you'll see at the bottom of very slides I'm, showing whether it's a JavaScript or the react component. So this is the JavaScript version.

B

The web part that gets generated, that's Eric's code, and you know the components are actually broken down into this I'll. Compare the two in a second, so I'm free to go really quickly. Here.

B

This is the version the react version of the web part and the components are broken down like this, but if you compare them side-by-side and hopefully I'm not going so fast that the skype is not able to keep up here, you'll see there's a few there's a few things that are different. But you know there's also a lot of commonalities between the JavaScript version, which is on the left and the react version which is on the right. First of all, it generates a webpart component.

B

It also generates the JSON manifest for both web parts and even renders Canada localized strings for both components where it's a little bit different is that in the JavaScript web part, all the code to render the body of the web part is inside the this webpart object here. But in the react version it actually creates a component which has kind of the the tsx file, which is responsible for rendering the body of the web part itself.

B

So if you look at the JavaScript version of the render code, you'll see here that it's actually, it's actually rendering the HTML inside inside the web part- and this is the HTML that we want to show in parallel.

B

If I show you the react version of this, the render code inside the web part itself is actually very simple, because all it's doing is it's saying, create call that by component that we saw earlier and pass it the information that we need, which is the username and the HTTP client, so we can make requests and Patrick convey. So if I'm going too fast, please let me know I know, there's a lot of stuff to get to cover today.

B

So this is the react version of the same rendering code, and you know what you'll notice is inside the component itself. I have the same code that renders the the HTML, but if I put the two side-by-side, this is the JavaScript version on the left and the react on the right, you'll notice. A few things. First of all, react is not happy with CSS the CSS word class, it once class name in comparison on the JavaScript side. It's using the word class here.

B

So when we want to pass the CSS class name, we have to use class name. The other thing that you'll notice is I'm actually populating the data by just passing a state object and just putting the values of the state objects directly in HTML. In parallel the the JavaScript version.

B

What it does is, it actually has ID for every elements and then later in the code, it actually finds the elements by ID and it populates the HTML of those IDs now because I'm using react, I'm also I also have access to the concept of State and I'll.

B

Show you the state how I use the state a bit later, but you'll notice here that I actually have I'm saying, if is loading, show the loading you know render some loading placeholder and if I'm, not loading, the and I have a user profile then show the user profile. The values is loading, and is user profile are coming from the state variables that I've created in react, and this is something that the react does actually really well for us.

B

So the other thing that I want to show here is that at the bottom of Eric's render code, we have get github data. However, in the react code, I'm not calling yet github data in the render method, I'm actually calling it in two places. One is the first time the component is mounted I call it github user data and if the properties of the web part are changed, so the username property is changed. I also recall get github data.

B

Everything else is actually handled a bit later by the gift github data method. If you look at the yet github method in Eric's JavaScript code he's basically doing what I was talking about earlier. He finds every single element by ID and then he, somewhere later here, he actually populates that code with the values that you retrieved from the JSON in comparison and the react version all I'm doing here is I'm actually calling my service that I've created to get the user profile now I didn't have to do that.

B

But one of the values again as I said of react, is that you can componentize your elements and so by creating a separate service, object that I. That has all the logic to call github and retrieve the data. It makes it a lot easier and, as you'll see later, if I want to change the look and feel of the web part, I I've really limited the amount of code and I have to change. So.

B

If I look at the what am I trying to show you here, the get at the github service, I'm really doing the same thing. That Eric was doing where I'm actually calling with this here, I'm, actually creating a URL and I'm calling with the HTTP client I'm calling the web service. But what you'll notice is when I receive the data? I receive it as a github user profile. Now, how do they create this class?

B

With this interface, I really went to postman I called the API I used the vases profile here, but I called the API I copied and pasted the JavaScript at the JSON that was returned and I used that in in a visual studio, called called page JSON is code and what it does it well, it does what it advertises.

B

It actually created a github user profile class in my code that has all the attributes I'm looking for so the great thing about that now is when I call, when I call the service I'm able to actually just take the the JSON, that's returned and cast it as a github user profile.

B

So in my state variable here and I'm almost done the state variable then really what I have is I have three things I have. Is it loading? What's my user profile and if there's any error messages show me those error messages.

B

If I go back to the get get hub data, then what I'm doing here is once I've received the user profile information I set the state here to contain the results, I've received and then I say: okay, I'm, no longer loading react automatically knows which parts of the of the page it needs to re-render, and that's what again we're showing you here so fine highlight again if I'm loading I'm, showing you a placeholder, if I'm, not loading I'm, actually using the same state data that I received in my user profile and I populated it, I'll just show you one last little thing so I showed you the web part here that I created I've actually submitted an update to the sample.

B

That's in the SPF X samples I created the second web part which actually is using the fabric UI and the pnp components to do a slightly different version. I. Couldn't I couldn't live with the look and feel of this web part. I was really not proud of the look and feel of that web part.

B

So what I did here is it's a version that uses the PNP component if I again, if I change the user here, you know do the same code that we did before, except that the the rendering of the web part is localized to that one tsx files that we we demonstrated. So there was a super quick review of the code again. This is the link to the code and link to the blog post, I'm sure David Warner will submit a summary of this call very shortly thanks everyone.

B

If there's any questions, I'll be looking on the skype chat window. Thank you.

A

Awesome thanks: you go a really cool demo. They're excited to see that and I think a great comparison between kind of doing stuff, with and without reactor are really kind of applicable to any other sort of framework. So you know very valuable demo and thank you very much for that and for sharing that with us.