Our Blog

Create first component with lwc (Lightning Web Component)

Create first component with lwc (Lightning Web Component)

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/

 

Leave a Comment

Comments (0)

Please verify that you are not a robot.

css.php