Create a Hello World Lightning Web Component

In this blog post, we will learn about how to create a simple Hello World Lightning Web Component.

Prerequisite

• To create Lightning Web Component, you have to setup Salesforce DX Environment. If you have not setup Salesforce DX Environment yet then check out this link and follow the installation steps: How to Setup Salesforce DX Environment?

Steps:

1. Create a Salesforce DX Project
2. Authorize an Org
3. Create a Lightning Web Component
4. Deploy Source to Org
5. Add Component to App in Lightning Experience

Step 1 : Create a Salesforce DX Project

• In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.

• Type SFDX & Select SFDX: Create Project.

• Type MyFirstComponent as the project name & Press Enter.

• Select a folder to store the project. Click Create Project.

• You should see something like this as your base setup.

Step 2 : Authorize an Org

• In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.

• Type SFDX & Select SFDX: Authorize an Org.

• Press Enter to accept the Project Default login URL option.

• Press Enter to accept the default alias or you can specify alias.

• Log in using your Dev Org or Trailhead Playground credentials.
  NOTE: Enable Dev Hub in your org. Go to setup -> Search Dev Hub and enable it.

Step 3 : Create a Lightning Web Component        

• In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
• Type SFDX & Select SFDX: Create Lightning Web Component. 

• Press Enter to accept the default force-app/main/default/lwc.

• Enter helloWorld for the name of the new component & Press Enter.

• View the newly created files in Visual Studio Code.

Hello World Lightning Web Component

<!-- helloWorld.html-->
<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>

//helloWorld.js
import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}

<!-- helloWorld.js-meta.xml-->
<?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>

Step 4 : Deploy Source to Org

• Right-click the default folder.
• Select SFDX: Deploy Source to Org.

Step 5 : Add Component to App in Lightning Experience

• In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
• Type SFDX & Select SFDX: Open Default Org.
• Click the app launcher icon  to open the App Launcher, then click Sales.
• Click the gear icon ⚙ to open the Setup menu, then click Edit Page.
• Drag the helloWorld Lightning web component from the list of custom components to the top of the Page Canvas.

• Click Save.
• Click Activate.
• Click Assign as Org Default.
• Click Save.
• Click Save again, then click Back to return to the Home page.
• Refresh the page to view your new component.

Woohoo!!! You’ve made your first Lightning Web Component!Congrats!