Lightning Web Components: A Quick Tutorial
The AURA framework used for the current Lightning Web Components is outdated as it is based on standards from 2014. It’s time to change for the following limitations
- Limited availability of standard UI elements
- Lack of modern design concepts
- Unsuitability for creating modular applications
- Web standards have been updated to address these limitations.
The AURA Framework required a specific skill set and had a learning curve of its own. LWC components can coexist and interoperate with Aura components, allowing developers to benefit from modern web standards and constructs without the steep learning curve of the outdated AURA framework.
Topology of a component in Lightning Web Components
What constitutes a Lightning Web Component (LWC)?
Similar to Aura components, a Lightning Web Component (LWC) is composed of HTML and JavaScript, and may include CSS.
However, LWC components also contain an XML configuration file that defines the component’s metadata. As a result, an LWC component has the following structure:
**HTML**
You must include a root tag called **`<template>`**
that contains the component’s HTML code.
When the component is rendered, the **`<template>`**
tag is replaced with **`<namespace-component-name>`**
, where the namespace is optional and the component name is the actual name of the component.
Code
**Javascript**
When you need to use functionality declared in a module (such as the “lwc” core module), you can import it using the import statement. Conversely, when you want to expose functionality in your module to other code, you can use the export statement.
In the context of Lightning Web Components (LWC), a Lightning Element is a customized wrapper for a standard HTML element.
To use it, we extend the Lightning Element within our component and export it for use by other components.
Code
**Configuration**
The XML file associated with a Lightning Web Component (LWC) defines the metadata configuration values for the component. These values include the component’s label, availability, configuration attributes, and builder attributes.
Code
**CSS**
You can simply apply a style sheet to the component.
When a style sheet is applied to an LWC, it is automatically used to style the component.
Code
component u**ser interface**(UI)
India 
USA
UK
Canada