Let's Create First LWC component

First set up the development environment. 

1)  Install a code editor 

• The recommended code editor is  Visual Studio Code (VS Code)
• Install Salesforce Extension Pack for Visual Studio Code.
• Install Prettier extension for code formatting. 

2) Install the Salesforce CLI

Lets create a project 

•     In VS Code press, Command + Shift+P
•     enter sfdx, select SFDX: Create Project.
•     Select Standard Project Template
•     Enter desired name for the Project. 

   

 Lets create first LWC 

•     Press Command + Shift+P
•     enter sfdx, select SFDX: Create Lightning Web Component.
•     Type name as hellowWorld and for desired directory, accept the default.

helloWorld Component 

    Add following code to helloWorld.js

    

import { LightningElement, api } from 'lwc';

export default class HelloWorld extends LightningElement {

    @api name;

}

    @api decorator makes the name property public.

    Add following code to  helloWorld.html 

<template>

    <lightning-card title="HelloWorld" icon-name="custom:custom14">

        <div class="slds-card__body slds-card__body_inner">

            Hello, {name}!

        </div>

    </lightning-card>

</template>

{} syntax bind the name property in the hellowWorld.html to name property in helloWorld.js

Open helloWorld.js-meta.xml  and add following code to use the component in Lightning App Builder. 

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

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>49.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Hello World</masterLabel>

    <description>Add a classic greeting to any page.</description>

    <targets>

      <target>lightning__HomePage</target>

    </targets>

    <targetConfigs>

      <targetConfig targets="lightning__HomePage">

          <property name="name" type="String" label="Name" 

          placeholder="World" description="Enter the name of the person to greet."/>

      </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

<targetConfigs> section let us set name property in Lightning App builder. 

Lets deploy the component to the dev org 

• Press Command + Shift+P
• enter sfdx, select SFDX: Authorize an Org. and select project default and press Enter.
• Browser will open with Salesforce login screen.
• Log your dev org with credentials.  

Now you can deploy your components to your org by right click on the component and select

SFDX: Deploy Source to Org.

Lets add component to a lightning App. 

Click on App Launcher in your dev org and select the app that you want to add the component.

Now in the Home page and click on gear icon and select Edit Page.

The page will open from Lightning App Builder.  

The LWC components are display under the Custom Components in left side Components pane.(The org should enabled My Domain)

  

Click and drag the component to the page and placed it anywhere you need. 

Type any name for the Name and Save the page.

    

Activate the page and click on Back. 

Now the component is there.