Hello world using LWC

Before creating the Lightning Web Component make sure you have completed the Salesforce DX environment setup and Salesforce DX project setup section.

Create a Lightning Web Component

  1. In VS Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX and Select SFDX: Create Lightning Web Component.

fig: VS code Create LWC
fig: VS code Create LWC

  1. Type helloWorld as the name of the new component and press Enter.

    Always use the first letter as lowercase, While naming LWC components. We use the camel case name to the component i.e., helloWorld.

  2. Again, Press Enter to accept the default force-app/main/default/lwc.
  3. Goto your lwc folder, you will see one new component with the name helloWorld gets created.

fig: Hello world component
fig: Hello world component

  1. If you see the helloWorld component. It has three files
  2. helloWorld.html - This file contains your component HTML

Every UI Component must have an HTML file with the root tag <template>

  • helloWorld.js - This file defines our component and helps to bind the data to the UI.

    The class name should always be Pascal Case i.e., the first letter of each word is capitalized

  • helloWorld.js-meta.xml - This configuration file defines the metadata values for the component. Also, we specify which type of lightning page this component can be added.

html, js and meta.xml file is mandatory for any component. There are other optional files like css, extra js file test file, SVG icon you can add to the component based on your requirement

Add the following code to the corresponding file of your project. Don't worry will learn the meaning of each and everything going forward.

helloWorld.html
<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
        label="Name"
        value={greeting}
        onchange={changeHandler}
      ></lightning-input>
    </div>
  </lightning-card>
</template>
helloWorld.js
import { LightningElement, track } from "lwc";
export default class HelloWorld extends LightningElement {
  @track greeting = "World";
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}
helloWorld.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http:/soap.sforce.com/2006/04/metadata" fqn="helloWorld">
        <apiVersion>46.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
            <target>lightning__RecordPage</target>
            <target>lightning__HomePage</target>
          </targets>
</LightningComponentBundle>

Deploy helloWorld component to Org

  1. Right-click the default folder.
  2. Click SFDX: Deploy Source to Org from the options

fig: Right click Deploy
fig: Right click Deploy

  1. In the Output tab of the integrated terminal, view the results of your deployment. You should have also received a notice that states: SFDX: Deploy Source to Org ... ended with exit code 0. This means that the command ran successfully.

fig: Successfull Deploy
fig: Successfull Deploy

Add Component to Sales App in Lightning Experience

  1. In VS Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  2. Type SFDX and Select Select SFDX: Open Default Org
  3. Click the app launcher icon it will open the App Launcher, then click Sales.
  4. Once Sales app is opened, Click the gear icon shown in the top right corner, then click Edit Page. It will open the Lightning App Builder
  5. Drag the helloWorld Lightning web component from the list of custom components to the top of the Page Canvas and Click Save.

fig: Placing component in the Builder
fig: Placing component in the Builder

  1. Click Activate.
  2. Click Assign as Org Default and then click Save
  3. Click Save again, then click Back to return to the Home page.
  4. Refresh the page to view your new component.

fig: Final Output
fig: Final Output

  1. Hurray!! You've finally made your first Lightning web component!
Site developed by Nikhil Karkra © 2023 | Icons made by Freepik