Create first Salesforce Lightning Web Component

Configure your Salesforce Developer Experience (DX) environment in Visual Studio Code as demonstrated in previous article.

1. Open Visual Studio Code. Enter Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and start typing SFDX.

2. Click ‘SFDX: Create Lightning Web Component’. Don’t click ‘SFDX: Create Lightning Component’(Aura component).

3. Enter helloWorld1 for the name of the new component and Enter. It will create new lightning com[ponent in ‘lwc’ folder.

4. Replace code in ‘hellowWorld1.html’

<template>
<lightning-card title=”HelloWorld1" 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>

5. Replace code in ‘hellowWorld1.js’

import {
LightningElement
} from ‘lwc’;
export default class HelloWorld1 extends LightningElement {
greeting = ‘World!!’;
changeHandler(event) {
this.greeting = event.target.value;
}
}

6. Replace code in ‘hellowWorld1.js-meta.xml’

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

7. Save all the pages and right click on lwc and click on ‘SFDX: Deploy Source to Org’. If you get error you can see by doing trace as follows. Some time if component already exists you will get error.

$ sfdx force:source:deploy — sourcepath /Users/ABCD_USER/Desktop/Projects/SFDC_Projects/RMA_SFDC/TrailheadHelloWorld/force-app/main/default/lwc — json — loglevel trace

8. Open the Org by keys Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and start typing SFDX. Click ‘SFDX: Open Default Org’.

9. Open Sales Console from right side 9 dots.

10. Once Sales home page opens. Click Settings -> Edit

11. Let’s add new component in home page layout. Once you add as follows click on Save then Activation at right side.

12. Click ‘Back’ and see changes in Sales Home page.

Sales Home Page

Thank you for following.