 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. This is the very first video of Lightning Web Component series. In this video, I will be discussing about the introduction to Lightning Web Component. I'm creating a separate playlist for the videos related to Lightning Web Component on YouTube. So you can follow that playlist so that you can understand the different features of Lightning Web Component. Let's understand Lightning Web Component. So first of all, I'm going to discuss about the introduction. So basically Lightning Web Component is an implementation of the W3C's Web Component standard. So W3C is basically an organization which is worldwide web consortium. So Lightning Web Components are based on W3C's Web Component standard. It supports the part of the web components that works in the browser and we can add parts supported by Salesforce as well in Lightning Web Component. Now, what are the benefits of LWC? LWC means Lightning Web Component. So it is a common term. It uses modern JavaScript with ES6 plus, uses web standards to the Lightning Component framework with component development because developer has to use only HTML, CSS, and JavaScript. So with the help of HTML, CSS, and JavaScript, we need to build the complete Lightning Web Component. And if you want to interact with the Salesforce as objects, then we can implement Apex class and we can connect that Apex class with Lightning Web Component. But majorly, we need to focus on these three files, HTML, CSS, and JavaScript. Code performance using web standards boost performance because more features are executed natively by the browser instead of by a JS framework. So because of this reason, performance is increased if you use Lightning Web Components. More on LWC. So most of the code we write is standard JavaScript and HTML, along with CSS as well. So if you write most of the code with JavaScript and HTML, so if you want to find some solutions, so on web, there are common places where you can find the solutions for JavaScript and HTML. There are lots of communities available where some solutions of the problems are available. So you can go through with those. LWC is lightweight and delivers exceptional performance. We can utilize full encapsulation so component become more versatile. So these are more features of Lightning Web Component so that makes it more powerful as compared to Aura Component and nowadays it is more popular. And in real-time client projects, we need to implement Lightning Web Component in place of Aura Component. Now let's discuss about the files that we need to create if you are creating any Lightning Web Component. So you just have to create three simple files. One is HTML, which provides the structure of component. So whenever you load your component on the browser, so whatever you write in the HTML, so that will be rendered on the browser, then comes JS, which is JavaScript, so it defines the core business logic and event handling. So whatever logic you want to build, that will be executing on the client machine so that business logic you can implement in the JavaScript and if you have to implement any event handling, event handling means, for example, in HTML you have created a button and if you click on the button from the UI and if you want to perform certain operations, so that is basically known as event handling. So if you click on the button, so an event is generated and that generated event will be calling some function and that function you need to define in the JavaScript file. Then comes CSS. CSS stands for cascading style sheet, which provides look and feel to the component. So whatever styles or designing you want to apply to your component, so that related code you need to write in the CSS file. Now if you compare Aura and Lightning Web Component bundles, so here you can see the comparison. So in first column resources are available, then Aura files and then LWC files. So if you need to implement Aura component, so for markup we have test.cmp for controller, test.controller.js, for helper, test helper.js, for renderer, test renderer.js. So controller, helper and renderer, these are written in JavaScript. So if you know Aura component or if you have gone through Aura implementation already, then you can relate what is controller, helper and renderer. So these are written in JavaScript. Now if I compare markup, so in LWC we have test.html. Instead of test.cmp we need to implement test.html. Then controller, helper and renderer, all three files are combined together and you just need to implement one JavaScript file. So if you save your component with test name, so you can see HTML, JavaScript, CSS, all files will be having the same name. But in case of Aura, they have different notation like component will be having test.cmp name. Then controller, helper and renderer, these words will be added with tests so that you can uniquely represent those JavaScript files. If we write test.js, test.js for both controller and helper, so it will be difficult to distinguish them. So that is why this naming convention is used in Aura. Then if we go for CSS, so in Aura we will be using test.css and same in LWC as well. In Aura we have documentation file but in LWC we don't have that file. For design, we have test.design file in Aura and in LWC we have test.js-syphonemata.examl. So basically it decides like if you place any component on the page and if you want to retrieve some parameters. So in Aura basically we use test.design file. In LWC, this .examl file fulfills two purposes. One is if you want to retrieve some input from user while placing the component in terms of parameters so you can define that in .examl file. Second use is if you want to define like where we can place a component. So for example if you want to place your component on home page or app page or record page. So that thing you need to define in .examl file like on which place you want to place your component. So later in this video I will be discussing about .examl file then you will be able to understand or relate that thing. And last is svg file. So in Aura we have separate file for that test.svg but in case of LWC we can include it in HTML or like we can use static resource as well. So this is the brief comparison between Aura and LWC and in upcoming videos or detailed comparison I will be providing you so that you can just compare the features as well. So here we are just comparing the naming convention of the files like for which resource, which file we need to use but later on you will see like complete and detailed comparison as well. Now this is the first file that you need to implement in lightning wrap component. So it is basically HTML file. So it will begin with template markup and it will close with template markup and inside template you can write other HTML markups. So here you can see input is available which is having one attribute value then in curly braces we are using masses. So masses is basically a property. So if I compare it with Aura so in Aura basically we create attributes. So attributes are known as variables in Aura. Here in lightning wrap component you need to create properties. So properties are equivalence to variables or you can say attributes those we create in Aura. So this message is a variable. Technically we will be saying it as a property and in lightning wrap component whatever property you will be using so those you need to declare in JavaScript file. In Aura generally we create attributes in component markup file but in lightning wrap component you need to create all the properties in JavaScript and then you can use them in HTML and you just need to enclose them in curly braces you don't need to use any exclamation sign. So this is simple HTML point. So this I am showing you just for understanding purpose. Later on I will be in another videos I will be giving you the full demonstration with the help of VS code. So after this video or next video will be telling you like how we can set up VS code and how we can create our first lightning wrap component. So after this if I move forward so this is the brief layout of JavaScript file how it will look like. So in the first statement you can see we need to write import then in curly braces lightning element is written then from and then in single quotes LWC is written. Then in next line export default class mycom extends lightning element. So the second line lightning element is the same which we are importing in the first line and then here you can see we have a property declared masses equals to hello world. So in JavaScript like if you want to create any variable that is equivalent to property so you just need to write the name of that property you don't need to define any data type type is defined by the value that you are assigning into that property. So now I am going to explain you what is this lightning element so what is this LWC that we are using here. So in the next slide you will see the complete description. So the lightning wrap components uses modules so what is module like it is built-in modules were introduced in ECMA script 6. So module is basically to bundle code functionality and make it accessible to the JavaScript in your component file. So module is basically a bundle of code functionality that we can use in our JavaScript file. The core module for lightning wrap component is LWC. So you can say like the LWC if I go back so the single quotes LWC which is written after from it will be known as module and you need to begin the module with the import statement and specify the functionality of the module that your component uses. So the import statement indicates the JavaScript uses a lightning element functionality from the LWC module. So if I go back so lightning element which is enclosed in curly basis it is a functionality that we want to import and where this functionality is available so it is available in LWC module. So in every lightning wrap component this statement you need to use because this is the basic functionality lightning element is a basic functionality that you need to use. In the second line you can see we are extending it in our component. So here class name is my comp. So whenever you create any lightning wrap component so the name of component will be the name of class name automatically. And export default means like if you want to export this JavaScript file into any other lightning wrap component so you can use this keyword here and message is the property which is having hello world as a value. So this way I hope briefly you understood this but later on in another modules or videos I will be explaining these terminologies in detail so that you can understand. Okay so moving forward third is our CSS file. So here in our HTML you can see we are using input markup. So if you want to define a CSS for this input markup so how you will be writing it so you just need to write markup name input and in the curly basis you can write the complete CSS. So color colon green means that your input markup when it will be rendering on the UI so it will be having the color value as green. Then next is component configuration file so this is the file which is actually known so I am just moving back to that table which I explained you. So if you see the second last row which is related to design so in LWC file column we have test.js-matter.exe So this file is basically known as configuration file so if I go to the slide so here you can see this file is having different code and whenever you create your lightning wrap component this file is created automatically that also we will see when I will be practically demonstrating that thing so generally when this file is created automatically so it will be having the latest API version automatically is exposed will be false by default it means false represent your lightning wrap component cannot be used on any place like home page, app page, record page but if you want to use your lightning wrap component on any of the page or let's say experience builder site or lightning flow so anywhere wherever you want to use it so anyhow is exposed you need to set as true and then you need to define the targets so here you can see three targets are available first is home page, then record page and then app page so it means this lightning wrap component where this configuration file will be defined so that lightning wrap component can be used on home page as well as on record page and app page you can also use any one statement like if you want to place your lightning wrap component on home page only so you can just remove record page and app page statements so no worries you don't need to write all the lines together so it depends on the requirement wherever you want to place your component so we discussed about html file javascript file css file and configuration file so these are only four files that you need to manage while building your lightning wrap component and this is last point of this video so important to remember is like aura components can contain lightning wrap components whereas reverse is not possible lightning wrap components cannot contain aura components because lightning wrap components doesn't know anything about aura whereas aura can contain lightning wrap components because aura knows about salesforce related stuff and wrap standards so that is why it is possible but lightning wrap components cannot contain aura components so this you need to remember so this was a brief explanation about lightning wrap component in the introductory video later videos like in upcoming video I will tell you how we can set up VS port and other things so that we can create our first lightning component then I will tell you the difference between aura and lwc in detail and then the features related to lightning wrap component so do follow all the videos so that you can become zero to zero in lightning wrap component because in small videos I will be covering only one feature so it is easy for you to practice one topic every day because I will be uploading videos every day so you can just follow the playlist and just practice one feature every day and soon you will be having all the knowledge related to lightning wrap component thank you