DEV Community: P V Vighnesh

Lightning web components - How do components talk?

P V Vighnesh — Fri, 11 Nov 2022 11:04:04 +0000

Welcome Back!

So far in the series, we've seen only one component. In this part, we'll add two separate components and make them talk to each other!

Let's start building.

We'll start with creating two new components. I'll call them parentCard and childCard because I'll be creating two base card components and the name is easier to remember, but you do you xD.

Building Parent-to-Child relationship

Creating Parent-Child relationship between components is as simple as adding a HTML element.

Below is an example of embedding a Child component in a Parent component.

childCard is the name of my child component. Two things to note here,

One, the 'c' namespace. In lwc, child components must be prefixed with 'c' namespace while embedding in a Parent component.
Two, the component naming convention. Previously, we've learnt that components must be named in pascalCase. But when you're embedding a component as a child, we must use kebab-case.

Now we have both the components ready, here's what we're going to build to see how the communication works.

We'll have an input and an output element in both Parent and Child. Whatever we input from Parent, we'll display in child and vice versa.

I'm not adding any code snippets here for building UI here, just so that you can give it a try 😌.

Anyway, here's how my UI looks. Simple enough.

Let's help our components to develop some communication skills. Speaking of communication skills, let this be a reminder for you (and me) to call up a friend/family and check up on them. Talking to your people is just as important as (probably more) making your components talk! 🌻

Another decorator

api decorator is used to define a public property. This is also reactive. (Salesforce docs on decorators)

Before passing the data from Parent, we need to create a variable in Child with api decorator, so that it can be public and can be accessed from Parent to pass the data.

api module has to be imported before using it.

In the child component, I'm creating a variable called valueFromParent and displaying it in UI.

In the parent component, I'm adding an onchange event listener on input field to get the value and storing it in inputValue variable.

For passing this value to child component, assign the value from parent to the public api property of the child.

Here, inputValue is where I'm storing the value from Parent and passing it on to valueFromParent api property which we created in child previously.

Note the naming convention again. Property which we declared in pascalCase has been converted to kebab-case.

Put that all together, this is what you get. As I'm typing in Parent's input field, the same is displaying on Child.

Building Child-to-Parent relationship

We'll now do the opposite of what we just did. We'll type stuff in Child's input box and send it over to Parent's output field.
Passing the value from Parent-to-Child was as simple as passing a public property, But passing a value from Child to Parent is a bit complicated. I guess we can add that to the list of things common between humans and code 😐.

Here, we make use of a custom event. We 'throw' the data from the child, and 'catch' it at parent component.

In the child component, I'll add an onchange event handler to the input field, and dispatch an event whenever the input value changes.

Here, every time input changes in Child's input box, we're creating and dispatching an event called childInput, which includes the data in the detail property.

Next, we have to make sure the Parent listens to this event.

childInput was out custom event, which I'm handling using handleChildInput.

I'm assigning the value which was sent through detail property to a variable and displaying it in Parent component.

Now, if we put all this together, we have Child-to-Parent communication.

This was about communication between two components, when they are related to each other. Next up, we'll see how the components communicate if they are not related. (Hint: It has something to do with 'Lightning' and 'Messaging'!)

If you liked this, follow the series for some more cool stuff on lwc.
Thanks for reading! :D

Calling a Screen flow from a Vlocity Action

P V Vighnesh — Sat, 05 Feb 2022 17:58:40 +0000

This post is exactly what the title says. Calling a Screen flow from a Vlocity Action.

If you're wondering Why do I have to call a Screen flow from a Vlocity Action?, just know that I didn't know this was even possible, until I had to build it. Even though it's a very simple thing(realizing after building it), I had to spend quite a bit of time figuring it out.

So if you're reading up to this point, you're either curios or trying to figure out something similar. Either way, let's get into it.

Build a flow

If you want to call a screen flow, you'd first need a Screen flow to call! 🤷‍♂️

I'm assuming you already have a flow you want to use. In my case, it was just a simple screen with an input field.

(Before calling this flow from Vlocity action, it was getting called from Quick action and I made use of the same Quick action)

Build a Vlocity Action

