Hello world

A first component is a LightningElement class, a template, and a js-meta.xml file with isExposed and targets.

The class

Import LightningElement from lwc and export a class that extends it. A field such as greeting = 'World' is already reactive. The template updates when you assign a new string. A string does not need a decorator.

Add @api when a parent must set the value. @api name is a public property. @track is for changes inside an object or an array, which a greeting string does not need.

The template

The template reads the field: <p>Hello, {greeting}</p>. One root <template> wraps the markup. The template does not write back into the class.

The meta file

Name the file greeting.js-meta.xml. Set isExposed to true and list a target such as lightning__AppPage, lightning__RecordPage, or lightning__HomePage when the component should appear in App Builder.

Set apiVersion to 45.0 or higher. The sample uses 65.0, which you can deploy. Leave the old fqn attribute off the LightningComponentBundle tag.

Example

xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

• XML configuration file elements