Panduan Pemula untuk Web Components Dalam ReactJS

Hai sana, para pengembang yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia ReactJS dan Web Components. Sebagai guru komputer tetangga yang ramah, saya di sini untuk menghidahkanmu melalui petualangan ini, langkah demi langkah. Jangan khawatir jika Anda baru saja memulai dalam pemrograman – kita akan mulai dari dasar dan naik tingkat per tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalam!

Apa Itu Web Components?

Sebelum kita melompat ke penggunaan Web Components dalam React, mari kitaahui apa sebenarnya Web Components itu. Bayangkan Anda membangun sebuah rumah (website kita) dengan batu-batu Lego (kode kita). Web Components adalah seperti potongan Lego khusus yang Anda dapat buat sekali dan gunakan berulang-ulang di berbagai rumah (website) tanpa perlu membangunnya lagi setiap kali.

Web Components adalah set web platform APIs yang memungkinkan Anda membuat elemen khusus yang dapat digunakan kembali. Mereka mengembalikan fungsionalitas mereka, membuat mereka mudah untuk dibagikan di antara proyek dan kerangka kerja yang berbeda.

Mengapa Menggunakan Web Components Dalam React?

Sekarang, Anda mungkin bertanya-tanya, " Mengapa harus bermasalah dengan Web Components saat saya menggunakan React?" Pertanyaan yang bagus! React sangat bagus untuk membangun antarmuka pengguna, tetapi kadang-kadang Anda mungkin ingin menggunakan komponen yang netral terhadap kerangka kerja atau berbagi komponen Anda dengan pengembang yang tidak menggunakan React. Ini tempat Web Components berlimpah!

Memulai: Menyiapkan Proyek React Anda

Ayo mulai dengan membuat proyek React baru. Jangan khawatir, saya akan mengantarkan Anda setiap langkah!

1. Buka terminal Anda (jangan takut, ini hanya cara teks untuk berbicara dengan komputer Anda).
2. Jalankan perintah berikut:

npx create-react-app my-web-components-app
cd my-web-components-app

Ini akan membuat aplikasi React baru dan memindahkan Anda ke direktori proyek. Itu seperti menyiapkan dasar untuk rumah Lego kita!

Membuat Web Component Pertama Anda

Sekarang, mari kita buat Web Component pertama kita. Kita akan membuat komponen kartu pengantar sederhana.

Buat sebuah file baru ber nama GreetingCard.js di folder src dan tambahkan kode berikut:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
</style>
<div class="card">
<h2>Hello, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

mari kitauraikan ini:

1. Kita membuat kelas GreetingCard yang mengextend HTMLElement. Ini seperti membuat blueprint untuk potongan Lego khusus kita.
2. Dalam constructor, kita membuat shadow DOM. Pergunakan ini seperti ruangan pribadi untuk komponen kita di mana gaya-gaya mereka tidak akan bocor dan mempengaruhi halaman lain.
3. Metode connectedCallback dipanggil saat komponen kita ditambahkan ke halaman. Di sini, kita menyiapkan struktur HTML dan gaya untuk kartu kita.
4. Akhirnya, kita mendaftarkan komponen baru kita dengan customElements.define. Ini memberitahu browser, "Hey, saat Anda melihat tag <greeting-card>, gunakan blueprint ini untuk membuatnya!"

Menggunakan Web Component Dalam React

Sekarang kita punya Web Component, mari kita gunakan itu dalam aplikasi React kita. Buka src/App.js dan ganti isinya dengan:

import React from 'react';
import './GreetingCard';

function App() {
return (
<div className="App">
<h1>My Web Components App</h1>
<greeting-card name="React Developer"></greeting-card>
</div>
);
}

export default App;

Di sini yang terjadi:

1. Kita mengimpor komponen GreetingCard kita (ini mendaftarkannya ke browser).
2. Dalam komponen App kita, kita gunakan tag <greeting-card> seperti elemen HTML lainnya.
3. Kita memberikan atribut name ke komponen kita, yang digunakan untuk personalisasi salam.

Menjalankan Aplikasi Anda

Waktunya melihat kreasimu dalam aksi! Dalam terminal Anda, jalankan:

npm start

Ini akan menjalankan aplikasi React Anda. Buka browser Anda dan buka http://localhost:3000. Anda seharusnya melihat kartu pengantar Anda ditampilkan di halaman!

Menambah Interaktivitas ke Web Component Anda

Mari kita buat kartu pengantar kita sedikit lebih interaktif. Kita akan menambah tombol yang mengubah salam saat diklik.

Perbarui file GreetingCard.js Anda:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Hello', 'Bonjour', 'Hola', 'Ciao', 'Konnichiwa'];
this.currentGreeting = 0;
}

connectedCallback() {
this.render();
this.shadowRoot.querySelector('button').addEventListener('click', () => this.changeGreeting());
}

changeGreeting() {
this.currentGreeting = (this.currentGreeting + 1) % this.greetings.length;
this.render();
}

render() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="card">
<h2>${this.greetings[this.currentGreeting]}, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
<button>Change Greeting</button>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

Dalam versi ini:

1. Kita menambahkan array salam dan metode untuk berputar melalui mereka.
2. Metode render sekarang menghandle penciptaan konten HTML.
3. Kita menambahkan tombol ke kartu dan event listener untuk mengubah salam saat tombol diklik.

Kesimpulan

Selamat! Anda baru saja membuat Web Component pertama Anda dan menggunakannya dalam aplikasi React. Ini hanya permulaan kekuatan Web Components dan React bersamaan.

Ingat, belajar pemrograman seperti membangun dengan Lego – mulai dari dasar, dan segera Anda akan membuat struktur yang menakjubkan. Terus latih, tetap curiga, dan jangan takut untuk mencoba eksperimen!

Berikut adalah tabel yang menguraikan metode utama yang kita gunakan dalam Web Component kita:

Metode	Deskripsi
constructor()	Inisialisasi komponen dan mensetup shadow DOM
connectedCallback()	Dipanggil saat komponen ditambahkan ke DOM
render()	Membuat konten HTML untuk komponen
changeGreeting()	Memperbarui salam yang ditampilkan dalam komponen

Selamat coding, pengembang web masa depan!

Credits: Image by storyset