If you've ever launched an Omniscript using Vlocity Action, this is very similar.

Create a new Vlocity Action. Call it whatever you want, but remember the name, you'd need it later.

Link type : Other

Adding a Target URL is where I got confused. If it was an Omniscript, you'd get an URL. How do I get one for a flow?

After a lot of fiddling around, I decided to use the URL that comes up when we actually launch the flow from the record, with few changes.

Target URL : lightning/action/quick/<<OBJECT.ACTION_NAME>>?objectApiName&Context=RECORD_DETAIL&recordId={0}
URL Parameter : Id

Here, {0} is the contextId, meaning it will be replaced by the Id of the record from where this Action is being called.

Build a Vlocity card

Or use already existing one 😅

This is the part where you'd add the Vlocity action you just created to your Card, from where you will be launching the flow.

Select the card, and add your Action. I told you you'd need the name later.😌

You might also have to create and add a Vlocity template to your Layout/Card, depending on whether you used existing layout or created a new one. It is better to use the templates from your org to maintain UI consistency.

Final steps

Make sure all your changes are present and Activate your card.

If you've created a new Card/Layout, you'll have to add it to your Flexipage as well.

And you've built it!

You can test by clicking on the action and it should launch you straight into the Screen flow.

Thanks for reading. I post stuff on Salesforce, LWC, Vlocity, Frontend development and Design(or at least I wish to).
You can check out my ongoing LWC series here, and if you like the content, do hit the Follow button!

Lightning web components - Rendering Lists

P V Vighnesh — Thu, 15 Apr 2021 16:44:44 +0000

Welcome back!

This is the continuation of the previous blog Lightning web components - Conditional Rendering.

In the last part, we built a new component employeeDetails, saw how 'formatted' tags work and conditionally rendered the details section. We'll see how we can render lists in this part.

There are two ways we can do this in LWC. We can either use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested tag that encloses the HTML elements you want to repeat.

The iterator directory has special properties, first and last that let you apply special behaviors to the first and last items in an array.

Regardless of which directive you use, you must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed.

for:each

When using the for:each directive, use for:item to access the current item.
To assign a key to the first element in the nested template, use the key={uniqueId} directive.

Iterator

To apply special behaviour to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.

Let's build something!

We can use our old simpleCalculator component to play around with for:each and iterator. We'll add two more buttons to the UI to show the previous calculation history and to clear the history.

    <lightning-card title="Simple Calculator" icon-name="utility:advanced_function" class="slds-text-align_center">
        <div class="slds-p-around_medium">
            <lightning-input type="number" name="firstNum" value={firstNumber} placeholder="First Number" onchange={handleFirstNum}></lightning-input>
            <lightning-input type="number" name="secondNum" value={secondNumber} placeholder="Second Number" onchange={handleSecondNum}></lightning-input>
            <lightning-input type="text" name="result" value={result} placeholder="Result" readonly></lightning-input>
        </div>
        <div class="slds-grid slds-p-around_medium">
            <lightning-button label="Add" icon-name="utility:add" size="small" onclick={handleAdd} class="slds-col"></lightning-button>
            <lightning-button label="Subtract" icon-name="utility:dash" size="small" onclick={handleSub} class="slds-col"></lightning-button>
            <lightning-button label="Multiply" icon-name="utility:close" size="small" onclick={handleMul} class="slds-col"></lightning-button>
            <lightning-button label="Divide" icon-name="utility:percent" size="small" onclick={handleDiv} class="slds-col"></lightning-button>
        </div>
        <div class="slds-grid slds-p-around_medium">
            <lightning-button class="slds-col" variant="brand" label="Clear" onclick={handleclear} ></lightning-button>
            <lightning-button-stateful class="slds-col" label-when-off="Show History" label-when-on="Hide History" variant="brand"  selected={isSelected} onclick={handleClick}></lightning-button-stateful>
            <lightning-button class="slds-col" label="Clear History" variant="brand" onclick={handleClearHistory}></lightning-button>
        </div> 
           <template if:true={isSelected}> 
            <div class="slds-text-align_center">Previous Calculations
                {historyData}
            </div>
        </template>
    </lightning-card> 
