Create Your First Lightning Web Component – HelloWorld App
Objective
A. Create a basic Lightning Web Component
B. Deploy to Scratch Org
In this Unit, we will be creating a simple helloworld app and will be deploying it to scratch org.
A: Create a basic Lightning Web Component
1. Open Visual Studio Code.
2. Press CTRL+SHIFT+P
(Windows), Command+Shift+P
(Mac) and then enter SFDX: Create Lightning Web Component.
3. It will ask for the desired directory, Just press enter
4. Then enter your Lightning Web Component Name. Please use camelCase for Lightning Web Components.It’s the best practice.
5. Let’s see your Lightning Web Component under “lwc” folder.
LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file as shown in the below image and these files are created once we create a Lightning web component.
Code :
Now, Lightning Web Component created. Let’s see how to use Lightning Web Component.
HTML Code:helloWorld.html
Hello, {greeting}!
JS Code: helloWorld.js
import { LightningElement, track } from 'lwc'; export default class HelloWorld extends LightningElement { @track greeting = 'LearnFrenzy World'; changeHandler(event) { this.greeting = event.target.value; } }
XML Code: helloWorld.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?><apiVersion>45.0</apiVersion> <isExposed>true</isExposed> lightning__AppPage lightning__RecordPage lightning__HomePage
B: Deploy to Scratch Org
Finally, deploy your component into Developer Org.
Add Lightning Web Component to Lightning Home Layout:
Go to your Developer Org.
1. Open any app in lightning and go to the home tab.
-> Click App Launcher Icon and then Select Sales App.
2. Click on Gear Icon (Top-Right) and then click on Edit Page.
->Then Click at Setup Icon and select edit page.
3. Here in the left side, Scroll down to Custom section.
->Then Drag “helloWorld” Component at pageLayout. After that, click at Activation
and choose "OrgDefault".Next, Activate.
MIND IT !
Domain is enabled in your Org. Else Custom Component will not be visible in your Org.
->Enable the domain in your developer org.
Here is your first Lightning Web Component.