Get Started with First Lightning Web Component
Here we will start with our very first component of LWC. Then, we will go through how we can dynamically change our value based on the input provided.
Let’s create our first lightning web component.
Steps to follow :
- Open the command palette by using the Ctrl+Shift+P(Windows)or Cmd+Shift+P(macOS).
- Type SFDX: Create Lightning Web Component. (Make sure that you have installed the Salesforce extension pack and Salesforce CLI).
- After which, it will ask you to enter the desired filename; here, I have given HelloWorld.
- Next, you have to select the location/directory where you want your file to be stored. So here we have taken the standard, you can create your custom directory by selecting the “Choose a Custom Directory.”
- It will create a subfolder named firstLwc with three additional files of html.js and metadata.
- You can also see the output tab of vs. code which shows a success message for creating these files.
Now It’s time to code.
First, refer to the code snippet below.
.html file
<template>
<lightning-card title="First Lightning Web Component">
<p class="slds-p-around_small">
<lightning-input
label="Enter your Name"
value={name}
onchange={getName}
></lightning-input>
<br />
Hey {name}, This is your first LWC Component.
</p>
</lightning-card>
</template>
- From the above code, it can be inferred that I have taken a lightning-card in which an input-field is present, the title and footer of the lightning card have static values.
Whenever a user enters something in the input field, it gets a dynamic value in the body text.
So the concept of populating a value dynamically is based on variable binding. Here we have stored the value entered by the user in the input field into a variable “name” defined in a javascript file. Second, we have called a method getName on the change of values in the input field.
The variables to get value dynamically are placed in curly brackets {}. It is to be noted that here only the name variable is dynamic rest has static value. - Whenever the value in input-field changes, it calls a method getName defined in javascript and passes the onchange event as the onchange handler is responsible for calling this method.
We have kept the name variable as ‘, ‘so by default, it(input-field) is blank but gets updated or changes whenever there is a change in the value.
Another important concept to be noted here is how we are fetching the value of the input-field. It is fetching using the target value of the event. Here our event is onchange so it takes the target value which is triggering this event and hence fetches the entered value and re-renders every time it is called.
.js file
import { LightningElement } from 'lwc';
export default class FirstLWC extends LightningElement {
name = '';
getName(event) {
this.name = event.target.value;
}
}
- To see this functioning, we can use the record page, app page, or homepage in target tags and then place the component going to the edit page section in the Salesforce org as we do for the aura component.
This snippet will be placed in the third file, which is of metadata.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="https://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
- The last step is to see what output we have, so we quickly deployed this component in our default org.
- Right Click on the HelloWorld folder and select SFDX: Deploy Source to Org.
- When successfully deployed it will show a success message like this in vsCode terminal.
- Now quickly switch to your Salesforce Org and place this component on the Home Page.
- Finally, you’ll be able to see value changing dynamically
