Belajar Loop Data Svelte yang Berjalan di AstroJS

JagoTekno.com - Kali ini saya ingin mencatat bagaimana cera menampilkan data secara loop dengan menggunakan Svelte component yang berjalan di atas projekan Astro JS.

1. Pastikan sudah add Svelte ke Astro

npx astro add svelte

2. Setelah itu buka file ./package.json lalu pastikan svelte sudah terinstall.

3. Jika perlu hapus file ./package-lock.json lalu install dengan perintah npm install.

4. Sekarang buat component yang berisi list data di /src/components/Listdata.svelte, lalu isi dengan codingan ini:

<script>
  let items = ['halo', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

5. Sekarang panggil components tersebut pada file mana saja yang diinginkan. Di sini saya membuat file baru bernama /src/pages/loop.svelte lalu isi dengan kodingan ini:

---
import Gallery from '../components/ListData.svelte';
---
<h1>List data</h1>
<Gallery />

6. Jalankan server npm run dev dan anda akan melihat hasilnya di layar.

Demikian cara menampilkan data array pada Svelte yang berjalan di atas Astro JS.

Disini kita sekalian belajar bagaimana cara setup / menambahkan Svelte pada Astro JS untuk membuat komponen tertentu.

Semoga bermanfaat.