</template>

Now, this should make our UI look like this.

We'll modify the JavaScript file to handle the two buttons we added to the HTML.

import { LightningElement } from 'lwc';

export default class SimpleCalculator extends LightningElement {
    firstNumber;
    secondNumber;
    result;
    isSelected = false;
    historyData = [];
    id;

    handleFirstNum(event) {
        this.firstNumber = event.target.value;
    }

    handleSecondNum(event) {
        this.secondNumber = event.target.value;
    }

    handleAdd() {
        this.result = `The result of ${this.firstNumber} + ${this.secondNumber} is: ${parseFloat(this.firstNumber) + parseFloat(this.secondNumber)}`;
        this.historyData.push(this.result);
    }

    handleSub() {
        this.result = `The result of ${this.firstNumber} - ${this.secondNumber} is: ${parseFloat(this.firstNumber) - parseFloat(this.secondNumber)}`;
        this.historyData.push(this.result);
    }

    handleMul() {
        this.result = `The result of ${this.firstNumber} * ${this.secondNumber} is: ${parseFloat(this.firstNumber) * parseFloat(this.secondNumber)}`;
        this.historyData.push(this.result);
    }

    handleDiv() {
        if(this.secondNumber > 0) {
            this.result = `The result of ${this.firstNumber} / ${this.secondNumber} is: ${parseFloat(this.firstNumber) / parseFloat(this.secondNumber)}`;
        }
        else {
            this.result = "Invalid Input";
        }
        this.historyData.push(this.result);

    }

    handleclear() {
        this.firstNumber = '';
        this.secondNumber = '';
        this.result = '';
    }

    handleClick() {
        this.isSelected = !this.isSelected;
        showHistory(this.isSelected);
    }

    showHistory(isSelected) {
        if(isSelected) {
            this.showHistoryData = true;
        }
    }
    handleClearHistory() {
        this.historyData = [];
    }
}

This is how it looks.

Now, let's try the same with for:each directive. Modify the nested <template> tag in the HTML.

 <template if:true={isSelected}> 
        <div class="slds-text-align_center">Previous Calculations
              <ul class="slds-m-around_medium">
                    <template for:each={historyData} for:item="res">
                          <li key={res}>
                            {res}
                          </li>
                   </template>
             </ul>
        </div>
 </template>

The lines are coming one after the other, instead of on the same line.

Let's try the same using the Iterator.
Modify the nested template tag again to add the Iterator.

<template if:true={isSelected}> 
            <div class="slds-text-align_center">Previous Calculations
                 <ul>
                    <template iterator:res={historyData}>
                        <li key={res.value}>
                            <div if:true={res.first} class="slds-border_top background"></div>
                            {res.value}
                            <div if:true={res.last} class="slds-border_bottom background"></div>
                        </li>
                    </template>
                </ul>
            </div>
        </template>

Notice how we are able to use first and last properties? That's something only Iterator offers. Let's see out it looks now.

It's not much of a difference but using first and last properties, we managed to add a border at the top and at the bottom. Along with that, all the other buttons we added are working fine.

We had previously built the simpleCalculator component that could do basic Arithmetic operations and a button to clear out the values. In this part, we enhanced that application by adding a button to reveal Previous data conditionally and also a button to clear out the history. We also saw how to implement both using for:each and Iterative directives.

In the next part, we will see how to create Child and Parent component and how to pass data between them.

If you liked this, follow the series for some more cool stuff on lwc.
Thanks for reading! :D

Lightning web components - Conditional Rendering

P V Vighnesh — Wed, 14 Apr 2021 07:11:43 +0000

Good to have you back!

This is the continuation of the previous blog Lightning web components - More JavaScript!

In the previous part, we played around with JavaScript and built a Simple Calculator component. In this blog, we will see how we can conditionally render DOM elements.

Let's build a new component. We'll just add a couple of elements to take input from the user, and then we'll make use of conditional rendering to display the data on click of a button.

Let's get the UI rolling.

Let's call our best friend Command Pallate and create a new Lightning Component. I'll name the component employeeDetails, but again, you do you. And also, don't forget to name your component in camelCase. Very important.

