Before creating the Lightning Web Component make sure you have completed the Salesforce DX environment setup and Salesforce DX project setup section.
Ctrl+Shift+P
on Windows or Cmd+Shift+P
on macOS.SFDX
and Select SFDX: Create Lightning Web Component.
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.
Enter
to accept the default force-app/main/default/lwc.
lwc
folder, you will see one new component with the name helloWorld
gets created.helloWorld
component. It has three fileshelloWorld.html
- This file contains your component HTMLEvery 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
html
,js
andmeta.xml
file is mandatory for any component. There are other optional files likecss
,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.
<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>
import { LightningElement, track } from "lwc";
export default class HelloWorld extends LightningElement {
@track greeting = "World";
changeHandler(event) {
this.greeting = event.target.value;
}
}
<?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>
Right-click
the default folder.SFDX: Deploy Source to Org
from the optionsstates: SFDX: Deploy Source to Org ... ended with exit code 0
. This means that the command ran successfully.Ctrl+Shift+P
on Windows or Cmd+Shift+P
on macOS.SFDX
and Select Select SFDX: Open Default Org
app launcher icon
it will open the App Launcher, then click Sales
.Sales
app is opened, Click the gear icon
shown in the top right corner, then click Edit Page
. It will open the Lightning App BuilderhelloWorld
Lightning web component from the list of custom components to the top of the Page Canvas and Click Save
.Activate
.Assign as Org Default
and then click Save
Save
again, then click Back
to return to the Home page.