 Hello everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate how you can create your first lightning web component. So jumping to the Visual Studio port. So in my previous video, I already demonstrated you how you can set up the Visual Studio port for Salesforce to build lightning web component. So in this video, I will be building a full lightning web component which will be having code in HTML, JavaScript, as well as in .xml. So here you can see we already have this demo LWC lightning web component created. So I'm just closing all these files which are opened here. And if you want to create new lightning web component, so just come here on LWC folder. It will be available under force-app slash main slash default. So just right click and select create lightning web component. So here you need to provide the name of your lightning web component and then you need to press the enter key. So I'm labeling it as first LWC and clicking on enter. So it is asking for the desired directory. So I'm again pressing enter so that default will be selected. And here you can see first LWC. This component is created. So JavaScript file is opened automatically. We have HTML file as well as we have meta.xml as well. So here inside this template, I will be implementing the code. So I created a div and inside this div is basically known for division. It is tag of HTML. So we are using it now. Again, I'm using a div. So inside this, I'm going to show name and then inside curly braces, I'm writing name, right? So here you can see this name will be displayed as is on the screen or on the browser and this name which is enclosed in curly braces. So this is basically an expression. So this expression is having this name as attribute or you can say property. So this property we will be declaring in the JavaScript file, right? Now, similarly, I am creating one more division which will be for company. So here I'm going to display name of company. So again, this company will display as is and the company which is enclosed in curly braces, it is a property that we will be defining in JavaScript. So one more div, then here I'm going to show designation and its value will come from designation property. Then one more div I'm creating and here I'm writing salary. And inside curly braces salary, right? So this way this HTML file is implemented, which is showing which will display name company designation salary these captions and whatever is available inside curly braces. So this is so these are properties that we need to define in JavaScript. Now I'm going to open the JavaScript file so that we can write the code there. So I am just before that you can just save it. So, for example, if you do some modification, so you will see this white circle. So if this white circle is available, it means your port is not saved. So if you just save your file, then you need to click on JavaScript file. So in JavaScript you can see LWC functional LWC module is by default imported and lightning element functionality is important. Then here name of classes first LWC because our lightning wrap component folder name is first LWC and it is extending this lightning element functionality. So inside this curly braces you just need to declare the properties. So, first time creating name. So, name equals to Sanjay, then I'm providing name of company tax school, then designation founder and salary. So I'm putting $10000. So this way, these four properties I have created and also remember like after each line you need to provide semicolon so that these lines will be separated. So name company designation salary these are the properties and these are having some values as well. Now, here also in JavaScript, you can see this white circle is available. So you just need to save this JavaScript file as you implement. And now I'm jumping to JS-meta.xml. So this meta.xml file is configuration file. So in this file, we just need to define like where this lightning wrap component will be used. So first of all, I need to convert this false into true so that if is exposed is true, then only your component can be used outside this VS code. And if I open this component and open this file, so I'm just copying this target. So what you can do if any of the component is already implemented in your VS code. So you can just use or you can just reuse the code which is available in the configuration file in newly created configuration files. So here I'm going to paste this code and I saved it. So this way, this newly created component I can use on home page or as well as record page. So all three files are saved. So this way, I hope you understood how I implemented HTML file, how I implemented JavaScript file and how I implemented this configuration file so that we can use this component outside VS code. So now let's understand how we can deploy this lightning wrap component to the org and how we can use it. So for this purpose, what you need to do, you just need to right click on this lightning wrap component folder. So if you right click on this folder, so you just need to click on deploy source to all. So it will deploy all three files together. So here you can see deployment started. And once it is deployed, so you will see this message. So first LWC dot HTML first LWC dot JS and JS meta dot XML three files are deployed successfully. So it is showing success message here. Right now what we can do we can jump to our org and I'm going to open sales application. So I'm on home page and on this homepage I'm going to drag and drop that component first so I just clicked on here I can and then select an added page. And if I go to left and scroll bottom scroll to bottom so here first LWC is available so I'm just going and dragging and dropping up it after assistant. Right. So here you can see some information is displayed. Now I'm just clicking on save, going back. So here is the result of our lightning wrap component. So we just provided the values manually in the JavaScript file. So those JavaScript property values are rendered here. Right. So if I take you again to the component. So in this component like we created these properties and these properties we used here inside curly basis. So this name company designation and salary are getting replaced and the values are coming from this JavaScript file. So in lightning web component whatever variables you want to create. So those variables you will be creating in JavaScript and those variables are known as property and those properties you can use with the help of this expression. So you just need to use curly basis and then you can put the name of your property. Right. Now I'm going to show you one more thing like how you can use lightning web component like base lightning web component. So here we enclosed it in there. Now I'm just moving it to back and this way I am commenting it out. So this way if you want to comment any particular statement in HTML so you can use this less than exclamation and to hyphen. And then to hyphen and greater than sign. Right. So whatever code is available in between this syntax so it will be a comment. Now here I'm going to use base lightning web component. So I'm using lightning hyphen badge label will be available from designation property and I'm closing it here. So it is closed automatically. So opening tag and closing tag both will be required and this lightning base label will be designation. Right. So this way you can use this base lightning web component in your LWC. Now I'm going to save it. So I just modified the HTML file JavaScript file is same. Right. I didn't change anything here. I'm not changing anything here as well. So what I need to do here I have two options either I can deploy the whole web component or I can just deploy this HTML file because I just changed this HTML file. So I'm right clicking on this file and clicking on deploy a source to or so this file will be deployed and then we can jump to the org and we can refresh the page. Right. So now if I come here so I'm going to refresh this page because component is already placed here. So I clicked on refresh. Now here you can see the change like here name company and this designation is showing in different way because we used lightning bass. So this way lightning bass is available and it is showing the designation on it. So this way you saw like how we can use predefined elements as well. Right. And because we are using diff so every statement is coming in different lines. So this is a small demonstration like how we can create our first lightning web component having HTML JavaScript and how we can configure our configuration file. Then to deploy a component from VS code to order how to place that component on home page. Right. So I hope you understood whatever I demonstrated here in upcoming videos I will be explaining some more difficult examples so that you get familiar with lightning web component.