<template>
    <lightning-card title="Employee Details" class="slds-text-align_center">
        <div class="slds-p-around_medium">
            <lightning-input type="text" placeholder="Name" onchange={handleName}></lightning-input>
            <lightning-input type="number" placeholder="Phone Number" onchange={handlePhone}></lightning-input>
            <lightning-input type="email"  placeholder="Email address" onchange={handleMail}></lightning-input>
            <lightning-input type="number" name="ctc" placeholder="Expected CTC" onchange={handleCtc}></lightning-input>
        </div>
        <div class="slds-grid slds-p-around_medium">
           <lightning-button class="slds-col" variant="brand" label="Show Details" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>
</template>

Modify the HTML file, deploy the code to org and you should be able to see something like this.

JavaScript!

import { LightningElement } from 'lwc';

export default class EmployeeDetails extends LightningElement {
    name;
    phone;
    mail;
    ctc;

    handleName(event) {
        this.name = event.target.value;
    }
    handlePhone(event) {
        this.phone = event.target.value;
    }
    handleMail(event) {
        this.mail = event.target.value;
    }
    handleCtc(event) {
        this.ctc = event.target.value;
    }
}

We added the elements in the UI and added methods to handle the input.

Now let's check how to render them with the click of the button.

To render HTML conditionally, add the if:true|false directive to a nested tag that encloses the conditional content. The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a truthy or falsy value.

Let's modify our HTML file. Add this after closing the <div> tag of the button.

<template if:true={isSelected}>
            <div class="slds-text-align_center"> 
                <div class="slds-text-heading_medium">Employee Details</div><br/>
                <lightning-formatted-text value={name} ></lightning-formatted-text><br/><br/>
                <lightning-formatted-phone value={phone} ></lightning-formatted-phone><br/><br/>
                <lightning-formatted-email value={mail}></lightning-formatted-email><br/><br/>
                <lightning-formatted-number value={ctc} format-style="currency" currency-code="EUR" ></lightning-formatted-number>
            </div>
        </template>

We'll add one more variable isSelected and add a method to handle the click.

Modify the JavaScript file to add these changes.

   isSelected = false;

    handleClick() {
    this.isSelected = true;
    }

Did you notice how we have used <lightning-formatted-text>, <lightning-formatted-email> etc, in our template? You can read more about them here. If you're too lazy to click, those tags format the data in a certain way. We'll see that in our component.

Let's deploy our code and see how it looks.

It works!

Notice how it's displaying E-mail, Phone number and Currency. That's the magic of the 'formatted' tags.

Let's enhance the button.

There is something called the Stateful button. A lightning-button-stateful component represents a button that toggles between states, similar to a Like button on social media. Stateful buttons can show a different label and icon based on their selected states.

Let's modify the HTML file and use a stateful button instead of normal buttons.

Replace the previous button tag with this.

<lightning-button-stateful class="slds-col" label-when-off="Show Details" label-when-on="Hide Details" variant="brand"  selected={isSelected} onclick={handleClick}></lightning-button-stateful>

Let's modify the JavaScript to handle this. Replace the old handleClick() method with this one and add another method showDetails().

handleClick() {
        this.isSelected = !this.isSelected;
        showDetails(this.isSelected);
    }
    showDetails(isSelected) {
        if(isSelected) {
            this.isShown = true;
        }
    }

Save and deploy. Let's see the changes.

See what's happening there? It's not just conditionally rendering, but also the label of the button is changing every time we click. Tell me that isn't cool! xD

Well, that's it for this part. We created a new component that takes input from the user, we added a button to conditionally display the data. We also explored the 'formatted' tags and 'stateful button'.
In the next one, we'll see how to use an iterator and for each.

If you liked this, follow the series for some more cool stuff on lwc. There will be one post every day.

Thanks for reading! :D

Lightning web components - More JavaScript!

P V Vighnesh — Tue, 13 Apr 2021 12:58:24 +0000

Welcome back!

This is the continuation of the previous blog Lightning Web Components - Adding Styles and JavaScript.

In the last part, we made our component look a bit better and added some JavaScript too.

