Starting with LWC

To know How to Setup VS Code for Salesforce Please visit : VS Code Setup

Lightning Web Component is having three main bundle Elements,

1. nameSpace.hlml              = to show the UI View
2. nameSpace.js                  = for logic implementations 
3. nameSpace.js-meta.xml  = for metadata Access

The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it.

Create a web Component from VS Code:

1. First Create Project 

• Press ctrl+shift+p
• Select SFDX: Create Project
• Select Standard Project Template
• Give a Name to your project
• Select Project Location Where you want to save locally
• Open you new Folder

2. Create First LWC Component:

• Press ctrl+shift+p
• Select SFDX: Create Lightning Web Component
• Give a name to your lwc Component
• location will be default if you donot want to change the location of newly created lwc component.
• Once press enter your lwc will be created. you'll be seeing three elements in that bundle

Example:

Lightning web Component name = lwcHelloWorld

lwcHelloWorld.html

<template>

    <lightning-card title="LWC Hello World" icon-name="custom:custom14">

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

            Hello {name},

            {message}

        </div>

    </lightning-card>

</template>

lwcHelloWorld.js

import { LightningElement, api } from 'lwc';

export default class HelloWorld extends LightningElement {

    @api name = 'testing Name';

    @api message = 'How are you?';

}

lwcHelloWorld.js-meta.xml

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

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

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>