How to Create Your First Lightning Web Component (LWC) in Salesforce

In plain words: Lightning Web Components (LWC) is Salesforce's modern framework for building fast, secure, and lightweight custom user interfaces. By using standard web technologies like HTML, CSS, and JavaScript, you can create interactive elements that sit right inside your Salesforce pages.

Building your first Lightning Web Component might seem intimidating, but it is actually a straightforward process once your environment is set up. In this tutorial, we will walk you through creating a simple "Hello World" component from scratch, writing the code, and deploying it so you can see it live in your Salesforce org.

Prerequisites

Before writing any code, ensure you have your developer tools ready to go:

1. A Salesforce Developer Edition Org: A free environment where you can safely test your code.
2. Visual Studio Code (VS Code): The industry-standard code editor.
3. Salesforce Extension Pack: Installed inside VS Code.
4. Salesforce CLI: The command-line tool used to connect your computer to Salesforce. Note: We will be using the modern sf commands rather than the legacy sfdx commands.

Step 1: Set Up the Development Project

To create an LWC, you first need a Salesforce DX project on your local machine to house your files.

Action: Open your terminal (or the integrated terminal in VS Code) and run the following command to create your project framework:

sf project generate -n MyLwcProject
cd MyLwcProject

Once inside the project folder, authorize your Salesforce org so VS Code can communicate with it:

sf org login web -a MyDevOrg

Step 2: Create the Component Files

Now, let's generate the actual component files. We will name our component helloWorld.

sf lightning generate component -n helloWorld -d force-app/main/default/lwc

This command creates a folder named helloWorld containing three essential files: the HTML template, the JavaScript controller, and the XML configuration file.

Step 3: Write the Component Logic & UI

Let's make our component interactive by adding a dynamic greeting and a button to change it.

1. Update the JavaScript File (helloWorld.js):

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    // Define a reactive property
    greeting = 'Hello, Lightning Web Components!'; 

    // Method to handle the button click
    handleClick() {
        this.greeting = 'Hello, LWC is awesome!'; 
    }
}

2. Update the HTML Template (helloWorld.html):

<template>
    <lightning-card title="My First LWC" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <!-- Display the JavaScript property -->
            <p class="slds-text-heading_medium">{greeting}</p>
            <br/>
            <!-- Button triggers the handleClick method -->
            <lightning-button label="Click Me" variant="brand" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>
</template>

Developer Trap: The XML Configuration File
If you try to drag your new component onto a Salesforce page right now, you won't find it! You must edit the helloWorld.js-meta.xml file. Change <isExposed>false</isExposed> to true, and add the specific targets (like Record Pages or Home Pages) where you want the component to be available.

3. Update the XML Configuration (helloWorld.js-meta.xml):

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

Step 4: Deploy the Component

With your code written and properly configured, it is time to push it up to your Salesforce org.

sf project deploy start

Wait for the terminal to confirm a successful deployment.

Step 5: View Your Component in Salesforce

Now for the exciting part—seeing your code in action!

1. Log into your Salesforce org.
2. Navigate to the Sales app and click on the Home tab (or any Record Page).
3. Click the Gear icon in the top right corner and select Edit Page to open the Lightning App Builder.
4. In the left-hand sidebar, scroll down to the Custom section. You should see your helloWorld component.
5. Drag and drop the component anywhere onto the page canvas.
6. Click Save and then Activate.

360 Card: The LWC Creation Lifecycle
1. Create the project (sf project generate).
2. Create the files (sf lightning generate component).
3. Write the JS, HTML, and update the XML.
4. Deploy to Salesforce (sf project deploy start).
5. Add via the Lightning App Builder.

Core Takeaway: LWC uses standard JavaScript syntax. By keeping your UI markup in HTML and your logic in JS, Salesforce makes it incredibly easy to build responsive, modern web components natively on the platform.

Conclusion

Congratulations! You have successfully built, deployed, and surfaced your very first Lightning Web Component. The helloWorld component demonstrates the core reactive nature of the framework—when you click the button, the JavaScript updates the variable, and the HTML instantly re-renders to show the new greeting. From here, you can start integrating Salesforce data using the Lightning Data Service and Apex to build truly powerful enterprise applications.

Happy coding!