In this part, we'll tinker around with some more JavaScript by building another simple component. We'll build a Calculator, that takes in 2 inputs, and lets us perform some basic arithmetic operation and displays the result.

Let's get building

Fire up your VSCode. Call our best friend Command Palette and type in the command to create a new lwc.

Alternatively, you can right-click on 'lwc' folder in file explorer in VScode and select the Create Lightning Web Components command.

Let's name our component now and since I mentioned it's going to be a simple one, I'll name it simpleCalculator. I know, very Creative.

We will follow the same step as before. Let's add a card first as a container to hold our two input elements, we'll also add another element to display the output. Since we already know how to play around with the slds, we'll throw that into the mix as well.

<template>
    <lightning-card title="Simple Calculator" icon-name="utility:advanced_function" class="slds-text-align_center">
        <div class="slds-p-around_medium">
            <lightning-input type="number" name="firstNum" value={firstNumber} placeholder="First Number" onchange={handleFirstNum}></lightning-input>
            <lightning-input type="number" name="secondNum" value={secondNumber} placeholder="Second Number" onchange={handleSecondNum}></lightning-input>
            <lightning-input type="text" name="result" value={result} placeholder="Result" readonly></lightning-input>
        </div>
    </lightning-card> 
</template>

After we save and deploy this to our org, we should be able to see something like this.

Now, let's add buttons to perform the math. We'll give the user the option to Add, Subtract, Multiply or Divide two numbers.

After ending the <div> tag previously, we'll add another one to hold our buttons.

        <div class="slds-grid slds-p-around_medium">
            <lightning-button label="Add" icon-name="utility:add" size="small" onclick={handleAdd} class="slds-col"></lightning-button>
            <lightning-button label="Subtract" icon-name="utility:dash" size="small" onclick={handleSub} class="slds-col"></lightning-button>
            <lightning-button label="Multiply" icon-name="utility:close" size="small" onclick={handleMul} class="slds-col"></lightning-button>
            <lightning-button label="Divide" icon-name="utility:percent" size="small" onclick={handleDiv} class="slds-col"></lightning-button>
        </div>

Also, did you notice we're using grid? You can read more about how we use grid in lwc here.

This should make our component look like this.

The UI looks good now, let's get down to JavaScript and make this thing work.

First, we need to declare our variables. Speaking of variables now is the time to talk about decorators.

The Lightning Web Components model has 3 decorators and these three decorators are unique to LWC.

'@api' - Public properties are reactive. If the value of public property changes, the component re-renders. To expose a public property or a method, decorate it with @api.
'@track' - Fields are reactive. If a field’s value changes and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value.
'@wire' - To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component re-renders.

You can learn more about them here.

Let's get back to declaring variables. We'd usually declare with '@track' decorator but with the new version, we don't have to. Unless we specify a different decorator, any variable we declare will default to track decorator.

import { LightningElement } from 'lwc';

export default class SimpleCalculator extends LightningElement {
    firstNumber;
    secondNumber;
    result;

handleFirstNum(event) {
        this.firstNumber = event.target.value;
    }

    handleSecondNum(event) {
        this.secondNumber = event.target.value;
    }

We have declared variables and added two methods to handle two inputs.

Let's add a method to handle the addition operation.

handleAdd() {
        this.result = `The result of ${this.firstNumber} + ${this.secondNumber} is: ${parseFloat(this.firstNumber) + parseFloat(this.secondNumber)}`;
}

So this works. Phew.
Let's do the same thing for the other three operations as well.

handleSub() {
        this.result = `The result of ${this.firstNumber} - ${this.secondNumber} is: ${parseFloat(this.firstNumber) - parseFloat(this.secondNumber)}`;
    }

    handleMul() {
        this.result = `The result of ${this.firstNumber} * ${this.secondNumber} is: ${parseFloat(this.firstNumber) * parseFloat(this.secondNumber)}`;
    }

