Build Your First Lightning Web Component (LWC) in Salesforce: Step-by-Step Guide

In plain words: Lightning Web Components (LWC) is Salesforce's modern UI development framework built on standard web technologies like HTML5, CSS, and modern JavaScript (ES6+). Instead of using legacy proprietary syntax, LWC runs natively in the browser, making components faster, lightweight, and easy to build.

Salesforce development has shifted entirely toward standard web development practices with Lightning Web Components. Unlike legacy Aura components or Visualforce pages, LWC leverages native browser capabilities, Shadow DOM encapsulation, and reusable web components. This guide walks you through building, configuring, deploying, and rendering your first LWC component from scratch.

1. Development Environment Prerequisites

To build and deploy Lightning Web Components, you need standard developer tooling set up on your machine:

• Salesforce Developer Edition Org: A free developer environment to test and run your components.
• Visual Studio Code: The recommended IDE for Salesforce development.
• Salesforce Extension Pack (Expanded): Provides code completion, debugging, and deploy commands inside VS Code.
• Salesforce CLI (sf): The command-line interface used to connect orgs and deploy source code.

2. Anatomy of an LWC Component Bundle

Every Lightning Web Component lives in a folder inside force-app/main/default/lwc/ and contains at least three core files sharing the exact same base name:

360 LWC Architecture Card:

• HTML Template (helloWorld.html): Defines the UI markup, layouts, and data bindings inside standard <template> tags.
• JavaScript Controller (helloWorld.js): Contains the component's state, event handlers, lifecycle hooks, and business logic.
• Configuration XML (helloWorld.js-meta.xml): Metadata file declaring where the component can be placed (App, Home, or Record pages) and exposing design parameters.
• Component CSS (helloWorld.css, Optional): Custom styles scoped exclusively to this component via Shadow DOM encapsulation.

3. Step-by-Step Code Walkthrough

Step 1: Generate the Component via VS Code
Open VS Code, press Ctrl+Shift+P (or Cmd+Shift+P on macOS), type SFDX: Create Lightning Web Component, name it helloWorld, and press Enter to save it to the default LWC directory.

Step 2: Component HTML Markup (helloWorld.html)
Using base Lightning components (<lightning-card>) and dynamic JavaScript property binding:

<template>
    <lightning-card title="Hello World" icon-name="custom:custom14" class="slds-m-around_medium">
        <div class="slds-p-around_medium">
            <p class="slds-text-heading_small slds-m-bottom_small">
                {greeting}, <strong>{userName}</strong>!
            </p>
            <lightning-input 
                label="Enter Your Name" 
                value={userName} 
                onchange={handleNameChange}>
            </lightning-input>
        </div>
    </lightning-card>
</template>

Step 3: Component JavaScript Logic (helloWorld.js)
Declaring reactive properties and event handlers by extending LightningElement:

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'Welcome to Salesforce Lightning Web Components';
    userName = 'Developer';

    handleNameChange(event) {
        this.userName = event.target.value;
    }
}

Step 4: Component Configuration XML (helloWorld.js-meta.xml)
Exposing the component to Lightning App Builder across Home, Record, and App pages:

<?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>

4. Deploying & Adding to a Lightning Page

Step-by-Step Deployment & Placement:

1. Deploy to Target Org: Right-click the helloWorld component folder in VS Code and select SFDX: Deploy Source to Org (or run sf project deploy start in terminal).
2. Open Lightning App Builder: In your Salesforce org, navigate to any Home, App, or Record page (e.g., an Account record). Click the Setup Gear Icon > Edit Page.
3. Drag and Drop: Find helloWorld in the Custom Components panel on the left and drag it onto your page layout.
4. Save & Activate: Click Save, activate the page if prompted, and navigate back to test the live reactive input.

5. Common Traps & Core Best Practices

Developer Trap: Forgetting <isExposed>true</isExposed>
If <isExposed> is set to false in your metadata XML, your component will deploy successfully but will never appear in Lightning App Builder or Experience Builder palettes. Always set <isExposed>true</isExposed> and specify explicit <targets>.

Core Takeaway: LWC follows modern standard web standards. Use camelCase for JavaScript properties and kebab-case when referencing custom child components in HTML (e.g., class MyCustomCard becomes tag <c-my-custom-card>).

• Leverage SLDS Design Tokens: Always use standard utility classes (such as slds-m-around_medium and slds-p-around_medium) rather than writing custom margin and padding CSS.
• Reactivity by Default: All component class fields are reactive by default. When a field value changes, the template re-renders automatically without needing legacy @track decorators for primitive types.
• Clean Case Matching: File names and folder names must match exactly in lowerCamelCase.

Summary

Building your first Lightning Web Component is the entry point to modern Salesforce frontend development. By combining clean HTML templates, reactive JavaScript controllers, and metadata targets, you can create fast, reusable UI components that integrate seamlessly across the Salesforce Lightning Experience.