Using Web Components in React

hi there in this video I'm going to show you how to use web components in your react project the application that we're going to build is a simple crud application with form for filling in first name and last name a button for adding and then we'll display the added people in a data grid the web components that we're going to use are from the Vaadin component set it's an open source Apache License set of components we're going to use the text field the button and the data grid here on the website you can get live examples and API documentation and we'll come back to this and in just a while to see how how to use the grid in this demo I'm going to use the create react app script for generating a project okay with the project created let's go into the directory before we start installing the web components we're gonna install a polyfill that enables web components to be used in older browsers as well these days most modern browsers already shipped with support for web components but it's always nice to be able to support older browsers as well so I will install the polyfills and vendor copy tool which will allow us to copy them over into our folder with those installed I'm gonna open this folder and my editor which is vs code and here we will start by defining the copying of the of the polyfills into our entire folder so here in the scripts will add one more script for post install and post install will be vendor copy and then we'll define the vendor copy down here so what we want to copy over the first thing we want to copy over is the custom elements es5 adapter for any browsers that don't support es6 or rather if you have transpiled your code into es5 and the second thing is this polyfill bundle okay so know that we have that in here the next time we run npm install those things will get copied over into our public vendor folder okay you can see that they are no in here you can go ahead and close this open up our index file and go ahead and use those so up and head I'm gonna add script so the first script that we load here is the web components polyfills bundle after that we load the custom elements es5 adapter if needed go ahead and close the index file and open up a terminal and run NPM start which should start our dev server okay we can see that our application has launched let's open up the dev tools here and go to the network tab refresh and just validate that the web components bundle did successfully get loaded alright so with the polyfills taken care of we are now ready to actually start using the components in order to use the components we need to install them first so we'll close the dev server here for a second and install the textfield the button and the grid through NPM okay those are installed let's go into our app J's here and we can go ahead and remove stuff that we're not going to use so I'll remove everything except for this outermost div here in order to make these components usable we first need to import them like that now we're ready to start using them here in our render method the first thing that we're going to create is a div with a class name form inside the forum we will create two text fields and a button for the text field we will define a label which will be the input prompt and a ref which will need in order to reference this element later on duplicate the line do the same thing for last name and then add a button and give this a riff so we can reference it later on okay so that takes care of the form the next thing that we want to add is the grid like for the other components we'll give this a ref so we can reference it and then we need to define how the column should map to our data so for that we can go back into the bank on website and look at one of the examples here the example is also deal with names so we're actually able to copy/paste these first two columns and what you'll see here is that the column has a path attribute that tells writing grid how to map between the objects that we bind here to the column so in our case we'll have two properties on our data object first name and last name like that now this is a little bit different from using normal react components because of the way how react deals with events and how it does data binding so we're not able to pass in data the same way as we would with normal react components so we're also not able to listen to events the same way that's why we had to add these references here and we'll take a look at how we can use those to hook up the functionality well implement the component did mount call back in here the first thing that I want to define is a list of people it will be an empty array first off then I'm gonna add a listener on the button for click events I'm able to get hold of that through this dot refs and there I can use the ref name that I defined up here so this dot refs Add button to add event listener we're listening for the click event and when somebody clicks on this what we want to do is essentially update the people array including a new person with the information from from these text fields so we'll call people equal to a new array with all the people from before and then a new object with first-name equal to list refs dot first name dot value and then the same thing for last name change that to last once we've updated the array what we want to do is bind that to the grid so this the rest grid dot items so items just the property that we want to set and we said that to the people array after that we can go ahead and clear out the first name and last name fields and just set the values to turn empty string okay then we'll start up the dev server again alright we can see our application is here the CSS looks a little wonky so let's fix that being the app CSS here essentially we can pretty much remove all of this and then what we'll put in is for the app we'll add a little bit of padding for pixels and then for the for the form or actually for any anything inside the form we'll add add some spacing so we'll do that with a margin right let's put that to four pixels as well we'll save that go back into our application looks a little bit nicer now alright so let's try this out mmm all right so it works partially cleared those out so it's probably something with the item binding yes so well supposed to be items not item so we'll update that try it again and yes now it works so that is how you use web components in a react project you can see that using components is a little bit different from using native react components because of how react deals with event handling and with data binding there's a good site called custom elements everywhere that lists all the kind of gotchas when using web components in react projects there's also a project called pre act which has much better support for web components and is has a react compatible API if you want to try that out alright thanks for watching

Channel: vaadinofficial

Views: 8,645

Rating: 5 out of 5

Keywords: webcomponents, customelements, react, tutorial

Id: 2B4rTQYJHL8

Length: 10min 47sec (647 seconds)

Published: Wed Dec 12 2018