    handleDiv() {
        if(this.secondNumber > 0) {
            this.result = `The result of ${this.firstNumber} / ${this.secondNumber} is: ${parseFloat(this.firstNumber) / parseFloat(this.secondNumber)}`;
        }
        else {
            this.result = "Invalid Input";
        }   
    }

Let's see if this works.

And it does work.

Let's add one more functionality before we end this blog. We will build a Clear button that will, obviously, clear out all the values.

Let's start by adding one more button to our UI. I've also introduced a new attribute called variant to the button element and assigned the value of 'brand' to it. Let's see what difference that makes to the button.

<div class="slds-grid slds-p-around_medium">
   <lightning-button class="slds-col" variant="brand" label="Clear" onclick={handleclear} ></lightning-button>
</div>

Let's also add a method to handle the Clear button.

handleclear() {
        this.firstNumber = '';
        this.secondNumber = '';
        this.result = '';
    }

This will clear all the values when we press the Clear button. Or, will it?
Let's deploy our new changes to the org and see the changes.

Noticed how the variant attribute changed the button? You can read more about it in the Components Library.

To sum up this part, we built a UI for our Simple Calculator component using a Card, a couple of input fields and buttons. Then we played around with JavaScript to make our component work as expected.

In the next part, we will learn how to conditionally render elements and a little bit about the arrays.

If you liked this, keep an eye on this series.
Thanks for stopping by. :D

Lightning Web Components - Adding Styles and JavaScript

P V Vighnesh — Mon, 12 Apr 2021 06:23:10 +0000

Welcome back!

This is the continuation of the previous blog Lightning Web Components - Introduction.

Previously, we learnt how to prep our Org, set up our VSCode and finally we deployed our first component.

Now we'll make it look better and add some JavaScript.

Let's build a better UI. Before we do that, bookmark the below links. It'll come in handy later, Trust me.

If you noticed in the previous screenshot, every other component apart from ours has a nice white background. Let's start with adding that.

<template>
    <lightning-card>
    <p>Hello. This is my first LWC.</p>
    </lightning-card>
</template>

This adds a lightning card element and our UI will look like this.

Now is the perfect time to talk about SLDS.

SLDS is Salesforce Lightning Design System. It is a CSS framework that gives you access to the icons, colour palettes, and fonts and helps you build applications with the look and feel of Lightning Experience without writing a single line of CSS.

You can read more about it here.

If you refer to the Component Library for the lightning card, you will also see that we can add title and icon to the card.

We can try this out. Modify the HTML as below to add a title and an icon to our card and some margin and padding to our text.

Also, notice the way we write slds styles. That's the syntax we should follow.

<template>
    <lightning-card title="First Component" icon-name="utility:fallback">
        <div class="slds-m-top_small slds-p-left_small">
            <p>Hello. This is my first LWC.</p>
        </div>
    </lightning-card>
</template>

Adding these changes and deploying the code will make our component look like this. A bit better now, isn't it?

Let's go a step further. Instead of just saying 'Hello' there, we'll try to make it display any string that we enter.

For example, if I enter 'Vighnesh' as an input, it should display 'Hello Vighnesh'.

And yes, we'll finally add some JavaScript now.

First, we need a way to take input from the user. Let's modify our HTML to get that done.

We'll use the <lightning-input> tag to get input from the user. Our HTML will look like this after making changes.

<template>
    <lightning-card title="First Component" icon-name="utility:fallback">
        <div class="slds-m-top_small slds-p-around_small">
            <p>Hello {userName}. This is my first LWC.</p>
            <lightning-input type="text" value={userName} onchange={handleOnChange}></lightning-input>
        </div>
    </lightning-card>
</template>

JavaScript file:

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    userName = 'World';

    handleOnChange(event) {
        this.userName = event.target.value;
    }
}

Save the files. Deploy it to your org. Check the output.

Note: You might have to open the app builder and save it every time you deploy some changes. (You can open the app builder by clicking on the Edit Page option in setup cog)

And that is it for the blog. In the next part, we will explore a bit more around the same concepts and build another simple application.

If you liked this, keep an eye on this series.

Thanks for reading. :3

Lightning Web Components - Introduction

P V Vighnesh — Thu, 08 Apr 2021 05:39:00 +0000

So what are Lightning web components?

