LWC – Basics

Lightning web component creation is one, two, three steps. I’m not kidding. It’s really that simple.

You create

(1) a JavaScript file

(2) an HTML file, and

(3) a CSS file. (Optionally)

At minimum, all you really need is an HTML file and a JavaScript file with the same name in the same folder (also with a matching name). You deploy those to an org with some metadata and you’re good to go. Salesforce compiles your files and takes care of the boilerplate component construction for you automatically

Practise Here

https://webcomponents.dev/create/lwc

Component Reference!

https://developer.salesforce.com/docs/component-library/overview/components

Best Example for Quick Revision

https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/create-lightning-web-components

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>