Bu blog yazısında, Svelte ile web uygulaması yapmanın temellerini adım adım anlattım. Svelte'in avantajları, kurulumu ve temel bileşenlerini ele aldım. Svelte hakkında daha fazla bilgi edinmek için yazıyı okuyabilirsiniz.
BFS
Web geliştiricisi olarak, her zaman yeni teknolojilere göz atmak ve projelerde kullanabileceğimiz en verimli araçları keşfetmek isteriz. Bu yazımda, Svelte ile nasıl harika bir web uygulaması yapabileceğinizi anlatacağım. Hadi, Svelte dünyasına adım atalım!
Neden Svelte?
Geliştiriciler olarak, daha hızlı, daha verimli ve daha kolay geliştirme deneyimi sunan araçlar ararız. React ve Vue gibi popüler çerçeveler, uygulamaların çalışmasını sağlamak için bir 'sanatifiye' (virtual DOM) kullanırken, Svelte'in farkı, bu sanatı bir kenara bırakıp, derleme zamanında doğrudan gerçek DOM'a dönüşmesi. Evet, doğru duydunuz! Svelte, yalnızca uygulamanızı yazmakla kalmaz, aynı zamanda optimize edilmiş ve hızlı bir hale getirir.
# Başlayalım: Svelte Kurulumu
Svelte ile projeye başlamak çok basit. İlk olarak, Node.js'in yüklü olduğundan emin olun. Eğer Node.js'i kurmadıysanız, [Node.js Resmi Web Sitesi](https://nodejs.org/) üzerinden kolayca kurabilirsiniz.
Şimdi, Svelte projemizi başlatmak için terminal ya da komut satırına aşağıdaki komutu girin:
Bu komut, Svelte'in resmi şablonunu projenize kopyalar. Ardından proje dizinine girin:
```bash cd svelte-web-app ```
Ve gerekli bağımlılıkları yüklemek için:
```bash npm install ```
Artık, geliştirmeye başlamak için her şey hazır!
# İlk Komponentimizi Oluşturuyoruz
Svelte'in en güçlü özelliklerinden biri de component tabanlı yapı. Her bir parçayı bir komponent olarak ele alabiliriz. Mesela basit bir "Merhaba Dünya" komponenti oluşturalım.
Proje dizininde, `src/App.svelte` dosyasını açın. Şimdi içerisine şu kodları ekleyin:
{mesaj}
Bu kadar! Artık bir butona tıklandığında, mesajın değişmesini sağladık. Svelte'in ne kadar basit ve eğlenceli olduğunu görüyorsunuz, değil mi?
# Verilerle Çalışmak
Svelte, verileri işlemek ve kullanıcı etkileşimleriyle güncellemek konusunda gerçekten etkili. Daha karmaşık uygulamalarda, veri akışını yönetmek ve state (durum) bilgilerini tutmak önemli hale gelir. Svelte, durumu doğrudan komponent içinde tutmanıza olanak sağlar ve bu da uygulamanızın daha hızlı çalışmasını sağlar.
Svelte ile Routing (Yönlendirme)
Bir web uygulaması oluştururken, sayfalar arasında gezinmek de önemlidir. Svelte, bunun için harika bir yönlendirme (routing) sistemine sahiptir.
Bir yönlendirme kütüphanesi olan `svelte-routing` kullanarak, sayfalar arasında geçiş yapabiliriz. İlk olarak, bu kütüphaneyi projeye dahil edelim:
```bash npm install svelte-routing ```
Ardından, sayfalar arasında geçiş yapabilmek için `src/App.svelte` dosyasını şu şekilde güncelleyelim:
Ana Sayfa
Hakkımızda Sayfası
Böylece sayfalar arasında gezinebileceksiniz! Gerçekten basit değil mi?
Svelte ile Stil Verme
Svelte'in en güzel yönlerinden biri de, stilleri komponent içinde doğrudan tanımlayabilmenizdir. Yukarıdaki örneklerde olduğu gibi, `
