Come creare un componente Web utilizzando Stencil.js

I componenti Web sono un insieme di tecnologie che consentono di creare elementi riutilizzabili e riutilizzarli in diverse applicazioni Web.

Stencil.js è un compilatore che genera componenti web compatibili con tutti i browser moderni. Fornisce strumenti e API per aiutarti a creare componenti Web veloci, efficienti e scalabili.

Iniziare con Stencil.js

Per iniziare con Stencil.js, devi prima inizializzarlo sul tuo computer.

Fallo eseguendo il seguente comando nel tuo terminale node.js:

npm init stampino

Dopo aver eseguito il comando, sullo schermo verrà visualizzato un prompt per selezionare il progetto con cui si desidera iniziare:

Per procedere, scegli l'opzione componente, inserisci il nome del tuo progetto e conferma la selezione:

Successivamente, passa alla directory del tuo progetto e installa le tue dipendenze eseguendo questi comandi:

cd progetto-primo-stencil
installazione npm

Creazione di un nuovo componente Web

Per creare un nuovo componente web in Stencil.js, crea un percorso di cartella come src/components. La cartella dei componenti conterrà un file TypeScript denominato dopo il componente, come Stencil.js utilizza il linguaggio TypeScript e JSX per lo sviluppo dei componenti. La cartella conterrà anche un file CSS che contiene lo stile del tuo componente.

Ad esempio, se vuoi creare un componente chiamato "my-button", crea un file chiamato mio-pulsante.tsx e un file CSS chiamato mio-pulsante.css. Nel mio-pulsante.tsx file, definisci il tuo componente utilizzando l'API Stencil.js:

importare { Componente, h } da'@stencil/core';
@Componente({
 etichetta: 'il mio pulsante',
 URL di stile: 'mio-pulsante.css',
 ombra: VERO,
})
esportareclasseIl mio pulsante{
 rendere() {
ritorno (
Cliccami</button>
 );
 }
}

Questo codice importa il file Componente E H funzioni da Stencil.js. IL Componente la funzione definisce il componente, mentre la H funzione crea il suo markup usando HTML.

Definisci il tuo componente usando il file @Componente decoratore, che prende un oggetto con tre proprietà: etichetta, styleUrl, E ombra.

IL etichetta La proprietà contiene il nome del tag del componente. IL styleUrl La proprietà specifica il file CSS per lo stile dell'elemento personalizzato. Infine il ombra property è un valore booleano che indica se il componente utilizzerà Shadow DOM per incapsulare gli stili e il comportamento dell'elemento personalizzato. Nel metodo render, crei un elemento button.

In aggiunta a styleUrl proprietà, puoi usare altre due proprietà per definire lo stile del tuo componente: stile E styleUrls.

IL stile La proprietà definisce gli stili incorporati per il componente. Prende un valore stringa che rappresenta gli stili CSS per il componente:

importare { Componente, h } da'@stencil/core';
@Componente({
 etichetta: 'il mio pulsante',
 stile: `
 pulsante {
 imbottitura: 1rem 0.5rem;
 raggio del bordo: 12px;
 famiglia di caratteri: corsivo;
 bordo: nessuno;
 colore: #e2e2e2;
 colore di sfondo: #333333;
 font-weight: grassetto;
 }
`,
 ombra: VERO,
})
esportareclasseIl mio pulsante{
 rendere() {
ritorno (
Cliccami</button>
 );
 }
}

IL styleUrls La proprietà specifica più file CSS esterni per definire lo stile del componente. Prende un array di valori stringa che rappresentano i percorsi dei file CSS:

importare { Componente, h } da'@stencil/core';
@Componente({
 etichetta: 'il mio pulsante',
 stileUrl: ['mio-pulsante.css', 'un altro-pulsante.css'],
 ombra: VERO,
})
esportareclasseIl mio pulsante{
 rendere() {
ritorno (
Cliccami</button>
 );
 }
}

Rendering del componente Web

Dopo aver creato il componente web, puoi eseguirne il rendering in un file HTML aggiungendo un tag elemento personalizzato. Ecco come puoi includere il componente my-button:

html>
<htmldir="ltr"lang="it">
<Testa>
<metaset di caratteri="utf-8" />
<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0, scala-minima=1.0, scala-massima=5.0" />
<collegamentohref=""rel="foglio di stile">
<titolo>Dispositivo di avviamento del componente dello stampinotitolo>
<copionetipo="modulo"src="/build/first-stencil-project.esm.js">copione>
<copionenomodulesrc="/build/first-stencil-project.js">copione>
Testa>
<corpo>
<il mio pulsante>il mio pulsante>
corpo>
html>

Ora puoi creare componenti Web utilizzando Stencil.js

Stencil.js è un potente strumento per la creazione di componenti Web veloci, efficienti e scalabili. La sua API e i suoi strumenti semplificano la creazione e la gestione dei componenti web e la sua compatibilità con tutti i browser moderni assicura che i tuoi componenti funzionino bene su diverse applicazioni web.

Man mano che i componenti web diventano sempre più popolari, Stencil.js è un framework che dovresti considerare quando crei elementi riutilizzabili per il web.