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.

lightning-web-component

3. It will ask for the desired directory, Just press enter

lwc-folder

4. Then enter your Lightning Web Component Name. Please use camelCase for Lightning Web Components.It’s the best practice.

lightning-web-component-name title=

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.

helloWorld-Html-Js-MetaXML

Code :

Now, Lightning Web Component created. Let’s see how to use Lightning Web Component.

HTML Code:helloWorld.html

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