Learn the Basics of LWC in No Time! | Salesforce Lightning Web Components

Why Lightning Web Component (LWC)?

It was time for a change because the AURA framework, which served as the foundation for the current Lightning Components, was based on standards from 2014, which are now out of date for the following reasons:

The rendering could be improved.
Standard UI components were hard to find.
Not appropriate for modular apps.
Web standards have been revised.
The AURA Framework had its own learning curve and developed into a skill.
Additionally, Aura components and Lightning Web Components (LWC) can work together and coexist.

What is LWC?

LWC is a new programming paradigm that makes use of current web standards. It's not completely customized and hard from a development standpoint framework; rather, it's highly versatile. To make it the ideal fit for Modern Rich UI Implementations in Salesforce, it consists mostly of Common Web Standards and a Thin Layer of Specialized Services. Base Lightning Components, Lightning Data Service, and User Interface API are part of this thin layer of specialized services that power LWC. LWC is the modified and more standardized version of AURA.

A conventional web stack with a thin layer of specialized services on top produces:

Large-scale modular apps are easy to develop
Utilizing the newest web constructions and features is simple
A widespread model and transferable skills. (Anyone working with contemporary JS frameworks on the web could quickly ramp up LWC)
Interconnected components
Improved performance
Better testing with Jest.
Better Security

Don't forget to check out: Best Practices for Salesforce Lightning Web Components (LWC)

New Web Stack:

Where should You begin?

Here are a few suggestions:

The LWC Video Gallery has further information about LWC.
Set up VS Code for Salesforce Development after installing it.
Because it supports LWC, you can utilize the ForceCode Extension for Salesforce. You might also refer to this trailhead module.
Find sample code for nearly all use cases that are simple to grasp.
Create an LWC on your own, then test your code by executing it here.
Most importantly, Complete the Get Started with LWC trailmix

How is a Lightning Web Component (LWC) formed?

The primary components of an LWC are also HTML and JavaScript, much like an AURA component. Like CSS, some material is optional. The metadata values for the component are defined in an XML configuration file that is also included in addition to these for LWC.

Check out another amazing blog by Pranjal: What is the Arrow Function in JavaScript? | Salesforce Developer Guide

HTML

HTML has a root tag <template> which contains your component’s HTML.
The <template> tag is changed to <namespace-component-name> during rendering.

JavaScript

Use the import statement to import functionality from a module (eg- lwc, the core module).
Use the export statement to enable functionality in a module to be used by other code.
LightningElement is a custom wrapper of the standard HTML element and we extend it in the component and export.