Chapter 2: LWC Tutorial – Basics and Component Structure

Chapter 2: LWC Tutorial – Basics and Component Structure

On October 14, 2022, Posted by , In LWC Tutorial, By , With Comments Off on Chapter 2: LWC Tutorial – Basics and Component Structure

We can create LWC component via VS code ( Press cmd + shift + P ) or (ctrl + shift + P) and you will see the option as below:

After selecting the option, enter the component name and save.

We can create LWC for multiple purposes for example 

  • UI Component
  • Service component
  • Shared CSS component

B. Component Structure

LWC Components have structure as below when we create a component via VS Code (CSS and SVG files are not automatically created but we can add them if required)

The component name should follow below naming convention rules:

  • Must begin with a lowercase letter
  • Must contain only alphanumeric or underscore characters
  • Must be unique in the namespace
  • Can’t include whitespace
  • Can’t end with an underscore
  • Can’t contain two consecutive underscores
  • Can’t contain a hyphen (dash)

Note: All the files inside the folder should have the same name as other frameworks will not be able to wire them together. In case additional JS is added in the folder it can have a different but unique name within the folder

Lightning component follows web standards and HTML Standards require custom elements to have “-“ in the name but Salesforce doesn’t allow us to put “-“ in the component or file name and hence we use camelCase to name our component which is mapped with Kebab-Case on the markup for example

We can name our component as myComponent which will be mapped as <c-my-component> on markup

Now we will start learning about each type of file which makes the LWC component

1.     Component HTML File

  • For UI component HTML file is mandatory
  • First tag inside HTML file needs to be <template>
  • As per HTML mandate, If we insert any child component always add both opening and closing tags for the component ( see above image)
  • When the component is rendered <template> tag is replaced via kebab case of component name for example If your component name is “testComponent” in browser console it will appear as “<c-test-component>

2.     Component JavaScript File

  • Both UI and Service components have JavaScript files.
  • Service components are created to share code between different components to disallow writing redundant code.
  • By default everything declared in the module is local
  • The maximum size of the file can be 128 kb
  • Auto-generated JavaScript looks as below.
  • The core module in LWC is ‘lwc’ from which we are importing LightningElement
  • Lightning Element – It is a custom wrapper on HTML Element ( We can’t extend any other class to create LWC)
  • Export Default keyword makes sure this component is available to other components as well
  • We can’t export any other variable or functions from the UI component

3.  Component Configuration File

  • Every component must have a configuration file. The configuration file defines the metadata values for the component, including supported targets and the design configuration for Lightning App Builder and Experience Builder
  • Sample configuration file

4.     Component CSS File

  • All the styles added in the CSS file are automatically implemented to the component
  • The CSS file is not mandatory in the component but if you add a file it can’t be blank.
  • We can share styles between different components by making a component with just CSS and XML files for example
  • The same can be used in any other component as below

5.     Component SVG Icon

  • A component can include an SVG resource to use as a custom icon in Lightning App Builder and Experience Builder

6.     Additional JavaScript files

  • In addition to the default JavaScript file, we can add additional JavaScript files. This additional file can be used as a helper js file to the main file.
  • We need to export functions and variables in the JavaScript files so they can be imported by the component’s main JavaScript file.
  • Sample structure with additional files
  • The name of the additional file need to be unique within the folder

 Sample LWC Component

<template>
<lightning-card  title="My First LWC Component">
<lightning-button label="New" slot="actions"></lightning-button>
<div class="slds-p-horizontal_small">
My First LWC Component
</div>
<div slot="footer">
Card Footer
</div>
</lightning-card>
</template>

JavaScript File

import { LightningElement } from 'lwc';
export default class SampleLwc extends LightningElement {}


Comments are closed.