Scribd
Upload
404 views

LWC Basics

This document provides steps to set up the development environment for building Lightning Web Components (LWC) using Visual Studio Code and the Salesforce CLI. It introduces LWC and how it compares to Aura frameworks. It then outlines 10 steps for setting up the environment, including installing VS Code and the CLI, authorizing a Dev Hub org, creating a scratch org, developing a first component, and interacting with Apex code. It also provides examples of using JavaScript properties and building a calculator component in LWC.

Uploaded by

arpit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
404 views

LWC Basics

This document provides steps to set up the development environment for building Lightning Web Components (LWC) using Visual Studio Code and the Salesforce CLI. It introduces LWC and how it compares to Aura frameworks. It then outlines 10 steps for setting up the environment, including installing VS Code and the CLI, authorizing a Dev Hub org, creating a scratch org, developing a first component, and interacting with Apex code. It also provides examples of using JavaScript properties and building a calculator component in LWC.

Uploaded by

arpit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

LWC(Lightning Web Components)

--->Salesforce has recently announced LWC(in december 2018) in comparison to aura


framework.
--->LWC is a new breed of light weight frameworks supporting all advance web
tecnologies
and web standards.
--->More secure,fast and light weighted components we can develop using LWC.
--->Lwc and aura components can exists on same lightning page.
--->Both can communicate with each other.
--->Lwc pretty solves rendering and performance issues.
--->Rendering of lwc component is very fast as comparison to aura.
*******We cannot develop lwc components using developer console.
---------->We need external editor
(VS CODE Editor)
We need sfdx commands to work on lwc components.

***************Setup environment for development***********************


STEP1-->Install Vs Code Editor.
https://code.visualstudio.com/download

Step2--->Install Salesforce Cli(Command Line Interface)


https://developer.salesforce.com/tools/sfdxcli

Step3--->***Open Visual Studio Code Editor(Add Salesforce Extension Pack)

Step4---->
SCRATCH ORGS-->
Allows development and testing in seperate environments.
They are disposable units.
They are temporary orgs.
max days(30 days).

Step5--->

Dev Hub--->are those salesforce orgs which allows us to create scratch orgs.
Goto--->Salesforce org--->set up-->dev hub-->enable dev hub.
**Once you will enable it it will not disable again.

Step 6--->Open Vs Code Editor--->open terminal window-->


sfdx update
-->this command will update salesforce cli to latest version<---

Step7--->Create Project Folder.


CTRL+SHIFT+P--->Create Project-->Enter

Step8-->Authorize Dev Hub Org.


Because we have to create scratch org for this org from salesforce cli.
sfdx force:auth:web:login

Step9-->Create Scratch Org.


sfdx force:org:create -a lwc1 -d 20 -f config/project-scratch-def.json

Step10-->Open Scratch Org


sfdx force:org:open -u lwc1

---------------Develop Our First Component--------------------------


<template>
<h1 style="color:whitesmoke">Welcome TO LWC COMPONENTS</h1>
<h1 style="background-color: cyan;color:darkorange">LWC DEMOS </h1>
</template>

<?xml version="1.0" encoding="UTF-8"?>


<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

PUSH COMPONENT FROM VS--->SCRATCH ORG.


sfdx force:source:push -u lwc1
//lwc1-->alias for scratch org.

TRAILHEAD
https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-
components

------------->JAVASCRIPT PROPERTIES<------
(Dynamic binding)
<template>
<h1 style="color:whitesmoke">Welcome {welcomename} TO LWC COMPONENTS</h1>
<lightning-input label="Enter Your Name" onchange={showmessage}></lightning-input>
</template>

JS
import { LightningElement } from 'lwc';

export default class WelcomeComponent extends LightningElement {

welcomename;
showmessage(event)
{
this.welcomename=event.target.value;
}

------------->Calculator In LWC<----------------------------------
<template>
<h1 style="color:yellow;background-color:turquoise">CALCULATOR DEMO</h1>
<lightning-input label="First Number" onchange={num1}></lightning-input>
<br/>
<lightning-input label="Enter Second Number" onchange={num2}></lightning-input>
<br/>
<lightning-button label="sum" onclick={calculate}></lightning-button>
<lightning-button label="sub" onclick={calculate}></lightning-button>
<lightning-button label="multi" onclick={calculate}></lightning-button>
<lightning-button label="divide" onclick={calculate}></lightning-button>

<div style="background-color:violet;">Result Is {result}</div>


</template>

js File
import { LightningElement } from 'lwc';

export default class WelcomeComponent extends LightningElement {

n1;
n2;
result;
num1(event)
{
this.n1=event.target.value;
}
num2(event)
{
this.n2=event.target.value;
}

calculate(event)
{
var l=event.target.label;
if(l=='sum')
{
this.result=parseInt(this.n1)+parseInt(this.n2);
}
else if(l=='sub')
{
this.result=parseInt(this.n1)-parseInt(this.n2);
}
else if(l=='multi')
{
this.result=parseInt(this.n1)*parseInt(this.n2);
}
else if(l=='divide')
{
this.result=parseInt(this.n1)/parseInt(this.n2);
}
}
}

--------------->Apex Interaction With Lwc<----------------


UDEMY LINK
https://www.udemy.com/course/lightning-web-component-
development/learn/lecture/15161778#overview

***Display List Of Accounts in lwc component


Wire property.

public with sharing class Accountmanager


{
public Accountmanager() {

}
@AuraEnabled(cacheable=true)
public static list<account> allaccounts()
{
return [select name,type from account];
}
}

swati@almamate.in

swatinagpal52@gmail.com

JS File
import { LightningElement,wire } from 'lwc';

import allaccounts from '@salesforce/apex/Accountmanager.allaccounts'


export default class ViewAccountComponent extends LightningElement
{
@wire(allaccounts)
accounts;//any name
}

HTML File
<template>
<h1 style="color:yellow">View Accounts Name</h1>
<template for:each={accounts.data} for:item="con">
<div key={con.Id}>

<lightning-card title={con.Name}>
{con.Type}
</lightning-card>
</div>

</template>
</template>

You might also like