Il giorno 08 Gennaio 2018 ho modificato il mio primo web component

Analizziamo il contenuto

<!-- myComponent.html -->
<template>

    <lightning-card title={ciao} icon-name="action:goal">
        <div class="slds-m-around_medium">
            {ciao}, {greeting}!
        </div>

        <c-view-source source="lwc/hello" slot="footer">
            Bind an HTML element to a component property. Ceck
        </c-view-source>

    </lightning-card>

</template>

il tag template è un tag paragonabile al body di html. Deve essere presente in tutti i web components.

I commenti vengono scritti come in html

lightning-card è un componente. Lista dei componenti lightning disponibile all’indirizzo https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

Sostituire per i componenti il separatore : con il –

I componenti aura e quelli LWC possono coesistere insieme

L’attributo icon-name genera una icona. La lista delle icone è disponibile alla url https://www.lightningdesignsystem.com/icons/#action

Le classi css usate sono di Lightning Design System. Lista disponibile qui https://www.lightningdesignsystem.com/utilities/margin/

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    ciao = 'Finalmente';
    greeting = 'World la mia prima modifica a un LWC';

    // funzione richiamata da html
    handleBtnClick() {
        window.open('https://www.picchiri.com','_blank');
    }
}

Il js sopra descritto è il controller della nostra pagina html o web component

Configurazione CLI

Creazione nuovo progetto LWC

Creazione di un LWC Lightning Web Component con Visual Studio Code

Configurazione principale Lightning Web Component (LWC)