Lightning web components are custom elements built using HTML and modern JavaScript. It's a new breed of lightweight framework built on web standards.

What do you need to get started?

If you're very eager or... lazy to set up things right away, then you can check out this.

If you have some time, then you can follow the steps below to set things up.

First things first, you will need an org. An org is where you do stuff. You can get one for free here.. If you have a trailhead account, you can use your Playground as well.
You have to set up My Domain for your org. Click here to see how to do it. If you're using Trailhead playground, you can skip this because it will have its My Domain configured.

To Enable Dev Hub, you can follow this link.

Once you have your Org ready, install Salesforce CLI and VS Code. You can check if it's installed correctly or not by typing sfdx in the terminal. If everything is good, you'll see something like this.
In the VS Code, download Salesforce Extension pack extension.

Now, if you open your Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and type in sfdx, you should be able to see these commands.

Congratulations! You're one step closer to build your first lwc.

Let's get down to business now. Let's build our component and you guessed it, it's going to be a Hello World component.

Open the Command Palette and type sfdx, and you'll see SFDX: Create Project. Select it.

In the next step, select Standard Project template and hit enter.

Now, give a name for your Project. I'll name it hello world, but you do you.
Select or create a folder for your project and when it's done creating, you'll see something like this as your base setup.

Remember creating an Org at the beginning? You will have to authorize that org in order to deploy and see your changes in that org. And that is pretty simple. You will need your org's credentials to do this. (If you don't have it, you can follow this link to reset your password.)

Same stuff. Open your Command Palette, type in sfdx and you'll see SFDX: Authorize an Org.

Select this. Next, select the Project Default URL option. In the next step, you can hit Enter to select the default alias for your org or you can actually give one. Your choice. Either way, hit Enter when you're done and it'll run the command for you.

This will open the Salesforce login page and this is where you will need your org's credentials. Login and you will be prompted with a screen to allow access. Once you click Allow and go back to your VSCode, you'll see a success message like this.

And this is it. The next step will be creating the component.

And to do that, yes, you guessed it right, we open our best friend Command Palette again.
But this time, search for the command SFDX: Create Lightning Web Component.

And be careful here, don't use SFDX: Create Lightning Component, this will create the Aura component instead of the Lightning web component.

You will get a prompt to enter the name of the component, and you will have to enter the name in camelCase. Since we are building a hello world component, we can add helloWorld as the name. Next, the prompt will ask you to choose the directory, you can choose the default directory. You will see something like this.

It will create HTML, JS and .js-meta.xml files for you. The CSS file is optional.

HTML provides the structure for your component.
JavaScript defines the core business logic and event handling.
CSS is for styling, and this is optional.
.js-meta.XML file provides metadata for Salesforce, including the design configuration for components intended for use in Lightning App Builder.

So now we know how to set up, what each file is for. Next, we can deploy our first code to our Org.

Open your HTML file and you'll see a <template> tag. This tag contains the HTML that defines the structure of your component.

<template>
     <p>Hello. This is my first LWC.</p>
</template>

You can don't have to modify your JS file... yet.

Modify your .js-meta.xml file to this, so that you will be able to use the component in Lightning App Builder. (If you're using Webcomponents.dev, you will not see this file)

<?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__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Now, you're ready to deploy your first component. To do that, you can either call our best friend Command Palette or just right click on the folder and select SFDX: Deploy Source to Org.

Once it's been deployed, you can open the org directly using the SFDX: Open Default Org command.

Once you're in the org, go to the app launcher(the square icon right below the salesforce logo), and search for Home and open it.

Click on the setup cog(top right corner) and select Edit Page. This will open Lightning App Builder.

You will find a list of components on the left side of the screen, scroll down to find Custom and you'll see your helloWorld component there, drag it and drop it on the screen.

Save it and go back to the home page.

And here it is, your first lwc.

I mean, sure, it is ugly but not bad for a first component, eh?
Yes, go ahead. Pat yourself on the back. You deserve it.

In the next part, we'll make it look a bit better, add some JavaScript too.

If you liked this, keep an eye on this series. I'll be posting every day, for the next 14 days (that's the plan at least).

Thanks for reading. :3