Technology has always been a bridge, but today, it feels more like a mirror. With the rapid rise of AI , we are seeing things enter our lives and leave them at a pace we can barely track. To understand where this is going, we first have to understand how technology actually impacts the core of who we are. The Survivalist vs. The Ego Our minds are biologically wired for one thing: survival . We are designed to handle the worst-case scenario, an ancient instinct gifted to us by nature. We consider ourselves conscious decision-makers, but a critical question remains: Who is really making the call?
LWC, or Lightning Web Components, is a framework provided by Salesforce for building responsive and efficient web applications on the Salesforce platform. LWC leverages modern web standards such as web components, JavaScript modules, and Shadow DOM to provide a robust development experience. Here are ten code examples with explanations to help you understand the basics of LWC:
1. Hello World Component:
<!-- helloWorld -->
<template>
<h1>Hello, World!</h1>
</template>
// helloWorld.js
import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {}
Explanation: This example demonstrates a basic LWC component that displays "Hello, World!" as a heading.
2. Property Binding:
<!-- propertyBinding -->
<template>
<h1>{greeting}</h1>
</template>
// propertyBinding.js
import { LightningElement, track } from 'lwc';
export default class PropertyBinding extends LightningElement {
@track greeting = 'Hello, World!';
}
Explanation: The component displays the value of the greeting property defined in the JavaScript file using curly braces {}. The @track decorator is used to make the property reactive.
3. Event Handling:
<!-- eventHandling.html -->
<template>
<button onclick={handleClick}>Click Me</button>
</template>
// eventHandling.js
import { LightningElement } from 'lwc';
export default class EventHandling extends LightningElement {
handleClick() {
alert('Button Clicked!');
}
}
Explanation: The component displays a button, and the onclick event is handled by the handleClick method, which shows an alert when the button is clicked.
4. Conditional Rendering:
<!-- conditionalRenderingl -->
<template>
<template if:true={showMessage}>
<h1>Show me!</h1>
</template>
</template>
// conditionalRendering.js
import { LightningElement, track } from 'lwc';
export default class ConditionalRendering extends LightningElement {
@track showMessage = true;
}
Explanation: The component conditionally renders the heading based on the value of the showMessage property. If the property is 'true', the heading is displayed.
5. Iteration with Iterators:
<!-- iteration -->
<template>
<template for:each={fruits} for:item="fruit">
<p key={fruit.id}>{fruit.name}</p>
</template>
</template>
// iteration.js
import { LightningElement } from 'lwc';
export default class Iteration extends LightningElement {
fruits = [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' },
];
}
Explanation: The component iterates over the fruits array and renders a paragraph for each fruit using the for:each directive.
6. CSS Styling:
<!-- styling-->
<template>
<p class="custom">Styled paragraph</p>
</template>
/* styling.css */
.custom {
color: red;
font-weight: bold;
}
Explanation: The component applies custom CSS styling to the paragraph element using a CSS class defined in a separate style file.
7. Component Communication with Events:
<!-- parentComponent -->
<template>
<c-child-component oncustomclick={handleCustomClick}></c-child-component>
</template>
// parentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleCustomClick(event) {
const message = event.detail;
alert(`Received: ${message}`);
}
}
<!-- childComponent -->
<template>
<button onclick={handleClick}>Click Me</button>
</template>
// childComponent.js
import { LightningElement } from 'lwc';
export default class ChildComponent extends LightningElement {
handleClick() {
const message = 'Hello from Child!';
this.dispatchEvent(new CustomEvent('customclick', { detail: message }));
}
}
Explanation: The parent component listens for a custom event (customclick) emitted by the child component. When the button in the child component is clicked, it dispatches the custom event with a message, which the parent component receives and displays in an alert.
8. Apex Wire Method:
<!-- apexWire-->
<template>
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="contact">
<p key={contact.Id}>{contact.Name}</p>
</template>
</template>
</template>
// apexWire.js
import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';
export default class ApexWire extends LightningElement {
@wire(getContacts) contacts;
}
Explanation: The component uses the @wire decorator to call an Apex method (getContacts) and fetches a list of contacts. The contacts are then iterated over and displayed in paragraphs.
9. Local JavaScript Methods:
<!-- localMethods -->
<template>
<button onclick={handleClick}>Click Me</button>
</template>
// localMethods.js
import { LightningElement } from 'lwc';
export default class LocalMethods extends LightningElement {
handleClick() {
this.showAlert('Button Clicked!');
}
showAlert(message) {
alert(message);
}
}
Explanation: The component defines a local JavaScript method (showAlert) that displays an alert with a provided message. The method is called when the button is clicked.
10. Lightning Data Service:
<!-- lightningDataService-->
<template>
<lightning-record-edit-form object-api-name="Account">
<lightning-messages></lightning-messages>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<lightning-input-field field-name="Name"></lightning-input-field>
</div>
<div class="slds-col">
<lightning-input-field field-name="Phone"></lightning-input-field>
</div>
</div>
<div class="slds-m-top_medium">
<lightning-button label="Save" type="submit" variant="brand"></lightning-button>
</div>
</lightning-record-edit-form>
</template>
Explanation: The component uses the lightning-record-edit-form and lightning-input-field components from Lightning Data Service to display an account record edit form with fields for Name and Phone. The form also includes error handling and a save button.
These examples provide a glimpse into the capabilities of LWC and showcase various features such as property binding, event handling, conditional rendering, iteration, CSS styling, component communication, Apex integration, local JavaScript methods, and Lightning Data Service.