How to create a web component in React

greetings friends welcome to a shot of code today we're going to create a web component using react now Before we jump in if you find yourself enjoying the video feel free to click that subscribe button below and whatever point to note is the size of the file created by one of these is quite big because it contains reacts so there's only going to be specific scenarios where you're really going to use this if you really want to make components then probably creating it with pre-act might be the way to go and I've got a video for that too here but it is interesting so carry on if you want to see how to do it anyway okay so I've got Visual Studio code here let's start and I'll create a an initial file here called my component j/s and we'll also create a a file index.html and we'll just put some boilerplate code in here import our script which is my component and initially what we'll do is we're just going to create a very simple counter component and we'll use it as a reactive component to start with before converting it to a web component so I because that will just have a div here that we can render it into alright so back to our component here what I'm going to do is kick off parcel which will just do our imports and it'll do our compilation for the JSX for us so I can import react from react and I can import react Dom react DOM and then we can create our component so we're going over my counter component here which will extend we have got component like so we're gonna need a constructor and we're gonna have some states it will have this state is an object switch as the counter which you have a count object in here then we're gonna simply render this out now what will we have let's just have a little header to start with saying react counter and then we can have a couple of buttons one for up and one for down there and then let's put out our counter so there'll be this dot state dot temp and then if we just make this bit smaller here and get rid of that for now can I make it a bit bigger just about then we just need to do rent Dom dots render and say that we want to render my counter and we want to render it into that's app element on the page of the create a second ago okay so it's installing our files for us we look in package JSON parcel has installed those two for us I can close that one back off and hopefully that will give us something to see there straightaway I bring this page up like that for okay so we're getting our react counter are two buttons and the current value obviously they don't do anything at the moment so let's just hook those up so let's have I don't click and we'll say that will call you function Inc like so you've similar on this one on click cools this dot dick okay I'll create those two those two methods we've got an increment method and in there we want to do it this dot set state and we can get the previous value passed in and then I'm gonna want to return a new object with the camp value set to breve plus one and let's do exactly the same comes to make this smaller so gonna see it all and we'll call that deck and save that off and then didn't quite work but by setting a state to an object's count previous previous dot count okay and that's going down is going yes down is obviously needs to be minus one and okay so that is our little basic counter and then at the moment is just a normal reactor converters now how do we convert it into a web component what we can do is import a navigable to react to web component and that is from the package react to web component that is going to wrap this for us so what we need to do is rather than do the render down here is we've got at the moment we can now go back to calling custom elements dot define so this is that a normal process for custom elements and we'll make our element my counter and in there we can then call this react to web components and pass in our component so my counter and we need to pass in react and react Dom as well but with that in place we should now have it as a component so at the moment when I save off we're not seeing anything here and that is because we were renting into here now we can just do my counter and save that off and we are back and if we look in the elements here we will see one thing is there's our custom element my counter one thing to know with this one in the moment it doesn't put it into the shadow Dom whoever they'll be an option in the future I'm not sure but a moment it's just there in plain HTML but it is a custom element metaphors and we can now use this elsewhere one thing to note is let's try and use the normal properties so we say give it a name in there and then try to view that name so let's do react counter and do this dot props dot name that you'd expect this to normally work but we're not getting out of them so there's an extra step we need here for that we need to bring in prop types from prop types we save that off and possible bring it in and then we need say my counter dot proper types and give that an object and then define our properties here that we're going to use so we need to say prop type string now that should set it up for us and when I save it you can see our property is now getting set in there you know if I update this you can see that coming in so an extra step there to get properties and attributes to work on your web component but the main thing is to use this react to web component to wrap it and then you can pass that wrapped object into the normal custom elements dot define call and there you go now I did mention the side of illing it's quite big the size of this I can show what we we do have if I do a parcel build for production of my component we can see we've got 132 K here you know can gzip that and it'll go down to about 40 K but I still huge if you've just grade a little oh calendar or button a rate whatever you component you've created that's too much so yeah I'm not quite sure needs to be smaller really like I say if you if you went to react and Priya you could use pre-act to create small or web components and I've got that video linked earlier over there you go creating a web components in react you can do it if you like this video give me a thumbs up thumbs Am's if not and feel free to subscribe as well thanks for watching see you next time bye [Music] you you

Channel: A shot of code

Views: 4,447

Rating: 4.9272728 out of 5

Keywords:

Id: PUGDzA1uP-Y

Length: 10min 49sec (649 seconds)

Published: Sun Mar 01 2020