State (Durum) Kavramına Giriş
Web uygulamaları sadece statik yapılar değildir. Her uygulamanın bir “anlık hali” vardır. Bu hale state yani durum denir.
State, bir uygulamanın o anda ne durumda olduğunu ifade eder. Bu bazen bir sayı, bazen bir yazı, bazen de bir kullanıcı bilgisi olabilir.
Bu derste state kavramı basit bir sayaç üzerinden anlatılır.
https://www.udemy.com/course/ai-ile-aha-html-ile-her-seyi-yaparsn-sor-ogren-uret/
Sayaç Mantığı: En Basit State Modeli
Bir sayaç uygulaması, state kavramını anlamak için en sade örneklerden biridir. Çünkü sistemin tek bir değişkeni vardır: sayı.
Bu sayının:
- Artması
- Azalması
- Gösterilmesi
state yönetiminin temelini oluşturur.
State’in Rolü: Uygulamanın Anlık Hafızası
State, uygulamanın o anki değerini tutar. Bu değer değiştikçe ekran da değişir.
Örneğin:
- Başlangıçta 0
- butonuna basınca artar
- butonuna basınca azalır
Bu değişimler state’in güncellenmesiyle olur.
AI ile Basit Sayaç Tasarımı
Bu aşamada amaç karmaşık sistemler değil, sade bir etkileşim kurmaktır.
İstenen yapı:
- Bir artı butonu
- Bir eksi butonu
- Sayıyı gösteren bir alan
- Sayının artıp azalması
Bu yapı, state mantığının en temel halidir.
Kursiyerin Uygulama Süreci: İlk Durum Yönetimi
Öğrenci bu aşamada tek dosya içinde çalışan bir yapı oluşturur.
Süreç:
- HTML dosyası oluşturulur
- Butonlar eklenir
- Sayı alanı tanımlanır
- JavaScript ile artma/azalma mantığı eklenir
- Dosya çalıştırılır
Bu adım sonunda ilk state sistemi aktif hale gelir.
Butonlarla Canlı Değişim: Anlık Güncelleme
Butonlara basıldığında:
- Sayı artar
- Sayı azalır
- Ekran anında güncellenir
Bu, state’in en temel çalışma mantığıdır.
Sayfa Yenilendiğinde Ne Olur?
Bu sistemde önemli bir gözlem yapılır:
- Sayfa yenilenirse sayı sıfırlanır
- Çünkü state geçici olarak tutulur
- Hafıza kalıcı değildir
Bu, frontend dünyasında state’in en temel özelliğidir.
Aha! Anı: Uygulamanın Aklı
Bu dersin en önemli farkındalığı şudur:
- State, uygulamanın anlık aklıdır
- Değiştikçe sistem davranış değiştirir
- Yenilendiğinde bu akıl sıfırlanır
Bu, dinamik uygulamaların temelidir.
State Metaforu: Canlı Bir Zihin
State kavramı şöyle düşünülebilir:
- Sayı = düşünce
- Buton = tetikleyici
- Ekran = dışa vurum
Bu yapı sayesinde uygulama “canlı” gibi davranır.
Sonuç: İlk Durum Yönetimi Deneyimi
Bu basit sayaç uygulaması, frontend geliştirmede en önemli kavramlardan birini öğretir.
Bu aşamada öğrenci:
- State kavramını öğrenir
- Anlık veri değişimini görür
- Dinamik UI mantığını anlar
Bu adım, üretici zihnin “durum yönetimi” seviyesine giriş noktasıdır.