Salesforce Lighting Web Components

SALESFORCE LIGHTING WEB COMPONENTS

What is Lightning Web Component?

Lightning Web Components is a new framework for building Lightning components. For Lightning Web Components development you need to setup SalesforceDX and VsCode as Lightning component are currently available in the Developer console. If you want to know more about lightning web component please check our webinar recording of “Introduction to Lightning Web Components”. In ApexHours Session we covered all below topic

Why Lightning Web Component (LWC)

Part 1 – Vanilla HTML5 Web Components

• Benefits of Web Component
• Pillars of Web Component
• Demo of Custom Element and Templating 
  
  

Part 2 – Lightning Web Component

• Hello World
• Demo of Lifecycle methods
• Call Apex Class
• Access Custom Label
• Lightning Data Services
• Communication between Lightning Component and LWC

Let see how to create very First Lightning Web Component.

Step 1) Setup SalesforceDX with VSCode.

Install Salesforce CLI. Here is link for download. You can take help from this post.

Download and Install Salesforce VsCode. Here is the link to download.

Install required Extension

Step 2) Upgrade to Pre-Release org

Sign up for a pre-release Developer Edition at https://www.salesforce.com/form/signup/prerelease-spring19/

Upgrade Pre-Release version of Salesforce CLI

sfdx plugins:install salesforcedx@pre-release

Step 3) Create SalesforceDx Project

1) Create ProjectIn out last post we talk about how to use SalesforceDx with non-scratch org. We will create project here with same steps.

Press “CTRL+SHIFT+P” then select  “SFDX:Create Project with Manifest”

2) Authorize your org

Press “CTRL+SHIFT+P” then select  “SFDX: Authorize an Org”

Step 4) Finally Create your first Lightning Web Component

Press CTRL+SHIFT+P then Type Web Component and then select “SFDX: Create Lightning Web Component”

• Then Select Folder where you want to save your LWC component
• Then provide Component Name.
• Verify your components under lwc folder

Directory Structure  :

Step 6) Coding part for Lightning component

HelloWorld.html

Hello, {greeting}!

 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

  45.0

  true

    lightning__AppPage

    lightning__RecordPage

    lightning__HomePage

 Step 7) Deploy your component in Org.

Once you are done with code. Select LWC folder and right click on same then from menu select “SFDX: Deploy Source to Org”.

Step 8) Verify your Changes with App Builder.

Open your app builder and add your Custom Component on page/App