There are two Programming models to create Lightning Component:
- Lightning Web Component
- Aura Component
We will learn about Lightning Web Components in this blog.
To achieve better component performance LWC uses fewer Frameworks and more web stacks because the framework is heavy.
To create and develop LWC we need to set up salesforce DX. Salesforce DX is a set of tools and features that improve the efficiency of development during the application lifecycle. With this tool, development teams can easily work with command-line interfaces (CLIs) or integrated development environments (IDEs).
Unlike Aura Components, developing LWC components in the developer console is not possible. We need to write it locally and then push it to our org. For that, we can use tools like Visual Studio Code(VS Code), Salesforce Command Line Interface.
Install VS Code and set it up for Salesforce Development follow this Trailhead module.
LWC Component Structure
HTML, CSS, JS, XML file name should be similar to the component’s name, CSS file is optional.
Let’s take a look at these files:
- The HTML file has <template> as the root tag and all our HTML code will add inside the tag.
- Templating system helps LWC to Manipulate the DOM. After the rendering process, the <template> tag is change with the name of the component i.e. <namespace-component-name>
- The above component with the name lightningWebComponent will render as shown below.
The export default keyword exports the class for other components to use.
XML file is metadata of components, it includes metadata values for the component, including targets and the design configuration for the Lightning App Builder and Experience Builder. Filename must be <component’s Name>.js-meta.XML.
To allow the component to be used in Lightning App Builder or Experience Builder, set <isExposed> to true and define at least one <target> tag, which is a type of Lightning page.
To Know more about XML files refer to this source.
Decorators in Lightning Web Components
Decorators are part of ECMAScript, LWC has three decorators that add functionality to property or function. A property or function can be decorated with only one decorator at a time.
It exposes public property. And public properties are reactive in nature means that when the value of property changes it re-renders the component.
To use @api decorator we need to import it from the lwc. Line number 4 in the image below shows how we can expose the message field as a public property.
We are using this public property ‘message’ as a value of the input tag in the HTML file.
We can set the value of message public property from the Parent component like shown in the below image:
The track is a decorator which makes variable reactive, meaning if the value of variable changes it triggers the component to rerender. It tells the framework to keep track of changes to the elements of Array or properties of an object.
The wire is used to fetch and read the Salesforce Data. Wire service is used by LWC and when the fetching data process is done then the component re-renders.
For more information on Decorators refer to this link.
Click here to know more about Salesforce.
Thank you for giving this useful knowledge. It was quite beneficial to me. Keep up the good work!
Thank you for sharing this wonderful post. I like the way you explain the LWC Basics.
Thank you for sharing this wonderful post. I like the way you explain the Basics of LWC.
Being new to the Salesforce Environment, and exploring LWC components, this particular blog helped me alot, Good work! Keep it up 👍🏼
Thank you sharing for this great post. #SALESFORCE
Thank you very much for sharing your knowledge with us , this blog helped me alot to understand basics of LWC.