Cum să construiți o componentă web folosind Stencil.js

Componentele web sunt un set de tehnologii care vă permit să creați elemente reutilizabile și să le reutilizați în diferite aplicații web.

Stencil.js este un compilator care generează componente web care sunt compatibile cu toate browserele moderne. Oferă instrumente și API-uri pentru a vă ajuta să construiți componente web rapide, eficiente și scalabile.

Noțiuni introductive cu Stencil.js

Pentru a începe cu Stencil.js, mai întâi trebuie să-l inițializați pe computer.

Faceți acest lucru rulând următoarea comandă în terminalul node.js:

npm init stencil

După rularea comenzii, pe ecran va apărea o solicitare pentru a selecta proiectul cu care doriți să începeți:

Pentru a continua, alegeți opțiunea de componentă, introduceți numele proiectului și confirmați selecția:

Apoi, schimbați în directorul proiectului și instalați dependențele dvs. rulând aceste comenzi:

cd primul-stencil-proiect
instalare npm

Crearea unei noi componente web

Pentru a crea o nouă componentă web în Stencil.js, creați o cale de folder, cum ar fi src/componente. Dosarul componente va conține un fișier TypeScript numit după componenta dvs., ca Stencil.js folosește limbajul TypeScript și JSX pentru dezvoltarea componentelor. Dosarul va conține, de asemenea, un fișier CSS care conține stilul componentei dvs.

De exemplu, dacă doriți să construiți o componentă numită "my-button", creați un fișier numit butonul-meu.tsx și un fișier CSS numit butonul-meu.css. În butonul-meu.tsx fișier, definiți-vă componenta folosind API-ul Stencil.js:

import { Componentă, h } din„@stencil/core”;
@component({
 etichetă: „butonul meu”,
 styleUrl: „my-button.css”,
 umbră: Adevărat,
})
exportclasăMyButton{
 randa() {
întoarcere (
Faceți clic pe mine</button>
 );
 }
}

Acest cod importă Componentă și h funcții din Stencil.js. The Componentă funcția definește componenta, în timp ce funcția h funcţie își creează marcajul folosind HTML.

Definiți-vă componenta utilizând @Component decorator, care preia un obiect cu trei proprietăți: etichetă, styleUrl, și umbră.

The etichetă proprietatea conține numele etichetei componentei. The styleUrl proprietatea specifică fișierul CSS pentru stilul elementului personalizat. În cele din urmă, umbră proprietatea este o valoare booleană care indică dacă componenta va folosi Shadow DOM pentru a încapsula stilurile și comportamentul elementului personalizat. În metoda de randare, creați un element buton.

În plus față de styleUrl proprietate, puteți folosi încă două proprietăți pentru a vă stila componenta: stil și styleUrls.

The stil proprietatea definește stiluri inline pentru componentă. Este nevoie de o valoare șir care reprezintă stilurile CSS pentru componentă:

import { Componentă, h } din„@stencil/core”;
@component({
 etichetă: „butonul meu”,
 stil: `
 butonul {
 umplutura: 1rem 0.5rem;
 raza de frontieră: 12px;
 familie de fonturi: cursiv;
 chenar: niciunul;
 culoare: #e2e2e2;
 culoare de fundal: #333333;
 greutate font: bold;
 }
`,
 umbră: Adevărat,
})
exportclasăMyButton{
 randa() {
întoarcere (
Faceți clic pe mine</button>
 );
 }
}

The styleUrls proprietatea specifică mai multe fișiere CSS externe pentru stilul componentei. Este nevoie de o matrice de valori de șir care reprezintă căile către fișierele CSS:

import { Componentă, h } din„@stencil/core”;
@component({
 etichetă: „butonul meu”,
 styleUrls: [„my-button.css”, „other-button.css”],
 umbră: Adevărat,
})
exportclasăMyButton{
 randa() {
întoarcere (
Faceți clic pe mine</button>
 );
 }
}

Redarea componentei web

După ce ați creat componenta web, o puteți reda într-un fișier HTML adăugând o etichetă de element personalizat. Iată cum puteți include componenta my-button:

html>
<htmldir="ltr"lang="ro">
<cap>
<metaset de caractere="utf-8" />
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0” />
<legăturăhref=""rel="foaia de stil">
<titlu>Starter componentă a șablonuluititlu>
<scenariutip="modul"src=„/build/first-stencil-project.esm.js”>scenariu>
<scenariunomodulesrc=„/build/first-stencil-project.js”>scenariu>
cap>
<corp>
<butonul-meu>butonul-meu>
corp>
html>

Acum puteți crea componente web folosind Stencil.js

Stencil.js este un instrument puternic pentru construirea de componente web care sunt rapide, eficiente și scalabile. API-ul și instrumentele sale facilitează crearea și gestionarea componentelor web, iar compatibilitatea sa cu toate browserele moderne asigură că componentele dvs. vor funcționa bine în diferite aplicații web.

Pe măsură ce componentele web devin din ce în ce mai populare, Stencil.js este un cadru pe care ar trebui să îl luați în considerare atunci când construiți elemente reutilizabile pentru web.