Memahami komponen di Astro JS sebenarnya sangat mudah jika kita membayangkannya seperti mainan Lego. Komponen adalah potongan balok kecil yang bisa kita gunakan berulang kali untuk membangun sesuatu yang besar.
Mari kita bedah konsep komponen Card di Astro, cara menggunakannya, dan bagaimana memindahkan logika dari index.astro ke dalam Card tersebut.
1. Apa itu Komponen Card di Astro?
Komponen Card biasanya digunakan untuk menampilkan ringkasan informasi yang berulang, seperti daftar produk, portofolio, atau daftar postingan blog.
Alih-alih menulis struktur HTML yang sama berulang-ulang untuk setiap postingan di file utama (index.astro), kita membuat satu cetakan (template) bernama Card.astro, lalu mengirimkan data yang berbeda-beda ke dalamnya melalui Props (properti).
2. Cara Membuat dan Menggunakan Komponen Card
Mari kita praktikkan alur pembuatannya. Biasanya, komponen diletakkan di dalam folder src/components/.
Langkah Awal: Membuat Card.astro
Buat file baru di src/components/Card.astro. Komponen ini bertugas menerima data (judul dan tautan) lalu menampilkannya.
---
// src/components/Card.astro
// 1. Definisikan Props yang akan diterima oleh Card ini
const { title, url } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<a href={url}>Baca Selengkapnya →</a>
</div>
<style>
.card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
a {
color: #0070f3;
text-decoration: none;
}
</style>
3. Apakah kode di index.astro untuk menampilkan judul dipindah ke Card?
Ya, betul sekali! Logika HTML untuk menampilkan judul dan detail postingan dipindahkan ke dalam Card.astro.
Namun, file index.astro (halaman utama) tetap memegang kendali untuk mengambil data (misalnya via API atau Markdown lokal) dan melakukan looping (perulangan) menggunakan .map().
Berikut adalah perubahan cara penulisan di index.astro:
Sebelum Menggunakan Card (Semua menumpuk di index.astro):
---
// src/pages/index.astro
// Contoh data postingan (bisa dari API Shopify, Sanity, atau Markdown)
const allPosts = [
{ title: "Mengenal Astro JS", url: "/blog/mengenal-astro" },
{ title: "Teori Dasar Listrik", url: "/blog/dasar-listrik" }
];
---
<html>
<body>
<h1>Blog Saya</h1>
{allPosts.map((post) => (
<div class="post-Lama">
<h2>{post.title}</h2>
<a href={post.url}>Baca Selengkapnya</a>
</div>
))}
</body>
</html>
Sesudah Menggunakan Card (Lebih bersih dan rapi):
---
// src/pages/index.astro
// 1. Import komponen Card yang sudah kita buat tadi
import Card from '../components/Card.astro';
const allPosts = [
{ title: "Mengenal Astro JS", url: "/blog/mengenal-astro" },
{ title: "Teori Dasar Listrik", url: "/blog/dasar-listrik" }
];
---
<html>
<body>
<h1>Blog Saya</h1>
{allPosts.map((post) => (
<Card title={post.title} url={post.url} />
))}
</body>
</html>
Analogi Sederhananya:
index.astroadalah Manajer Gudang: Dia yang tahu daftar semua barang (data postingan), lalu membagikan tugas ke anak buahnya menggunakan perintah.map().Card.astroadalah Anak Buah: Dia tidak tahu ada berapa banyak total postingan di gudang. Tugas dia hanya menerima satu paket data (titledanurl) dari Manajer, lalu membungkusnya ke dalam kotak HTML yang rapi sesuai instruksi.
Dengan cara ini, jika di kemudian hari Anda ingin mengubah tampilan kotak postingan (misalnya menambah gambar atau mengubah warna teks), Anda hanya perlu mengubah file Card.astro saja, tanpa perlu mengotak-atik file halaman utama Anda.