Svelte, modern frontend geliştirme dünyasında kendine sağlam bir yer edinmiş bir framework. React ve Vue gibi popüler alternatiflerin arasına adını altın harflerle yazdırmayı başardı. Svelte’in en büyük farkı, çalıştırılabilir JavaScript'i derleme aşamasında üretmesidir. Bu, tarayıcıda daha hızlı ve hafif bir uygulama deneyimi sunar. Eğer Svelte ile ilgili yeniyseniz ve adım adım bir uygulama geliştirmeyi öğrenmek istiyorsanız, doğru yerdesiniz. Hadi, Svelte’i kurmaya ve ilk uygulamamızı yazmaya başlayalım!

1. Adım: Svelte Kurulumu

Svelte’i kurmak oldukça basit. Başlamak için sadece birkaç komutla işe koyulabiliriz. İlk olarak, bilgisayarınızda Node.js’in kurulu olması gerekiyor. Eğer Node.js’in kurulu değilse, [buradan](https://nodejs.org/) indirip kurabilirsiniz.

Kurulum işlemi için terminal veya komut satırını açıyoruz ve aşağıdaki komutu giriyoruz:

npm init svelte@next

Bu komut, Svelte projemizi başlatmak için gerekli dosyaları indirir. Ardından, terminalde birkaç soru ile karşılaşacaksınız. Burada, projeniz için bir isim belirlemenizi isteyecek. Bu soruya uygun bir cevap verin ve devam edin.

2. Adım: Projeyi Çalıştırma

Kurulum tamamlandıktan sonra, proje dizinine geçmek için terminalde şu komutu yazıyoruz:

cd proje-adi

Şimdi projenin bağımlılıklarını yüklemek için şu komutu çalıştırıyoruz:

npm install

Yükleme tamamlandıktan sonra, projeyi başlatmak için şu komutu kullanabilirsiniz:

npm run dev

Eğer her şey doğru bir şekilde kurulduysa, terminalde şu mesajı görmelisiniz:

Local: http://localhost:5173

Bunu tarayıcınızda açtığınızda, Svelte’in varsayılan uygulamasını görmelisiniz. Evet, artık hazırız!

3. Adım: İlk Svelte Uygulamamızı Yazmak

Şimdi, basit bir uygulama yazma vakti. İlk projemizde bir "Merhaba Dünya" mesajı göstereceğiz.

İlk olarak, `src/routes/index.svelte` dosyasını açıyoruz ve içine şu kodu yazıyoruz:

{mesaj}

Bu basit kod parçası, bir `mesaj` değişkeni tanımlar ve bunu HTML içeriğine yerleştirir. `{mesaj}` ifadesi, Svelte’in değişkenleri doğrudan HTML içinde dinamik olarak yerleştirme şeklini gösterir. Şimdi tarayıcınızı tekrar yenileyin ve "Merhaba Svelte!" mesajınızı görün!

4. Adım: Uygulamanıza Stil Eklemek

Svelte ile stil eklemek çok basit! Bir bileşenin içine stil eklemek için sadece `

Yukarıdaki stil ile başlık rengini kırmızımsı bir ton yaparız ve metni ortalarız. Svelte’in kendine has özelliklerinden biri de stilin yalnızca bu bileşende geçerli olmasıdır. Yani başka bileşenlerde bu stil uygulanmaz.

5. Adım: Uygulamayı Geliştirmek

Svelte ile uygulama geliştirmek oldukça keyifli ve hızlı. Her değişiklikte sayfa otomatik olarak yenilenir, bu da geliştirme sürecini çok daha hızlı hale getirir. Örneğin, kullanıcıdan veri almak için bir form ekleyebilirsiniz.

Gönder

Bu küçük uygulama, bir kullanıcı adı alır ve "Gönder" butonuna tıklandığında, kullanıcının adını içeren bir alert penceresi gösterir.

Sonuç: Neden Svelte?

Svelte’in hızla popülerleşmesinin arkasındaki en büyük neden, geliştiricilere sunduğu sadelik ve performans. Tarayıcıda çalışan uygulamalar daha hızlı çünkü Svelte, gereksiz runtime kodlarını ortadan kaldırır. Ayrıca, Svelte’in öğrenilmesi çok kolaydır ve geliştiriciler için kod yazma deneyimini keyifli hale getirir. Bu yazıda, Svelte’in kurulumu ve ilk uygulamanızı yazmayı öğrendiniz. Şimdi, Svelte dünyasında daha derinlere inebilir ve projelerinizi hızla geliştirebilirsiniz!