Pengenalan Svelte & Komponen Pertama
Apa itu Svelte, apa bedanya dengan framework lain, cara memulai proyek, anatomi file .svelte, dan membuat komponen pertamamu.
Apa itu Svelte?
Svelte adalah framework untuk membangun antarmuka web yang interaktif. Seperti framework lain, kamu memecah halaman menjadi komponen — balok-balok kecil seperti tombol, kartu, atau menu — lalu menyusunnya menjadi aplikasi utuh.
Yang membuat Svelte istimewa: Svelte adalah compiler. Kode .svelte yang kamu tulis diubah saat build menjadi JavaScript biasa yang sangat efisien. Hasilnya: kode yang kamu tulis sedikit, ukuran file kecil, dan aplikasi terasa cepat.
| Ciri | Artinya buatmu |
|---|---|
| Kode ringkas | Lebih sedikit baris untuk hasil yang sama. Tidak ada boilerplate berlebihan. |
| Reaktif bawaan | Ubah data, tampilan ikut berubah. Tidak perlu fungsi khusus untuk "memberi tahu" framework. |
| CSS ter-scope otomatis | Gaya di sebuah komponen hanya berlaku untuk komponen itu. |
| Dipakai luas | Dipakai banyak perusahaan, dan punya framework aplikasi penuh bernama SvelteKit. |
Svelte 5 dan runes. Kursus ini memakai Svelte 5, versi modern dengan sistem reaktivitas bernama runes — simbol khusus berawalan $ seperti $state dan $derived. Runes membuat perilaku kode lebih jelas dan mudah diprediksi.
Cara memulai proyek
Pasang Node.js (versi 18+) lalu jalankan di terminal:
npx sv create nama-proyek
cd nama-proyek
npm install
npm run devPerintah sv create menanyakan beberapa pilihan (template, TypeScript, dll.). Setelah npm run dev, buka alamat yang tampil (biasanya http://localhost:5173). Setiap kali file disimpan, halaman diperbarui otomatis.
Ingin mencoba tanpa instalasi? Pakai svelte.dev/playground, atau langsung pakai editor di kursus ini.
Anatomi file .svelte
Satu komponen = satu file berakhiran .svelte. File ini bisa berisi tiga bagian, semuanya opsional:
<script>
let pesan = 'Halo dari Svelte!';
</script>
<h1>{pesan}</h1>
<style>
h1 { color: seagreen; }
</style>| Bagian | Isi |
|---|---|
<script> | Logika: variabel, fungsi, impor. Semua yang dideklarasikan di sini bisa dipakai di markup. |
| Markup | Tampilan: HTML biasa ditambah sintaks Svelte seperti {pesan}. Tidak perlu dibungkus tag <template>. |
<style> | CSS yang otomatis ter-scope: hanya berlaku untuk elemen di komponen ini. |
Struktur proyek SvelteKit
nama-proyek/
├─ package.json daftar paket & perintah
├─ svelte.config.js konfigurasi Svelte
├─ vite.config.js konfigurasi Vite (build tool)
└─ src/
├─ routes/ halaman aplikasi (satu folder = satu alamat)
│ └─ +page.svelte halaman utama
└─ lib/ komponen & kode yang dipakai ulangCara kerja latihan di kursus ini
- Editor berisi file
App.svelte. Kamu menulis satu komponen utuh. - Saat menekan Jalankan, komponenmu dikompilasi dengan compiler Svelte 5 asli, dirender di browser, lalu dicek otomatis.
- Impor dari Svelte ditulis seperti biasa:
import { onMount } from 'svelte'. - Bab yang butuh banyak file memakai pemisah
<!-- file: Nama.svelte -->— akan dijelaskan saat dibutuhkan.
Kesalahan umum pemula
- Lupa menutup tag, misalnya
<h1>Halotanpa</h1>. Compiler akan menolaknya. - Menulis
{pesan}tetapi variabelpesanbelum dideklarasikan di<script>. - Mengira Svelte butuh
thisataurender()— tidak perlu. Variabel biasa langsung bisa dipakai di markup.