Project: Build a Hello Salesforce Component

A simple "Hello Salesforce" component: it displays a greeting, and a button that toggles a welcome message. Small enough to be a genuine first project, substantial enough to touch templating, a JavaScript property, and an event handler — the same fundamental loop every component in this course builds on.

All four files below live together in one folder, sharing the same name as the component itself (helloSalesforce):

• .html — the template
• .js — the JavaScript class
• .js-meta.xml — configuration and exposure
• .css — optional styling

Module 4's "Anatomy of a Component" covers this file set in full depth — this project is your first hands-on look.

<template>
    <lightning-card title="Hello Salesforce" icon-name="custom:custom63">
        <div class="slds-p-horizontal_small">
            <p>Hello, {greeting}!</p>
            <lightning-button
                label="Toggle Welcome Message"
                onclick={handleToggleWelcome}>
            </lightning-button>
            <template if:true={showWelcome}>
                <p class="slds-m-top_small">Welcome to Lightning Web Components!</p>
            </template>
        </div>
    </lightning-card>
</template>

lightning-card and lightning-button are Salesforce's own base components — free, pre-built, SLDS-styled building blocks (covered properly starting Module 4). {greeting} binds to a JavaScript property of the same name. if:true={showWelcome} conditionally renders the inner <template> block only when showWelcome is true.

import { LightningElement } from 'lwc';

export default class HelloSalesforce extends LightningElement {
    greeting = 'Salesforce Developer';
    showWelcome = false;

    handleToggleWelcome() {
        this.showWelcome = !this.showWelcome;
    }
}

Every LWC's JavaScript file exports a single class that extends LightningElement — the base class every Lightning Web Component inherits from. Plain class fields (greeting, showWelcome) automatically become reactive properties the template can read and re-render against when they change.

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

isExposed set to true is what allows this component to be added to a page from Lightning App Builder at all — without it, the component deploys successfully but never appears as an option for admins.

With Salesforce CLI set up (Module 2 covers this fully), deploying is a single command:

sf project deploy start --source-dir force-app/main/default/lwc/helloSalesforce

Then, in Setup, open any Lightning page in App Builder, and helloSalesforce appears in the Custom Components list, ready to drag onto the page.