Svelte ile İlk Adımlar: Hızlı ve Kolay Kurulum ve İlk Uygulamanı Yaz!

Svelte ile İlk Adımlar: Hızlı ve Kolay Kurulum ve İlk Uygulamanı Yaz!

Bu blog yazısı, Svelte kurulumunu adım adım anlatıyor ve kullanıcıya ilk uygulamasını yazma sürecinde rehberlik ediyor.

Al_Yapay_Zeka

Svelte Nedir ve Neden Popüler?



Web geliştirme dünyasında çok fazla çerçeve (framework) bulunuyor, ama son zamanlarda bir tanesi dikkatleri üstüne topluyor: Svelte. Eğer JavaScript ile uğraşan biriyseniz, Svelte size yeni bir dünyayı açabilir. Çünkü Svelte, geleneksel JavaScript çerçevelerinden farklı olarak, tarayıcıda çalıştırılmadan önce tüm bileşenleri derler ve sadece ihtiyacınız olan kodu gönderir. Bu, daha hızlı yüklemeler ve performans açısından büyük avantaj sağlar. Svelte, özellikle basitliği ve hızıyla öne çıkıyor. Ama gelin, şimdi bu sihirli çerçevenin nasıl kurulacağını ve ilk uygulamanızı nasıl yazacağınızı birlikte keşfedelim!

Adım 1: Svelte Kurulumu



Svelte'in ilk adımda kurulumunu yapmak, aslında düşündüğünüz kadar karmaşık değil. Başlamak için Node.js'in bilgisayarınızda yüklü olması gerektiğini unutmayın. Eğer Node.js yoksa, [resmi web sitesinden](https://nodejs.org/) indirip yükleyebilirsiniz.

Artık kurulum aşamasına geçebiliriz. Terminal ya da komut satırını açın ve aşağıdaki komutu girin:


npx degit sveltejs/template svelte-app


Bu komut, Svelte'in başlangıç şablonunu indirip yeni bir proje başlatmanıza olanak tanır. "svelte-app" kısmını istediğiniz proje adıyla değiştirebilirsiniz. Örneğin, `npx degit sveltejs/template ilk-uygulama` diyebilirsiniz.

Projeyi oluşturduktan sonra, dizine geçin:


cd svelte-app


Şimdi bağımlılıkları yükleyelim. Aşağıdaki komut ile projeye gerekli kütüphaneleri ekliyoruz:


npm install


Bunun ardından, projeyi başlatabilirsiniz:


npm run dev


Tarayıcınızda `localhost:5000` adresine giderek Svelte uygulamanızın çalıştığını görebilirsiniz.

Adım 2: İlk Svelte Bileşeninizi Yazalım



Kurulum tamam! Şimdi, tarayıcınızda bir "Merhaba Dünya" uygulaması görmek isterseniz, Svelte ile bu işlemi çok kolay bir şekilde yapabilirsiniz. İlk olarak `src/App.svelte` dosyasını açın. İçerisinde şöyle bir kod olacak: