Sıfırdan Blazor: Bölüm 2 — İlk Blazor uygulaman

Sıfırdan Blazor serisinin 2. bölümüne hoş geldin. 1. bölümü kaçırdıysan önce onu oku.

Bu bölümde yeni bir Blazor uygulaması oluşturacak, yerelde çalıştıracak ve önemli dosyaların ne yaptığını anlayacağız.

Adım 1: Projeyi oluştur

Terminalde:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Bu komut .NET 9 ile varsayılan yapıda bir Blazor Web App oluşturur.

Araç senden bir etkileşim modeli seçmeni isterse Interactive Server ile başla.

Adım 2: Yerelde çalıştır

Uygulamayı başlat:

dotnet watch

Sonra terminalde görünen URL’yi aç (genelde https://localhost:5xxx). Home, Counter ve Weather sayfalarını görmelisin.

Bu çalışıyorsa ortamın hazır demektir.

Adım 3: Proje yapısını anla

Önce şu dosya ve klasörleri bilmen yeterli:

• Program.cs — servisleri kaydeder ve HTTP pipeline’ını ayarlar.
• Components/App.razor — uygulamanın kök bileşeni.
• Components/Routes.razor — sayfa route eşleştirmesi.
• Components/Pages/ — Home ve Counter gibi route alan sayfalar.
• Components/Layout/ — ortak layout (MainLayout.razor, menü).
• wwwroot/ — statik dosyalar (CSS, görseller, favicon).
• appsettings.json — yapılandırma değerleri.

Bu aşamada her dosyayı detaylı bilmen gerekmiyor. UI nerede ve başlangıç ayarı nerede, bunu bilmek yeterli.

Adım 4: İlk değişikliğini yap

Components/Pages/Home.razor dosyasını açıp içeriği şununla değiştir:

@page "/"

<PageTitle>Sıfırdan Blazor</PageTitle>

<h1>Sıfırdan Blazor</h1>
<p>Bölüm 2 yerelde çalışıyor.</p>

Dosyayı kaydet ve tarayıcıyı yenile. dotnet watch açıkken uygulama hemen güncellenir.

Bu küçük değişiklik tüm döngüyü doğrular: düzenle -> derle -> render et.

Adım 5: Program.cs dosyasını bir kez oku

Ezberlemene gerek yok ama şu satırları tanı:

• AddRazorComponents() Razor bileşenlerini açar.
• AddInteractiveServerComponents() etkileşimli sunucu bileşenlerini açar.
• MapRazorComponents<App>() kök bileşeni endpoint’lere bağlar.

Bu satırlar uygulamanın nasıl açıldığını ve hangi render özelliklerinin aktif olduğunu gösterir.

Yaygın sorunlar

Bir şey bozulursa genelde şunlardan biridir:

• Eski SDK: dotnet --version çalıştır, .NET 9 olduğundan emin ol.
• HTTPS sertifikası: dotnet dev-certs https --trust çalıştır.
• Port çakışması: eski dotnet süreçlerini durdurup tekrar çalıştır.

Sonraki bölüm

Bölüm 3’te bileşenler konusuna derinlemesine gireceğiz: parametreler, kompozisyon ve yeniden kullanılabilir UI yapısı.