How to Create and Deploy LWC Component in Salesforce?

In Salesforce, LWC (Lightning Web Components) is used to build UI components using web standards, such as HTML, JavaScript, and CSS.

In this Salesforce tutorial, I will explain the complete process of creating and deploying LWC Components in Salesforce from scratch.

Create an LWC Component in Salesforce

In this example, we will create a Calculator as a Lightning component using LWC. To do this, you need to install VS Code on your system and then set up your Salesforce org using VS Code.

After setting up the org with VS Code, follow the steps below.

1. Create an LWC component:

To create an LWC component, you can execute the code below in the command terminal.

sfdx force:lightning:component:create -n myLWCComponent -d force-app/main/default/lwc

In the above code, replace the “myLWCComponent” with the name of the component. In this example, I have labeled it ‘Calculator’.

Another way to create an LWC component is to right-click on the LWC folder in the sidebar and select SFDX: Create Lightning Web Component.

2. Add Code to the LWC Component:

As we create an LWC component, it will generate three files: .js, .html, and .xml files

Here, the HTML file defines the buttons and display of the calculator, while the JS file handles the logic, such as what happens when a button is clicked. The XML file will enable the calculator to be available in Salesforce, allowing you to use it on pages.

Now, open the .html file and enter the code below.

<template>
    <lightning-card title="LWC Calculator" icon-name="custom:custom63">
        <div class="slds-p-around_medium">
            
            <div class="slds-form-element">
                <lightning-input
                    type="text"
                    value={displayValue}
                    readonly
                    class="display"
                ></lightning-input>
            </div>
            
            <div class="slds-grid slds-wrap slds-gutters">
                <template for:each={buttons} for:item="button">
                    <div key={button.label} class="slds-p-top_x-large slds-p-right_large">
                        <lightning-button
                            label={button.label}
                            onclick={handleButtonClick}
                            data-value={button.value}
                            class="btn"
                        ></lightning-button>
                    </div>
                </template>
            </div>
        </div>
    </lightning-card>
</template>

In this code, we have designed the display and buttons for the calculator layout, utilizing Salesforce’s built-in components, such as <lightning-card> for styling and <lightning-button> for the buttons. 

To add padding between the buttons in the calculator, we have used the div tag:

<div key={button.label} class=”slds-p-top_x-large slds-p-right_large”>

3. Define the calculation logic in the JS file:

In this step, we will define the logic of the calculation and buttons, including what will happen when a specific button is clicked and the display is updated accordingly.

import { LightningElement, track } from 'lwc';

export default class Calculator extends LightningElement {
    @track displayValue = '0';
    firstOperand = null;
    operator = null;
    waitingForSecondOperand = false;

    buttons = [
        
         { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' },      
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
         { label: '7', value: '7' },
        { label: '8', value: '8' },
        { label: '9', value: '9' },
         { label: '0', value: '0' },
        { label: '*', value: '*' },
        { label: '/', value: '/' },
        { label: '-', value: '-' },
        { label: '.', value: '.' },
        { label: 'C', value: 'C' },
        { label: '=', value: '=' },
        { label: '+', value: '+' }
    ];

    handleButtonClick(event) {
        const { value } = event.target.dataset;

        if (value === 'C') {
            this.clear();
        } else if (value === '=') {
            this.calculate();
        } else if (['+', '-', '*', '/'].includes(value)) {
            this.handleOperator(value);
        } else {
            this.inputDigit(value);
        }
    }

    clear() {
        this.displayValue = '0';
        this.firstOperand = null;
        this.operator = null;
        this.waitingForSecondOperand = false;
    }

    inputDigit(digit) {
        if (this.waitingForSecondOperand) {
            this.displayValue = digit;
            this.waitingForSecondOperand = false;
        } else {
            this.displayValue = this.displayValue === '0' ? digit : this.displayValue + digit;
        }
    }

    hand