Basics and Component Structure in LWC

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

Read about: Getters and Setters in LWC

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.

Read about: Attributes and Properties in LWC

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

Read more interesting facts about : OSS in Lightning Web Components

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

Don’t miss to read this: Lightning Locker and Lightning Locker Tools

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

Read about: Locker Console in Lightning Web Components

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>

Read this: LWC Tutorial – Basics and Component Structure

JavaScript File

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

For those looking for Salesforce learning, CRS Info Solutions provides an extensive Salesforce training program designed to enhance your skills and career opportunities. Explore our Salesforce training in Hyderabad to gain practical, hands-on experience, real-time projects included. Our training covers all essential aspects of Salesforce, ensuring comprehensive learning, providing daily notes, interview questions, certification preparation and job prep guidance. Enroll for Free demo today!

Accelerate Your Career in Hyderabad by Mastering Salesforce: Access Essential Skills and High-Paying Opportunities

Salesforce has become an essential skill set for professionals, especially in tech-driven cities like Hyderabad. As a key IT hub in India, Hyderabad is a hotspot for software companies that extensively leverage Salesforce for customer relationship management (CRM) and other vital business processes. Enrolling in a Salesforce training program, particularly in specialized areas such as Salesforce Admin, Developer (Apex), Lightning, and Integration, can significantly boost your career prospects in Hyderabad. Leading enterprises like Deloitte, Accenture, Infosys, TCS, and Wipro are constantly seeking certified Salesforce professionals to enhance their teams. The demand for these in-demand skills is strong, and the salaries offered are highly attractive. To maximize these career opportunities, it’s crucial to choose a trusted Salesforce training institute. CRS Info Solutions is acknowledged as one of the top Salesforce training institutes in Hyderabad, providing specialized courses in Admin, Developer, Integration, and Lightning Web Components (LWC). They support you through the certification journey, preparing you for a thriving career in the Salesforce domain.

Why Learning Salesforce is Vital in Hyderabad

Hyderabad has emerged as a pivotal hub in India’s IT landscape, attracting numerous multinational corporations and generating a substantial demand for skilled professionals. Salesforce, as a premier CRM platform, is central to addressing this demand. Learning Salesforce in Hyderabad offers distinct advantages due to the city’s dynamic job market and its concentration of leading tech companies. Prominent software giants like Deloitte, Accenture, Infosys, TCS, and Wipro are constantly on the lookout for certified professionals who have completed rigorous Salesforce training programs. These organizations require experts in Salesforce modules such as Admin, Developer (Apex), Lightning, and Integration to effectively manage, customize, and optimize their Salesforce environments.

Certified Salesforce professionals in Hyderabad are not only in high demand but also command some of the most competitive salaries in the tech industry. This makes mastering Salesforce an incredibly rewarding career decision, offering significant opportunities for career advancement, job security, and financial success. In the highly competitive job market, obtaining Salesforce certification from a respected Salesforce training institute can greatly enhance your employability and pave the way for long-term career growth.

Why CRS Info Solutions is the Ideal Choice in Hyderabad

To fully capitalize on the vast career opportunities available in Hyderabad, it’s essential to receive Salesforce training from a reputable and experienced institute. CRS Info Solutions is widely recognized as one of the premier Salesforce training institutes in Hyderabad. The institute offers an extensive selection of Salesforce courses covering all critical modules, including Admin, Developer, Integration, and Lightning Web Components (LWC). With a team of expert instructors, CRS Info Solutions ensures that students acquire both in-depth theoretical knowledge and practical, hands-on experience, which are crucial for succeeding in real-world scenarios.

CRS Info Solutions is dedicated to helping you achieve Salesforce certification and start a prosperous career in the Salesforce ecosystem. The institute’s emphasis on practical learning, combined with a comprehensive and well-rounded curriculum, equips you to meet the expectations of top employers in Hyderabad. By choosing CRS Info Solutions, you can become a certified Salesforce professional, ready to take on influential roles in companies like Deloitte, Accenture, Infosys, TCS, and Wipro. Considering the lucrative salaries and the increasing demand for Salesforce expertise in Hyderabad, selecting CRS Info Solutions for your Salesforce training is a vital step toward a successful and rewarding career in the Salesforce industry.

By partnering with CRS Info Solutions, you position yourself for success, armed with the skills and certifications that are highly sought after by leading companies. This strategic investment in your education and professional development can lead to a brighter, more prosperous future in the rapidly evolving Salesforce landscape.