Web geliştiricisi olma yolunda ilk adımlarınızı atarken karşınıza çıkan birçok farklı framework ve kütüphane vardır. Ancak son zamanlarda geliştiricilerin dikkatini çeken bir framework var: Svelte. Peki, bu framework’i popüler kılan nedir? Svelte, diğer JavaScript framework’lerinden farklı olarak, çalışma zamanında değil, geliştirme sırasında çalışır. Yani uygulamanızın kodu, derleme sürecinde optimize edilir ve çok hızlı çalışır. Bu da Svelte’i, minimal bir yapı arayan geliştiriciler için cazip kılar. Hadi, gelin Svelte ile ilk uygulamamızı nasıl yazacağımıza birlikte göz atalım!
Svelte Kurulumu – Adım Adım Rehber
İlk olarak, Svelte’i bilgisayarımıza kurmamız gerekiyor. Bu adımda, birkaç kolay adımla Svelte'in ne kadar basit ve kullanıcı dostu olduğunu göreceğiz. İşte yapmanız gerekenler:
1. Node.js’i Kurun: Eğer bilgisayarınızda henüz kurulu değilse, Node.js’i [resmi web sitesinden](https://nodejs.org/) indirip kurmalısınız. Node.js, JavaScript’i çalıştırmak için temel gerekliliklerden biridir.
2. Svelte Projesi Başlatma: Şimdi terminali açın ve yeni bir proje başlatmak için şu komutu yazın:
npx degit sveltejs/template svelte-app
Bu komut, Svelte’in temel şablonunu bilgisayarınıza indirir ve "svelte-app" adında yeni bir klasör oluşturur.
3. Proje Klasörüne Girin: Şimdi yeni oluşturduğumuz projeye geçiş yapalım:
cd svelte-app
4. Bağımlılıkları Yükleme: Projeniz için gerekli olan tüm bağımlılıkları yüklemek için şu komutu çalıştırın:
npm install
5. Uygulamayı Başlatın: Bağımlılıkların yüklendiğinden emin olduktan sonra, uygulamayı başlatmak için şu komutu kullanın:
npm run dev
Tarayıcınızda localhost:5000 adresine giderek, artık Svelte’in “Hello World” uygulamasını görebilirsiniz!
İlk Svelte Uygulamanızı Yazalım
Şimdi, kurulum tamamlandı, sıra geldi ilk Svelte uygulamamızı yazmaya. İlk adımda, basit bir "Merhaba Dünya" uygulaması yapacağız.
1. App.svelte Dosyasını Düzenleyin: Projeyi açın ve src/App.svelte dosyasını bulun. Bu dosya, Svelte uygulamanızın ana bileşeni olacak. Aşağıdaki kodu buraya yapıştırın:
Merhaba {name}!
Burada ne yaptık? `