Create Lightning Web Components - Basic - Key Points

You can learn creating a simple lightning web component from the below trailhead module,

https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/create-a-hello-world-lightning-web-component

After that, creating a simple lightning web component with JavaScript decorator   

https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/create-lightning-web-components

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.

1. import { LightningElement } from 'lwc';
2. export default class MyComponent extends LightningElement {
3. }

• 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.