Hello World using LWC

1. Create Lightning Web Component

1️⃣ In VS Code, open the Command Palette by pressing Ctrl + Shift + P on Windows.
2️⃣ Type SFDX and select SFDX: Create Lightning Web Component.
3️⃣ Type helloWorldCMP as the name of the new component and press Enter.
4️⃣ Press Enter again to accept the default directory path: force-app/main/default/lwc.

2. helloWorldCMP.html

Add the following code into the HTML file:

<template>
  <lightning-card title="First LWC" icon-name="custom:custom14">
    <p>Hello World!!</p>
    <p>Welcome {name}..</p>
  </lightning-card>
</template>

1. <template>: Root element of an LWC component’s HTML template.
2. <lightning-card>: Lightning Base Component providing a styled card interface.
3. <p>Hello World!!</p>: Displays “Hello World!!” inside the card.
4. <p>Welcome {name}..</p>: Binds to the JavaScript property name.

3. helloWorldCMP.js

Add the following code into the JS file:

import { LightningElement } from 'lwc';

export default class HelloWorldCMP extends LightningElement {
  name = 'Teja Adusumilli';
}

1. import { LightningElement } from 'lwc'; — imports the base class for Lightning Web Components.
2. Extending LightningElement provides component behavior and properties.
3. name = 'teja Adusumilli'; — defines a class property accessible in HTML via {name}.

4. helloWorldCMP.js-meta.xml

Add the following code into the XML file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>59.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

1. <isExposed>true</isExposed>: Makes the component usable in Lightning pages.
2. <target>lightning__AppPage</target>: Allows use on Lightning App Pages.
3. <target>lightning__RecordPage</target>: Enables on record pages.
4. <target>lightning__HomePage</target>: Enables on home pages.

5. Deploy Component to Org

1️⃣ Right-click the helloWorldCMP folder.
2️⃣ Click SFDX: Deploy Source to Org.

✅ If deployment is successful, the terminal will show “SFDX: Deploy Source to Org” with details.

6. Add Component to Sales App

1️⃣ Open the Sales App, click the gear icon → Edit Page.
2️⃣ Drag helloWorld component to the top of the page canvas.
3️⃣ Click Activate.
4️⃣ Choose Assign as Org Default → Click Save.
5️⃣ Click Save again and return to the Home page.

7. Final Output

Once activation is complete, refresh the page.

🎉 Congratulations! You've successfully created your first Lightning Web Component (LWC)!