A React web part

- [Instructor] At the time of recording this course, I am on SharePoint Framework 1.4.1, and Microsoft is choosing to go down the route of using a Yeoman template, to allow you to create projects, and the Yeoman template that they have created supports currently, two frameworks. React and Knockout. So let's go ahead and look at the out-of-the-box behavior. Let's start with reactjs first. So I'm in this directory now, and I'm going to say yo @microsoft/sharepoint, and this basically starts the SharePoint Yeoman Generator. I'll just go with mostly the defaults. I'll choose to create a web part, so everything I'm talking about here, also applies to extensions. And here, instead of going with no JavaScript framework, I will choose to use React. Hit Enter. And this goes ahead and creates my project, and it runs npm install. So I'll wait for this npm install, and then we'll open the solution in vscode, and see what the solution looks like. Once the project is created, let's go ahead and open it in vscode, and examine the structure of this project. Now, let's dive into package.json to start with. And let's look through here. Now, this is where, how to put it lightly, I think some of the down sides of the Yeoman Generator-based approach start to show, but I'm trying to show you the out-of-the-box behavior. For instance here, you see that they have referenced the versions of React over here. And if I hover over this it says that the latest version is 16.2.0. Now if SharePoint Framework was the only thing you were worried about, and let's say that's the only thing you write in your company, this would be okay. But let's say that you are more of a React shop, looking to get into SharePoint Framework. And they have chosen to bundle this dependency in here. Will the latest version of React work in here? Well, yeah, theoretically yes, you can just update these versions, and run npm installer yarn, install again, and it should work. But remember that if you move off of these versions, you're taking things a little bit in your own hands. But that's just the reality of this, so that's one issue. The other thing that I see here, is that on line 16 and 17, they have put the types for React under dependencies. The problem with that is that when you bundle this application, it will include the types in the bundle version. You don't need to, you shouldn't be including the types. For that matter this web pack also. These things, they belong in devDependencies, not under dependencies. Because you don't want web pack to start bundling your, you know types, there's no value of providing types at run time. So once you have moved these over, what you should do is that you should go back here, and run npm prune && npm install, and that'll take care of this, or you can just run yarn install, but I'll mention one thing, that before you do this. If all you did was to move the types down here, then really you don't even need to run this command, because whether it's devDependencies, or normal dependencies, but your regular dependencies, they don't... You know it really doesn't make a difference, because they both go in node modules. The only place it makes a difference is what gets bundled, because web pack will ignore the devDependencies. Okay, that's a minor quibble. But let's see the generated code, the actual TypeScript code. So under the source folder you will see, that under HelloWorldWebPart.ts, let's make this a little bit bigger, they have chosen to import * as React from 'react'. And also ReactDOM. So one of the advantages of React, is that even though it's a very powerful framework, you can sort of instant (mumbles) React very, very easily using this line of code here, on line 21. It says React.createElement, and then HelloWorld, and so on, and so forth. So the advantage here, is that even though React is a fairly powerful framework, and you can choose to write all your code in just plain React code right, this tsx, and these are just regular React concepts. Begin able to bootstrap that code inside of a SharePoint Framework web part is very, very easy. So there, at this point basically, it's just a matter of knowing React. And if you can write React code, you're working inside the SharePoint Framework in (mumbles), and you can simply say gulp serve. And before this I've run gulp trust dev serve already, and the web part should launch in the local workbench. And you should be able to add it like this, and it behaves much like a regular SharePoint Framework Web Part. Well my point being, that this is typically how the React Project Template is stitched together, and from here on you can write SharePoint Framework code in React, and you know, take all the advantages of React itself. And this is how SharePoint Framework out-of-the-box provides you React integration.