Belajar Loop Data Svelte yang Berjalan di AstroJS

begini cara loop data di dengan Svelte component yang berjalan di atas Astro JS.


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
  1. Setelah itu buka file ./package.json lalu pastikan svelte sudah terinstall.

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

  3. 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>
  1. 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 />
  1. 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.

Setup LAMP (Linux, Apache, Mysql, Php) di Nixos
Ditulis oleh Rafi pada Thursday, 28 September 2023
mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

    Share:

Baca juga


comments powered by Disqus