 Hello everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I am going to explain about lightning web component bundle. So let's start with lightning web component bundle. So first of all, I'm going to explain what is lightning web component folder. So basically, LWC folder is nothing. It is actually a collection of files, which is known as a component. So to create a component, first we create a folder that bundles your components files, right? So if I take you to Visual Studio Code, so here you can see under this LWC folder, I have created this demo LWC folder and under this folder we have HTML file, we have JavaScript file, we have XML file, right? So collection of these files are available under this demo LWC. So this demo LWC can be called as lightning web component or you can say it as LWC folder. So the folder and its files must have the same name, including capitalization and underscore, right? So here you can see folder name is demo LWC, so HTML, JavaScript and .xml file. All files are having the same name. So if you create any component with my component name, so this way files will be available. Whenever we create any component, so .html.js and .xml files are created automatically. But later on if you want to create .css and .svg file, so these you need to create manually. So if I take you to Visual Studio Code again, so here you can see three files are available. Now if you want to create new file, so you can just right click and click on new file. So here you can see we can create demo LWC.css. So this way one more file is added to this folder, right? Now let's talk about LWC folder and file rules. So the folder and its files must follow these naming rules. So must begin with a lowercase letter, must contain only alphanumeric or underscore characters, must be unique in the namespace, cannot include white space, cannot end with an underscore, cannot contain two consecutive underscores, cannot contain a hyphen, right? So these are the rules that you need to follow while creating LWC folder, right? So if you follow all these rules, then your LWC folder will be created successfully, otherwise there will be an error. Moving forward, if you are working with lightning web components, so you need to understand the difference between camel case and kebab case notation, right? So lightning web components match web standards wherever possible. The HTML standard requires that custom element names contains a hyphen. Since all lightning web components have a namespace that's separated from the folder name by a hyphen, components names meet the HTML standard, right? So let's understand it with the help of an example. So in lightning web component, if you're using any component, it can be any predefined component or it can be any custom component. So by default, component folders are available under C namespace, right? So if you have any folder named as widget, so that you need to write like this C hyphen and then widget. So this is the way you need to write or you can use any component in your lightning web component. So this is basically known as kebab case. If you use hyphen, so it is kebab case. If you don't use hyphen and without space, like if you use your folder name, so it will be known as camel case. So in this slide, you will be understanding the difference clearly. So however, the Salesforce platform doesn't allow hyphens in the component folder or file names. So it means like whenever you create any folder or any component, so hyphens are not allowed. So you can see here, like we created demo LWC, so hyphens are not allowed. What if a component's name has more than one word, like my component? You cannot name the folder and files like this my hyphen component. So it is illegal as we discussed in previous slides, like in folder name, we cannot use hyphen, but we do have a handy solution. So you can use camel case to name your component. So you can name it like my and component C capital. So first word will be small and second word onwards. First letter of each word will be capital. So this is camel case. So camel case component folder names map to kebab case. So kebab case basically has this hyphen in markup. So in markup to reference a component with a folder name my component. So this my component is a camel case, which you will be using while creating the component. So this is an example. Your component name can be anything if it is having multiple words. So second word onwards, first letter should be capital and when you will be using that component. So let's say you created two lightning web component and one lightning component you are using into another one. So this way you will be referencing it like see then hyphen then my hyphen component. So if only one word is there, so see hyphen that word. If you if your component folder is having multiple words. So each word will be separated with this hyphen. So this notation is known as kebab case. So now I hope you understood the difference between camel case and kebab case. So again, when you will be creating your lightning web component. So its folder name will be following the camel case. And when you will be using that component into any other components. So in that case, you will be using the kebab case notation. So in upcoming videos when I will be demonstrating parent and child components together in a single scenario. So then I will be explaining this scenario again like how we will be using camel case for naming the component and how we will be using the kebab case to use that component into another component. Now let's understand another thing of lightning web component that is HTML file. Right now we discussed about folder name. Now we need to discuss about HTML file. So HTML file you can see like it is available here and by default it will be created and by default it will be having this template tag open and close and in between you can write your HTML board. So every UI component must have an HTML file with the root tag that is template it will be available by default service components like libraries don't require an HTML file. So it can also possible like you are creating a lightning web component where you are just creating some functions in the JavaScript file. So in that case HTML file won't be required so it can be blank or if it is not available and then also it will be fine because anyhow that components JavaScript you will be importing into another lightning web components. So HTML file won't be required there. So it is an option. If you need UI then HTML file should be required. So HTML file follows the naming convention component dot HTML so component name and then dot HTML. So here in this case component name is demo LWC and HTML file name is demo LWC dot HTML right such as my component dot HTML. So we are taking example of my component like in previous topic I explained you like if we create a LWC folder so we used my component as an example so its HTML file will be my component dot HTML. Then create the HTML for a lightning web component declaratively within the template tag. So HTML template element contains your components HTML so this is the example like if you have my component dot HTML so inside template tag you can write your components HTML. If you move forward so when a component renders the template tag is replaced with the name of the component like namespace hyphen component hyphen name. So for example in the browser console my component renders as C hyphen my hyphen component where C is the default namespace. The HTML specification mandates that tags for custom elements components aren't self closing. In other words custom elements must include separate closing type. For example if your component name is to do item so its opening tab will be C hyphen to do item and it should be closed like this slash C hyphen to do set iPhone item. Right so if you open the tag then anyhow you need to close it as well. Now next is lightning web components JavaScript file so let's understand this file behavior. The component must have a JavaScript file if the component renders UI the JavaScript file defines the HTML element. If the component is a service component the JavaScript file exports functionality for other component to use right so if you want to create a library so what you can do in your JavaScript file you can create some functions and you can export that JavaScript so that other lightning web components can import that and those components can reuse the functionality that is defined in the service component or you can save the library. Then JavaScript files and lightning web components are ES6 modules by default everything declared in a module is local it's scoped to the module. Right so if you want to use those functionalities so you need to import that module and then you will be able to use that. So to import a class function or variable declared in a module use the import statement to allow other code to use a class function or variable declared in a module use the export statement. The JavaScript file follows the naming convention so components folder name.js like my component.js right so this is the example which with which you will be able to understand it. So if you want to import any module so here LWC is a module and we are importing lightning element functionality that is available in this LWC module. And then you can see in JavaScript file this class will be implemented so class name will be similar to your components name it will be used automatically because your JavaScript file will be created automatically. So if I take you here and open the JavaScript file so you can see here class name is demo LWC it is similar to our components name and it is mentioned as export. So whatever code you will write inside this class so this code you can import in any other lightning web component. So we can import code from other components as well as we can export code to other components and these components which will be exporting functionalities so they can be treated as service components. Right so the core module in lightning web components is LWC which is required for each lightning web component to be imported. The import statement imports lightning element from the LWC module lightning element is a custom wrapper of the standard HTML element extend lightning element to create a JavaScript class for a lightning web component. You cannot extend any other class to create a lightning web component so if I go back so here you can see we are extending this lightning element functionality that we imported from LWC module. So it is must if you don't do this so your lightning web component won't be working properly. So the JavaScript file can contain these things as well so we can have the components public API via public properties and methods are noted with at the rate API. We can have fields or you can say properties then we can have event handlers. So in HTML if you have used any component for example you have implemented a button and on click off the button if you want to perform certain operations. So those operations will be performed by event handlers. So those event handlers you can define in your JavaScript file. Let's understand about configuration file available in lightning web component. So this configuration file is basically this.js-meta.examl so this is a configuration file which decides whether you can use your lightning web component outside as or not. Like if it is true it means it can be exposed to the org otherwise not and you need to define the targets where we can use it. So let's understand it theoretically first. So the configuration file defines the metadata values for the component including supported targets and the design configuration for lightning app builder and experience builder. So here metadata values means like API names where we can use this lightning web component. So it is basically it can be having two things supported targets or design configuration. So supported targets means where we can place our component. So for example here you can see we have lightning homepage and lightning record page. So these are supported targets and when you place your component on any page with the help of lightning app builder. Or maybe you are placing your component in the experience builder site. So if you want to provide some input to that component while placing it on the page so that we can do with the help of design configuration. So design configuration we will be understanding in later videos and targets as well. I will be explaining these things separately with the proper example so that you can understand. So every component must have a configuration file. It is necessary. If configuration file is not there it means your lightning component will be there but you cannot place it on like lightning app builder or experience builder site. So it is required. The configuration file follows the naming convention. So component name.js-mata.examl. So as you create your lightning web component so this file will be created automatically. So you need to include the configuration file in your components project folder and push it to your org along with the other component files. So here you can see we have CSS, HTML, JavaScript and .xml file. So when you do some modifications in any of the file. So generally what we can do we can just push this lightning web component to the org so you can right click and just select this option deploy source to org. So with the help of this option your updated component will be deployed to the org. And if you have defined something in your configuration file accordingly you will be able to utilize your lightning web component in your Salesforce org. So this is the example which I already explained. So is exposed should be true if you want to use your lightning web component in Salesforce org. And these are the targets home page, record page, app page and all three are mentioned here. It depends on you which one you want to use if you want to place your component on all three pages you can use. Otherwise you can remove anyone which is not required. This is another example like if you are placing your component on the record page and then on the record page you want to place it on the specific object only like if you if you place on account record page then it is allowed for other objects it is not allowed so you can specify the objects as well. So this also we will be discussing in detail later on. Let's understand the CSS file of lightning web component. So a component can include a CSS file use standard CSS syntax to style lightning web component. And as per the web standards whatever the syntax available to use CSS you can use those same syntax in lightning web components to style a component create a style sheet in the component bundle with the same name as the component. So if the component is called my component so style sheet will be named as my component dot CSS the style sheet is applied automatically if it is available. So here you can see like here demo LWC dot CSS file is available. If it is not available in your component so you can right click on your component and with the help of new file you will be able to create it. And this way you can write the code like here this style will apply on the H1 tag. So this way for any particular markup you can put the CSS. Now let's understand the SVG icon file of lightning web component. So a component can include an SVG resource to use as a custom icon in lightning app builder and experience builder site. So to include an SVG resource as a custom icon for your component add it to your components folder. It must be named as like component and dot SVG. The component is called my component. So the SVG is my component dot SVG. You can only have one SVG for per folder. So here you will be right clicking and then you need to create that files and then inside that file you will be able to create. You will be able to write the code so that your file will be available and it will be used. Now we need to understand how we can create additional JavaScript files. So if we take a look on this slide. So here you can see a hierarchy is available where HTML file is available. JavaScript file is available dot XML file is available dot CSS file is available and we have two more files which are some utils.js and some more utils.js. So I discussed in previously like we can export JavaScript functionality and we can use them into another lightning web components. So a components folder can contain other JavaScript files. Use these JavaScript files to structure code in UI components and share code from service components. These additional JavaScript files must be ES6 modules and must have names that are unique within the components folder. So these names should be unique so that we can use them in same component or in other components as well. So export functions and variables in the JavaScript file so that so they can be imported by the components main JavaScript file. So if I take you to the next slide so here you can see how we can import the functionality of additional JavaScript files. So if you have a lightning web component where apart from your main JavaScript file if you have other JavaScript files like here some utils.js and if you want to import the functionality that is implemented in that JavaScript file. So what you can do you can write in single quotes dot slash and then some utils and here you need to mention the functionality name and it will be imported. And when you will be defining this some utils so you just need to use this export in that file so that you can import it in this JavaScript file. And if you want to import that JavaScript functionality into another lightning web component so you can write C slash and then some utils. So this name should be unique if you want to import like so if I go back so here you can see some utils and some more utils these two JavaScript files are available and these are having the unique names. Okay, but if you want to use this file into other components so make sure like in two same components like in two different components same additional JavaScript files are not available with the same name otherwise it will be a conflict. Let's understand about a namespace of lightning web components so to refer your own components always code with the default namespace that is C you see regardless of where the code is running in an org with or without a namespace in a managed or managed package. So here an example is mentioned. So it like you just need to understand it on high level perspective because this is the beginning part of the course so here you just need to understand like contact tile is a component and we are using that component into another component right. So you need to write C hyphen then contact tile and then other attributes and then it is closed as well so it is beginning here and then it is closed here right so if you begin any component like this so you need to end it here as well. Right so this way whenever you want to use any lightning web component into another lightning web component so you need to write the namespace see and then the name of the component and if name of the component is having multiple words so you need to use hyphen in between that is. kebab case that we discussed earlier. So here also you can see if you want to import any JavaScript file that you implemented as a library so there also you need to use this namespace C slash and name of the JavaScript file. Right so this is all about lightning web component bundle so I tried to explain different different files and their rules and what things you can implement in particular file.