Svelte Memulai Instalasi Struktur Project Reactivity Dasar

Definisi

Svelte adalah framework UI yang meng-compile komponen saat build, bukan menjalankan runtime virtual DOM di browser. Hasilnya: bundle kecil, performa baik, dan kode deklaratif tanpa useState/useEffect seperti di React.

Kapan dipakai

Pakai Svelte untuk aplikasi web yang butuh bundle ringan dan developer experience simpel (kurang boilerplate). Cocok untuk dashboard, widget, hingga SPA penuh. Hindari kalau ekosistem library wajib kamu hanya ada di React/Vue.

Cara kerja

Instalasi (Vite)

bash

npm create vite@latest myapp -- --template svelte
cd myapp
npm install
npm run dev

Struktur file

text

src/
  App.svelte        # root component
  lib/
    Counter.svelte  # komponen reusable
  main.js           # mount ke #app

Komponen minimal

svelte

<script>
  let count = 0;
  function inc() {
    count += 1; // reactivity otomatis saat variabel di-assign
  }
</script>
 
<button on:click={inc}>
  Klik: {count}
</button>

Tidak ada setState; menulis count += 1 langsung memperbarui UI karena Svelte mendeteksi assignment saat compile.

Struktur alur reactivity

Catatan implementasi

• .svelte = komponen: isi <script>, markup HTML, <style> (scoped otomatis).
• Assignment harus bentuk x = ... agar terdeteksi; arr.push() tanpa re-assign tidak trigger update (pakai arr = [...arr, v]).
• npm run build menghasilkan JS murni tanpa runtime Svelte besar.
• Untuk SvelteKit (routing/SSR), pakai npm create svelte@latest.

Kesalahan umum

• Mutasi array/object tanpa re-assign: user.name = 'x' aman, tapi list.push() tidak update; pakai spread atau list = list.
• Berpikir seperti React: menunggu effect untuk update state; di Svelte assignment cukup.
• Lupa <script>: markup tanpa script tidak bisa punya variabel.
• Style global terkena scoped: gunakan :global() bila memang perlu selektor lepas.

Referensi terkait

• Svelte Component Syntax: markup, script, style scoped
• Svelte Reactivity: $, reactive statements, derived state
• React.js Component, Props, State, Render Flow