Understanding Lightning web component 
Tags: salesforce, javascript, tutorial, lwc
Published: 2021-10-24 05:50:19

##   Component Folder
When we create a lwc component we basically get 3 files in component folder ``.js`` ``.xml`` ``.html`` but you can also include ``.css`` ``.svg`` files in your component as well by keeping same name and you can also include files with different name as well but if you use different name then you have to import them lwc will not include them directly.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wnikm86qry880vguwmw.png)

The folder and its files must follow these naming rules.

-   Must begin with a lowercase letter
-   Must contain only alphanumeric or underscore characters
-   Must be unique in the namespace
-   Can’t include whitespace
-   Can’t end with an underscore
-   Can’t contain two consecutive underscores
-   Can’t contain a hyphen (dash)

##  Component HTML File
Every UI component must have an HTML file with the root tag `<template>`. Without `<template>` tag it will throw error.
 ```html
<!-- myComponent.html -->
<template>
    <!-- Replace comment with component HTML -->
</template>
```
When a component renders, the `<template>` tag is replaced with the name of the component, `<namespace-component-name>`. For example, in the browser console, myComponent renders as `<c-my-component>`, where c is the default namespace.

##  Component JavaScript File
JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.

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.

A component’s JavaScript file can have a maximum file size of 128 KB (131,072 bytes).
Every 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 (library), the JavaScript file exports functionality for other components to use.

The JavaScript file follows the naming convention  <component>.js, such as  myComponent.js.

Every UI component must include a JavaScript file with at least this code.

 ```javascript
import { LightningElement } from 'lwc'; // `LightningElement` is a custom wrapper of the standard HTML element.
export default class MyComponent extends LightningElement {
// Your code here
}
```
When you run a module containing an `import` declaration in lwc js file , the modules it imports are loaded first.
**Here**:  The `import` statement imports `LightningElement` from the `lwc` module.
Extend `LightningElement` to create a JavaScript class for a Lightning web component. **_You can’t extend any other class to create a Lightning web component._**

The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. For  myComponent.js, the class name is  `MyComponent`.

The JavaScript file can contain:

-   The component’s public API via public properties and methods annotated with  `@api`.
-   Fields
-   Event handlers

UI component folders can include other JavaScript files in addition to the main  myComponent.js  file. However, the code in these files is for the component’s own use and can’t be shared.

## Component Configuration File
Every component must have a configuration file. The configuration file defines the metadata values for the component, including supported targets and the design configuration for Lightning App Builder and Experience Builder.
Here’s the simplest configuration file.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>
```
**Note :** You cannot deploy Lwc component without configuration file, if you do so you will get error.
```html
Cannot find Lightning Component Bundle <component_name>
```