{"id":3461,"date":"2026-06-27T06:17:22","date_gmt":"2026-06-27T06:17:22","guid":{"rendered":"https:\/\/regarcomm.com\/?p=3461"},"modified":"2026-06-27T06:20:03","modified_gmt":"2026-06-27T06:20:03","slug":"mengenal-komponen-card-di-astro","status":"publish","type":"post","link":"https:\/\/regarcomm.com\/?p=3461","title":{"rendered":"Mengenal Komponen Card Di Astro"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\n\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\n\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>

Mari kita bedah konsep komponen Card<\/b> di Astro, cara menggunakannya, dan bagaimana memindahkan logika dari index.astro<\/code> ke dalam Card tersebut.<\/p>

1. Apa itu Komponen Card di Astro?<\/h2>

Komponen Card<\/code> biasanya digunakan untuk menampilkan ringkasan informasi yang berulang, seperti daftar produk, portofolio, atau daftar postingan blog<\/b>.<\/p>

Alih-alih menulis struktur HTML yang sama berulang-ulang untuk setiap postingan di file utama (index.astro<\/code>), kita membuat satu cetakan (template<\/i>) bernama Card.astro<\/code>, lalu mengirimkan data yang berbeda-beda ke dalamnya melalui Props<\/b> (properti).<\/p>

2. Cara Membuat dan Menggunakan Komponen Card<\/h2>

Mari kita praktikkan alur pembuatannya. Biasanya, komponen diletakkan di dalam folder src\/components\/<\/code>.<\/p>

Langkah Awal: Membuat Card.astro<\/code><\/h3>

Buat file baru di src\/components\/Card.astro<\/code>. Komponen ini bertugas menerima data (judul dan tautan) lalu menampilkannya.<\/p>

Cuplikan kode<\/span>
\u00a0<\/div><\/div>
---\n\/\/ src\/components\/Card.astro\n\/\/ 1. Definisikan Props yang akan diterima oleh Card ini\nconst { title, url } = Astro.props;\n---\n\n<div class=\"card\">\n  <h2>{title}<\/h2>\n  <a href={url}>Baca Selengkapnya \u2192<\/a>\n<\/div>\n\n<style>\n  .card {\n    border: 1px solid #ccc;\n    padding: 1rem;\n    border-radius: 8px;\n    margin-bottom: 1rem;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  a {\n    color: #0070f3;\n    text-decoration: none;\n  }\n<\/style>\n<\/code><\/pre><\/div><\/div><\/div>
3. Apakah kode di index.astro<\/code> untuk menampilkan judul dipindah ke Card?<\/h2>
Ya, betul sekali!<\/b> Logika HTML untuk menampilkan judul dan detail postingan dipindahkan ke dalam Card.astro<\/code>.<\/p>
Namun, file index.astro<\/code> (halaman utama) tetap memegang kendali untuk mengambil data<\/b> (misalnya via API atau Markdown lokal) dan melakukan looping (perulangan)<\/b> menggunakan .map()<\/code>.<\/p>
Berikut adalah perubahan cara penulisan di index.astro<\/code>:<\/p>
Sebelum Menggunakan Card (Semua menumpuk di index.astro<\/code>):<\/h3>
Cuplikan kode<\/span>
\u00a0<\/div><\/div>
---\n\/\/ src\/pages\/index.astro\n\/\/ Contoh data postingan (bisa dari API Shopify, Sanity, atau Markdown)\nconst allPosts = [\n  { title: \"Mengenal Astro JS\", url: \"\/blog\/mengenal-astro\" },\n  { title: \"Teori Dasar Listrik\", url: \"\/blog\/dasar-listrik\" }\n];\n---\n<html>\n  <body>\n    <h1>Blog Saya<\/h1>\n    \n    {allPosts.map((post) => (\n      <div class=\"post-Lama\">\n        <h2>{post.title}<\/h2>\n        <a href={post.url}>Baca Selengkapnya<\/a>\n      <\/div>\n    ))}\n  <\/body>\n<\/html>\n<\/code><\/pre><\/div><\/div><\/div>
Sesudah Menggunakan Card (Lebih bersih dan rapi):<\/h3>
Cuplikan kode<\/span>
\u00a0<\/div><\/div>
---\n\/\/ src\/pages\/index.astro\n\/\/ 1. Import komponen Card yang sudah kita buat tadi\nimport Card from '..\/components\/Card.astro';\n\nconst allPosts = [\n  { title: \"Mengenal Astro JS\", url: \"\/blog\/mengenal-astro\" },\n  { title: \"Teori Dasar Listrik\", url: \"\/blog\/dasar-listrik\" }\n];\n---\n<html>\n  <body>\n    <h1>Blog Saya<\/h1>\n    \n    {allPosts.map((post) => (\n      <Card title={post.title} url={post.url} \/>\n    ))}\n  <\/body>\n<\/html>\n<\/code><\/pre><\/div><\/div><\/div>
Analogi Sederhananya:<\/h2>