Create First Component with LWC :

To create a component in LWC (Lightning Web Component), we need to complete presquite mention here.

In VS Code editor press Command + Shift P, enter sfdx, and select SFDX: Create Lightning Web Component. For the project name, enter lwcFirstCmp.

Use the camel case to name your Lightning web components (lwcFirstCmp) because it maps to kebab-case in HTML (<c-lwc-First-Cmp).

It will create By default three files:

1. Html
2. js
3. js-meta.xml

 

For Example :

HTML :

 

<template>

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

        <div>

            This is My First LWC Component

        </div>

    </lightning-card>

</template>

 

js :

 

import { LightningElement } from 'lwc';


export default class lwcFirstCmp extends LightningElement {

}

 

js-meta.xml :

 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

 

If you are using scratch org then push the code to the scratch org else if you are using Non-scratch org then deploy it.

Add the component at the desire page or app and you are good to go.

 Local Development:

To view the first component which you have Created with LWC in the local development server, we have to start the server.

 

To Start the Local Development Server:

 

1. Start the server

sfdx force:lightning:lwc:start

 

it will auto-refresh when u save the code in vscode.

it will increase the development speed as u don’t have to push or deploy code in org to see the result.

Support:

If you have any issue feel free to add a ticket and let us know your views to make it better https://webkul.uvdesk.com/en/customer/create-ticket/