Cara Membuat Komponen Web Menggunakan Stencil.js

Komponen web adalah sekumpulan teknologi yang memungkinkan Anda membuat elemen yang dapat digunakan kembali dan menggunakannya kembali di berbagai aplikasi web.

Stencil.js adalah kompiler yang menghasilkan komponen web yang kompatibel dengan semua browser modern. Ini menyediakan alat dan API untuk membantu Anda membangun komponen web yang cepat, efisien, dan dapat diskalakan.

Memulai Dengan Stencil.js

Untuk memulai dengan Stencil.js, Anda harus menginisialisasinya terlebih dahulu di komputer Anda.

Lakukan ini dengan menjalankan perintah berikut di terminal node.js Anda:

stensil npm init

Setelah menjalankan perintah, sebuah prompt akan muncul di layar Anda untuk memilih proyek apa yang ingin Anda mulai:

Untuk melanjutkan, pilih opsi komponen, masukkan nama proyek Anda, dan konfirmasi pilihan Anda:

Selanjutnya, ubah ke direktori proyek Anda dan instal dependensi Anda dengan menjalankan perintah berikut:

cd proyek stensil pertama
instal npm

Membuat Komponen Web Baru

Untuk membuat komponen web baru di Stencil.js, buat jalur folder seperti src/komponen. Folder komponen akan berisi file TypeScript yang dinamai menurut komponen Anda, sebagai Stencil.js menggunakan bahasa TypeScript dan BEJ untuk pengembangan komponen. Folder tersebut juga akan berisi file CSS yang berisi gaya komponen Anda.

Misalnya, jika Anda ingin membuat komponen bernama "my-button", buatlah sebuah file bernama my-button.tsx dan file CSS disebut tombol-saya.css. Dalam my-button.tsx file, tentukan komponen Anda menggunakan Stencil.js API:

impor { Komponen, h } dari'@stensil/inti';
@Komponen({
 menandai: 'tombol-saya',
 styleUrl: 'tombol-saya.css',
 bayangan: BENAR,
})
eksporkelasTombol Saya{
 render() {
kembali (
Klik Saya</button>
 );
 }
}

Kode ini mengimpor file Komponen Dan H fungsi dari Stencil.js. Itu Komponen fungsi mendefinisikan komponen, sedangkan H fungsi membuat markupnya menggunakan HTML.

Tentukan komponen Anda menggunakan @Komponen dekorator, yang mengambil objek dengan tiga properti: menandai, styleUrl, Dan bayangan.

Itu menandai properti berisi nama tag komponen. Itu styleUrl properti menentukan file CSS untuk mengatur gaya elemen khusus. Terakhir, the bayangan properti adalah nilai boolean yang menunjukkan apakah komponen akan menggunakan Shadow DOM untuk mengenkapsulasi gaya dan perilaku elemen khusus. Dalam metode render, Anda membuat elemen tombol.

Selain itu styleUrl, Anda dapat menggunakan dua properti lagi untuk mengatur gaya komponen Anda: gaya Dan styleUrls.

Itu gaya properti mendefinisikan gaya sebaris untuk komponen. Dibutuhkan nilai string yang mewakili gaya CSS untuk komponen:

impor { Komponen, h } dari'@stensil/inti';
@Komponen({
 menandai: 'tombol-saya',
 gaya: `
 tombol {
 lapisan: 1rem 0.5rem;
 radius batas: 12px;
 font-family: kursif;
 perbatasan: tidak ada;
 warna: #e2e2e2;
 warna latar belakang: #333333;
 font-berat: tebal;
 }
`,
 bayangan: BENAR,
})
eksporkelasTombol Saya{
 render() {
kembali (
Klik Saya</button>
 );
 }
}

Itu styleUrls properti menentukan beberapa file CSS eksternal untuk menata komponen. Dibutuhkan larik nilai string yang mewakili jalur ke file CSS:

impor { Komponen, h } dari'@stensil/inti';
@Komponen({
 menandai: 'tombol-saya',
 styleUrl: ['tombol-saya.css', 'tombol-lain.css'],
 bayangan: BENAR,
})
eksporkelasTombol Saya{
 render() {
kembali (
Klik Saya</button>
 );
 }
}

Merender Komponen Web

Setelah membuat komponen web, Anda dapat merendernya dalam file HTML dengan menambahkan tag elemen khusus. Inilah cara Anda dapat memasukkan komponen tombol-saya:

html>
<htmldir="ltr"lang="en">
<kepala>
<metacharset="utf-8" />
<metanama="area pandang"isi="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<tautanhref=""rel="lembar gaya">
<judul>Pemula Komponen Stensiljudul>
<naskahjenis="modul"src="/build/first-stencil-project.esm.js">naskah>
<naskahnomodulesrc="/build/first-stencil-project.js">naskah>
kepala>
<tubuh>
<tombol saya>tombol saya>
tubuh>
html>

Sekarang Anda Dapat Membuat Komponen Web Menggunakan Stencil.js

Stencil.js adalah alat yang ampuh untuk membuat komponen web yang cepat, efisien, dan dapat diskalakan. API dan alatnya memudahkan pembuatan dan pengelolaan komponen web, dan kompatibilitasnya dengan semua browser modern memastikan komponen Anda akan bekerja dengan baik di berbagai aplikasi web.

Karena komponen web menjadi semakin populer, Stencil.js adalah kerangka kerja yang harus Anda pertimbangkan saat membuat elemen yang dapat digunakan kembali untuk web.