Giriş: Svelte ile Tanışın!
Web geliştirme dünyasında en heyecan verici gelişmelerden biri, son yıllarda Svelte'in yükselişi oldu. Birçok geliştirici, React veya Vue gibi büyük framework’lerden sıkıldı ve daha hızlı, daha verimli bir çözüm arıyordu. İşte bu noktada Svelte devreye giriyor! Hızlı, hafif ve kullanımı oldukça basit olan Svelte, geliştiricilerin daha az kodla daha fazla iş yapabilmelerine olanak tanıyor.
Bu yazımızda, Svelte’in kurulumunu nasıl yapacağınızı ve ilk uygulamanızı nasıl yazacağınızı adım adım keşfedeceğiz. Hazırsanız, gelin başlayalım!
1. Svelte’i Kurma Adımları
Svelte ile geliştirme yapmaya başlamak oldukça basit. Tek yapmanız gereken birkaç komutla gerekli araçları kurmak. İşte ilk adımlar:
- Node.js ve npm’in bilgisayarınızda yüklü olması gerekiyor. Eğer yoksa, [Node.js'in resmi sitesinden](https://nodejs.org/) indirip kurabilirsiniz.
Şimdi, terminal veya komut istemcisini açın ve aşağıdaki adımları takip edin:
#### Adım 1: Yeni bir Svelte Projesi Başlatın
Yeni bir Svelte projesi başlatmak için, aşağıdaki komutu terminalinize yazın:
npx degit sveltejs/template svelte-app
Bu komut, Svelte’in temel şablonunu indirecek ve "svelte-app" adında yeni bir klasör oluşturacaktır.
#### Adım 2: Gerekli Paketleri Yükleyin
Projenize giriş yaptıktan sonra, gerekli bağımlılıkları yüklemek için şu komutu kullanın:
cd svelte-app
npm install
#### Adım 3: Geliştirme Sunucusunu Başlatın
Şimdi her şey hazır! Geliştirme sunucusunu başlatmak için şu komutu yazın:
npm run dev
Bu komut, projenizi çalıştıracak ve genellikle http://localhost:5000 adresinde görüntüleyebileceksiniz.
İşte bu kadar! Svelte, hızlı bir şekilde kurulmuş ve çalışır durumda.
2. İlk Svelte Uygulamanızı Yazmak
Şimdi, kurulum bittiğine göre, basit bir “Merhaba Dünya” uygulaması yazalım. Bu uygulama, ilk başta Svelte ile ilgili temel yapı taşlarını anlamanızı sağlayacak.
Svelte’in en güçlü özelliklerinden biri, bileşen tabanlı yapısıdır. Her bileşen bir `.svelte` dosyasıdır ve HTML, CSS ve JavaScript kodlarını içinde barındırır. İşte basit bir örnek:
Öncelikle, `src/App.svelte` dosyasını açın ve aşağıdaki kodu yazın:
Merhaba {name}!
Yukarıdaki kod parçası, çok basit ama etkili bir uygulama oluşturuyor. Bu uygulama, "Merhaba Dünya" yazısını ekrana bastıracak ve butona tıklandığında metni "Svelte" olarak değiştirecek.
3. Projenizi Çalıştırma ve Test Etme
Projenizi çalıştırmak için terminalde şu komutu kullanabilirsiniz:
npm run dev
Artık tarayıcınızda http://localhost:5000 adresine giderek uygulamanızın çalıştığını görebilirsiniz! Butona tıklayın ve "Merhaba Svelte!" yazısının ekrana çıktığını görün.
4. Svelte'in Güçlü Özelliklerine Göz Atalım
Svelte ile ilgili bazı temel özelliklere de göz atalım:
- Bileşenler: Her şey bir bileşen! Her `.svelte` dosyası, bağımsız bir bileşen olarak kullanılabilir.
- Minimal Kod: Svelte, diğer framework’lerin aksine sanal DOM kullanmaz. Bu, daha az kod yazılmasını ve daha hızlı uygulamalar geliştirilmesini sağlar.
5. Sonuç
Svelte ile ilk uygulamanızı yazmak çok kolay ve eğlenceli. Kısa sürede güçlü uygulamalar geliştirebilirsiniz. Hem performansı hem de geliştirici dostu yapısıyla Svelte, web geliştirme dünyasında önemli bir yer ediniyor.
---
**
