Merhaba arkadaşlar! Web geliştirme dünyasına yeni bir soluk getiren Svelte ile tanışmaya hazır mısınız? Eğer modern bir JavaScript framework’ü arayışındaysanız ve React ya da Vue.js gibi büyük framework'lerden bıktıysanız, Svelte tam size göre. Svelte ile yazılmış uygulamalar daha hızlı çalışır, daha az kod yazılır ve karmaşıklıktan uzaklaşılır. Hadi, Svelte ile ilk uygulamanızı yapmaya başlayalım!

Svelte Nedir?

Öncelikle, Svelte nedir diye soranlar için kısa bir açıklama yapalım. Svelte, modern bir frontend framework'üdür ve JavaScript, CSS ve HTML’i mümkün olan en verimli şekilde kullanarak hızlı ve hafif uygulamalar oluşturmanıza yardımcı olur. Diğer framework'lerden farklı olarak, Svelte uygulama çalışırken değil, derleme aşamasında tüm işini halleder. Bu sayede daha küçük dosyalar ve hızlı yükleme süreleri elde edersiniz.

Adım Adım Svelte Kurulumu

Svelte, kurulum açısından oldukça basittir. İşte bir Svelte uygulaması oluşturmak için takip etmeniz gereken adımlar:

1. Node.js'i Yükleyin

Eğer Node.js sisteminizde yüklü değilse, ilk adım olarak Node.js’i indirip kurmanız gerekecek. Node.js, JavaScript’i sunucu tarafında çalıştırmanızı sağlar ve Svelte’in düzgün çalışabilmesi için gereklidir.

Node.js’i buradan indirebilirsiniz.

2. Yeni Svelte Projesi Oluşturun

Svelte projesini kurmak için terminal veya komut istemcisine şu komutu girin:

npx degit sveltejs/template svelte-app

Bu komut, yeni bir Svelte şablonu oluşturur ve “svelte-app” adında bir klasör oluşturur. Eğer kendi projenize farklı bir isim vermek isterseniz, “svelte-app” yerine istediğiniz ismi yazabilirsiniz.

3. Bağımlılıkları Yükleyin

Proje klasörünüze girin ve gerekli bağımlılıkları yüklemek için şu komutu yazın:

cd svelte-app
npm install

Bu komut, projenizin gereksinim duyduğu tüm bağımlılıkları yükleyecektir.

4. Uygulamayı Çalıştırın

Her şey hazır! Şimdi uygulamanızı çalıştırmak için şu komutu girin:

npm run dev

Bu komut, geliştirme sunucusunu başlatacak ve tarayıcınızda http://localhost:5000 adresine giderek uygulamanızı görüntüleyebilirsiniz.

İlk Svelte Uygulamanızı Yazın

Svelte ile ilk uygulamanızı yazmaya başlamak çok eğlenceli! Şimdi, basit bir "Merhaba Dünya" uygulaması oluşturalım.

1. App.svelte Dosyasını Düzenleyin

Projenizi kurduktan sonra, “src/App.svelte” dosyasını açın. Burada, temel uygulamanın içeriğini düzenleyeceğiz. Aşağıdaki kodu, dosyanın içine yapıştırın:

  
Merhaba {name}!
  
Svelte ile ilk uygulamanızı yazdınız!
   name = 'Svelte'}>Svelte ile Tanışın!

2. Uygulamanın Açıklaması

Yukarıdaki kodda, basit bir "Merhaba Dünya" uygulaması oluşturdum. Burada, bir değişken olan `name` ile kullanıcıya selam veriyoruz. Ayrıca, bir buton ekleyerek, kullanıcıya butona tıkladıklarında "Svelte ile Tanışın!" mesajını gösterecek şekilde etkileşim sağlıyoruz.

3. Tarayıcıda Görüntüleyin

Şimdi, terminalinizde “npm run dev” komutunu çalıştırarak uygulamanızı tarayıcınızda görüntüleyebilirsiniz. Artık “Merhaba Dünya!” mesajı ve butona tıkladığınızda değişen yazıyı görmelisiniz.

Sonuç

Svelte ile ilk uygulamanızı oluşturmak işte bu kadar kolay! Hem kurulumu hem de geliştirmesi oldukça basit. Svelte, hem hızlı hem de kullanıcı dostu bir framework sunarak size mükemmel bir geliştirme deneyimi sunar. Daha ileri düzeyde özelliklere geçmeden önce, Svelte’in temel kavramlarını öğrendiniz ve ilk uygulamanızı oluşturdunuz.

Öğrendiklerinizi Geliştirin

Bu noktada, öğrendiklerinizi kullanarak daha karmaşık uygulamalar geliştirebilirsiniz. Svelte’in sunduğu reaktif yapıyı ve bileşen tabanlı mimariyi keşfederek projelerinizi büyütebilir, daha dinamik kullanıcı arayüzleri oluşturabilirsiniz.

Svelte ile geliştirme yaparken zamanınız nasıl geçtiğini anlamayacaksınız. Şimdi sizin sıranız! Hadi, yeni projeler yaratın ve kendinizi geliştirin.