You can learn creating a simple lightning web component from the below trailhead module,
After that, creating a simple lightning web component with JavaScript decorator
I wanted to highlight the key points from the above modules,
- You can use if:false and if:true conditional directives within your template to determine which visual elements are rendered. Similar to rendered in the visualforce page or aura:if in the aura components.
- Lightning web components use common JavaScript ECMAScript 8 methods and syntax.
- The JavaScript file for a Lightning web component must include at least this code, where MyComponent is the name you assign your component class.
- import { LightningElement } from 'lwc';
- export default class MyComponent extends LightningElement {
- }
- The export statement defines a class that extends the LightningElement class. As a best practice, the name of the class usually matches the file name of the JavaScript class, but it’s not a requirement.
- Decorators are often used in JavaScript to extend the behavior of a class, property, getter, setter, or method.
- @api: Marks a property as public for use in your template or other components.
- @track: Marks a property for internal monitoring. A template or function using this property forces a component to rerender when the property’s value changes. Use this to store values locally, especially as a user interacts with your component.
- @wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org
- But, be aware, apply only one Lightning Web Component decorator to a property at a time. For example, a property can’t have @api (public reactive) and @track (private reactive) decorators at the same time.
- Respond to any of these lifecycle events using callback methods. For example, the connectedCallback() is invoked when a component is inserted into the DOM. The disconnectedCallback() is invoked when a component is removed from the DOM.
