LWC – Hello World

So far, we have been building lightning components using aura components. There is another new way or approach to build lightning components and we will see a very basic “Hello World” example today. I will post more articles on complex LWC in subsequent weeks

Lightning Web Components uses core web components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. You can create a lwc in VS Code project

Essentially, there are 3 main elements to create a simple lwc

  • HTML provides the structure of component.
  • JavaScript (JS) defines the core business logic and event handling.
  • CSS gives look and feel, and animation for the component.

HTML

The template tag is a fundamental building block of a component’s HTML. It allows you to store pieces of HTML.

<template>

    <input value={message}></input>

</template>

JavaScript

import { LightningElement } from ‘lwc’;
export default class App extends LightningElement {
message = ‘Hello World, from LWC’;
}

CSS

input {

   color: red;

}

Project Structure in IDE
Screen Output

Permanent link to this article: https://salesforcebuddy.com/2020/04/lwc-hello-world/

Leave a Reply

Your email address will not be published.