Bu çalışma React ve Express ile Uygulamalı TypeScript - Notlarım Projesi eğitiminde geliştirilen örnek projeyi anlatır. Not oluşturma, güncelleme ve silme akışlarında TypeScript modellerini, React formlarını ve Express doğrulamasını birlikte kullan.
Başlamadan önce
Temel JavaScript, React bileşenleri ve Node.js/Express bilgisi. Eğitimdeki başlangıç bölümünden TypeScript tekrarına ulaşabilirsin.
Kullanılan teknolojiler
TypeScript, React, Express, Zod.
Eğitimde ele alınan özellikler
- Not veri modeli ve oluşturma/güncelleme sözleşmeleri
- Tip güvenli React bileşenleri ve kontrollü formlar
- State üzerinde oluşturma, güncelleme ve silme
- Express route/controller yapısı, Zod ve merkezi hata yönetimi
Projeyi hangi adımlarla geliştirebilirsin?
- React ve Express geliştirme ortamlarını TypeScript ile kur. Ortak veri modelinin alanlarını ve hangi alanların isteğe bağlı olduğunu tanımla.
- Form ve liste bileşenlerini oluştur. Kullanıcının girişlerini tip güvenli props ve event işleyicileriyle taşı.
- Not ekleme, güncelleme ve silme işlemlerinde state değişimini uygula. undefined ve null ayrımını veri sözleşmelerinde değerlendir.
- Express endpointlerinde çalışma zamanı doğrulamasını Zod ile kur. Başarılı yanıtlar ile hata yanıtlarını ortak bir yapıda düzenle.
Çalışmanı nasıl kontrol edebilirsin?
- Yeni not ve güncelleme isteği farklı alan gereksinimlerini karşılıyor mu?
- Geçersiz istek Express tarafında doğrulanıyor mu?
- Form verisi ile liste içeriği işlem sonrasında tutarlı mı?
- Derleme sırasında yakalanan tip hataları ile çalışma zamanı doğrulaması ayrı ayrı ele alınıyor mu?
Kendi projenle pratiği genişlet
Notlara etiket veya arşiv alanı eklemeyi dene. Modeli, formu ve API sözleşmesini birlikte güncelle. Yeni alanın eksik ve geçersiz gönderildiği istekler için doğrulama senaryoları hazırla.
Eklediğin özellikleri ve karşılaştığın hataları kısa notlarla kaydet. Bir özelliği hangi dosyalarda geliştirdiğini göstermek için küçük commit'ler oluştur. Projeni paylaşırken kullanılan araçları, çalıştırma adımlarını ve örnek ekran akışlarını açıkla.