# Component Structure and Decorators

In this blog, we are going to see about the component structure and Decorators.

### Component Structure

To create LWC and make the best use of all the features, users must set up Salesforce DX. With the use of a few tools like Visual Studio  Code and the Salesforce Command Line Interface, programmers must first set up the developer environment.

Also, we have an online IDE and a chrome extension for building LWC.

**Chrome Extension:**

%[https://chrome.google.com/webstore/detail/lightning-studio/ehkpneicmpbdejpoancidgkejlkahjgo] 

Online IDE : [https://app.lwc.studio/](https://app.lwc.studio/)

The primary elements of an LWC are HTML and Javascript. CSS comes here as optional content.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678671112506/39928e82-0d95-4acf-a63b-03001e057383.svg align="center")

**HTML**

* It has a root tag called "template" that contains the HTML element.
    
* The `<template>` tag is changed to `<namespace-component-name>` during rendering.
    
    ```xml
    <template>
    	<div class="slds-p-around_x-large">
    		<h1 class="slds-text-heading_large">Example HTML Code</h1>
    	</div>
    </template>
    ```
    

**Javascript**

* To import the functions, developers can use the import statement.
    
* The export statement can be used to use functionality in a module.
    
* Lightning Element is a standard HTML element custom wrapper and can be extended.
    
    ```javascript
    import { LightningElement } from "lwc";
    
    export default class App extends LightningElement {
      
      title = "Welcome to Lightning Web Components!";
    
    }
    ```
    

**XML**

* The component's metadata configuration values are described in an XML file.
    
* To deploy components for different pages, like the App page, Record page, etc., developers can set a `<target>`.
    
    ```xml
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>54.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
            <target>lightning__RecordPage</target>
            <target>lightning__HomePage</target>
        </targets>
    </LightningComponentBundle>
    ```
    

**CSS**

* To style a component, use CSS.
    
* The style sheet is automatically applied
    

```css
h1 {
    color: rgb(0, 112, 210);
}
p {
    font-family: 'Salesforce Sans', Arial, sans-serif;
    color: rgb(62, 62, 60);
}
.app {
    background-color: #fafaf9;
    height: 100vh;
    overflow: scroll;
}
```

## Decorators

1. `@track`: This decorator is used to mark a property as reactive, meaning that if its value changes, the component's template will be re-rendered to reflect that change. When you define a property using `@track`, you are essentially telling the framework that it needs to monitor that property for changes so that it can update the component's view accordingly. For example:
    
    ```javascript
    import { LightningElement, track } from 'lwc';
    
    export default class MyComponent extends LightningElement {
        @track myProperty = 'initial value';
    
        handleClick() {
            this.myProperty = 'new value';
        }
    }
    ```
    
2. `@api`: This decorator is used to mark a property or method as public, meaning that it can be accessed and used by other components. When you define a property or method using `@api`, you are essentially creating a public interface for your component, which other components can use to interact with it. And the other use of this decorator is to define the props in the child. For example:
    
    ```javascript
    import { LightningElement, api } from 'lwc';
    
    export default class MyComponent extends LightningElement {
        @api message = 'Hello world';
    
        @api
        showMessage() {
            console.log(this.message);
        }
    }
    ```
    
3. `@wire`: In LWC, the `@wire` decorator is used to establish a data connection between a component and a wire adapter. A wire adapter is essentially code that retrieves data from a data source, such as an Apex controller or a Lightning Data Service. The `@wire` decorator takes care of the data retrieval and data synchronization, which means that the component will automatically update when the data changes.
    
    Here's an example of using the `@wire` decorator to retrieve data from an Apex controller:
    
    ```java
    public with sharing class AccountController {
        @AuraEnabled(cacheable=true)
        public static List<Account> getAccountList() {
            return [SELECT Id, Name, Type, Industry FROM Account];
        }
    }
    ```
    
    ```javascript
    import { LightningElement, wire } from 'lwc';
    import getAccountList from '@salesforce/apex/AccountController.getAccountList';
    
    export default class MyComponent extends LightningElement {
        @wire(getAccountList)
        accounts;
    }
    ```
    
    In this example, we have a component called `MyComponent` that retrieves a list of accounts using the `getAccountList` Apex method. We use the `@wire` decorator to establish the wire connection between the component and the Apex method. The resulting data is stored in a property called `accounts`.
    

**"I will be diving deeper into various topics related to Lightning Web Components in my upcoming blog posts. To stay up-to-date with my latest content, consider subscribing to my newsletter. By doing so, you will receive email notifications whenever I publish a new blog."**