Svelte ile İlk Uygulamanızı Yazın: Adım Adım Kurulum ve Rehber

---

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!

Gereksinimler:
- 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:

kopyala
npx degit sveltejs/template svelte-app
Shell

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:

kopyala
cd svelte-app
npm install
Shell

#### 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:

kopyala
npm run dev
Shell

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.

#### İlk Svelte Bileşeninizi Oluşturun
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:

kopyala
let name = "Dünya";



Merhaba {name}!
 name = "Svelte"}>Svelte'i Seç!



h1 {
  color: #ff3e00;
  font-size: 3rem;
  text-align: center;
}

button {
  display: block;
  margin: 0 auto;
  padding: 1rem;
  background-color: #ff3e00;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #e63946;
}
Markup

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.

kopyala
npm run dev
Shell

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.

- Reaktif Değişkenler: Svelte, değişkenlerinizi takip eder ve değerleri güncelleyerek DOM'u otomatik olarak yeniden render eder. Bu, geliştiricinin işini çok kolaylaştırır.
- 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.

Eğer daha fazla bilgi edinmek isterseniz, [Svelte’in resmi sitesine](https://svelte.dev) göz atabilirsiniz. Her zaman pratik yapın, yeni şeyler öğrenin ve uygulamalarınızı geliştirin!

---

**