React ile Modern Web Geliştirme Nasıl Yapılır?

React ne işe yarar?

React, kullanıcı arayüzlerini bileşenler halinde kurmaya yarayan bir JavaScript kütüphanesidir. Bir sayfa; başlık, liste, form, düğme gibi bağımsız parçalara ayrılır. Her parça kendi görünümünü ve davranışını taşır, birlikte kullanılarak ekranlar oluşturulur.

Bu yapı, karmaşık ve sürekli güncellenen arayüzlerde, yani yönetim panelleri, e-ticaret sayfaları ve etkileşimli uygulamalarda büyük kolaylık sağlar. Veri değiştiğinde arayüzün hangi parçasının yeniden çizileceğini React yönetir; geliştirici "ekran şu veriye göre böyle görünür" şeklinde düşünür. Bunun için HTML, CSS ve JavaScript temelinin sağlam olması, React'a başlamadan önceki ilk koşuldur.

Öğrenme yolu: temelden uygulamaya

Mantıklı bir sıra şudur:

• Ortam kurulumu: Node tabanlı bir geliştirme ortamı, paket yöneticisi ve bir çerçeve ya da derleme aracı.
• Bileşenler ve JSX: Arayüzü fonksiyon olarak yazmak, HTML benzeri söz diziminin JavaScript içinde kullanımı.
• Props: Bileşenlere dışarıdan veri iletmek ve bileşenleri tekrar kullanılabilir yapmak.
• State ve olaylar: Kullanıcı etkileşimine göre değişen veriyi tutmak.
• Hooks: Durum ve yan etkileri fonksiyon bileşenlerinde yönetmek.
• Routing: Birden fazla sayfalı yapıyı kurmak.
• Global state: Birçok bileşenin ortak kullandığı veriyi yönetmek.

Her aşamada küçük bir uygulama yapın: yapılacaklar listesi, ürün kataloğu ya da basit bir panel. Öğrenmenin en hızlı yolu izlemek değil, her kavramı çalışan bir ekrana dönüştürmektir.

Bileşen mimarisi ve props

İyi bir React uygulamasının temeli bileşenlerin doğru bölünmesidir. Bir bileşen tek bir iş yapmalı ve adı bu işi anlatmalıdır. Çok büyüyen bileşen, alt parçalara ayrılır. Veri yukarıdan aşağı props ile akar; alt bileşen veriyi değiştirmek istediğinde bir fonksiyonu props olarak alır ve üst bileşeni çağırır.

Sık yapılan tasarım kararı, hangi bileşenin veriyi tuttuğudur. Sunum bileşenleri yalnız verilen veriyi gösterir, kapsayıcı bileşenler veriyi alır ve düzenler. Bu ayrım test etmeyi ve yeniden kullanımı kolaylaştırır. Klasör yapısını da erken düşünmek gerekir; özellik bazlı klasörleme büyüyen projelerde kodu bulmayı kolaylaştırır.

Hooks ile durum ve yan etkiler

Hooks, fonksiyon bileşenlerinin durum tutmasını ve yan etki çalıştırmasını sağlar. Durum için useState, veri çekme ya da abonelik gibi yan etkiler için useEffect en temel örneklerdir. Yan etkinin bağımlılıklarını doğru yazmak, gereksiz tekrar çalışmayı ve eski veri hatalarını önler.

Karmaşık durum geçişlerinde reducer deseni, tekrar eden mantığı paylaşmak için de kendi hook'unuzu yazmak kullanılır. Hook kurallarına uymak gerekir: hook'lar bileşenin üst düzeyinde ve her çizimde aynı sırayla çağrılır. Öğrenirken sık yapılan hata, her şeyi useEffect içine koymaktır; türetilebilen veri çoğu zaman effect olmadan doğrudan hesaplanabilir.

Global state, routing ve veri akışı

Uygulama büyüdükçe bazı veriler birçok bileşenin ortak ihtiyacı olur: oturum bilgisi, tema, sepet. Bunun için context ya da bir durum yönetim kütüphanesi kullanılır. Her veriyi global yapmak yerine, mümkün olduğunca ihtiyaç duyulan yere yakın tutmak daha sade bir mimari sağlar. Sunucudan gelen veri için ayrı bir veri çekme ve önbellek katmanı kullanmak, yerel arayüz durumundan ayrıştırmayı kolaylaştırır.

Routing, birden çok ekranın tek uygulama içinde adres çubuğuyla bağlanmasıdır. Rotaları, ortak yerleşimleri ve yetkilendirilmiş sayfaları düzenli kurmak ileride yeniden düzenleme yükünü azaltır. Sunucu tarafı çizim gerektiren projelerde React üzerine kurulu çerçeveler kullanılır.

Performans, test ve kalite

Performans sorunu ölçülmeden çözülmez. Önce tarayıcı geliştirici araçlarıyla yavaş çizilen bileşen bulunur, sonra gerekiyorsa gereksiz yeniden çizimleri azaltan teknikler (memoizasyon), uzun listelerde sanallaştırma ve kodu parçalara bölerek geç yükleme uygulanır. Erken optimizasyon kodu karmaşıklaştırır.

Test tarafında bileşenlerin kullanıcının gördüğü davranışla test edilmesi önerilir: düğmeye tıklandığında listede ne görünüyor? Uçtan uca testlerle kritik akışlar da kontrol altına alınır. Tip güvenliği için TypeScript kullanmak büyük projelerde hata oranını düşürür ve bileşenlerin sözleşmelerini açık kılar.

Örnek iş akışı: filtrelenebilir ürün listesi

Örneğin bir ürün listesi ekranı kuracaksınız. Önce ekranı bileşenlere bölün: arama kutusu, filtre seçenekleri, ürün kartı ve listeyi bir araya getiren sayfa bileşeni. Arama metni ve seçili filtre, hem filtre alanının hem listenin ihtiyaç duyduğu ortak üst bileşende tutulur; alt bileşenler değeri props ile alır, değişiklikleri fonksiyon props'u ile üst bileşene bildirir.

Sonra veriyi sunucudan çekin ve üç durumu ayrı ayrı ele alın: yükleniyor, hata ve başarılı. Filtrelenmiş liste, state'e yazılmak yerine mevcut veriden her çizimde hesaplanır; böylece iki state'i senkron tutma derdi ortadan kalkar. Son adımda ürün kartına tıklayınca açılan bir detay rotası ekleyin ve geri dönüldüğünde filtrenin korunup korunmadığını kontrol edin. Bu küçük akış, bileşen bölme, props, state, effect ve routing kavramlarını tek ekranda sınar.

Sık yapılan hatalar

• JavaScript temelini atlayıp doğrudan React'a başlamak.
• Bileşenleri çok büyük tutmak, her şeyi tek dosyada yazmak.
• Durumu gereğinden fazla yukarı taşımak veya gereksiz global yapmak.
• useEffect bağımlılıklarını atlamak veya her işi effect ile çözmek.
• Liste çizerken kararlı ve benzersiz anahtar vermemek.
• Erken optimizasyon yapmak veya hiç ölçmemek.

Bir diğer yaygın sorun, eğitim videolarını izleyip kendi projesini hiç yapmamaktır. Küçük de olsa gerçek bir problem seçip uçtan uca bitirmek öğrenmeyi pekiştirir.

Mindset programlarında nerede çalışılır?

Modern Web Geliştirme, Frontend (React) eğitimi şu modülleri içerir: React ekosistemi ve modern geliştirme ortamı, bileşen mimarisi ve props sistemi, React Hooks ile state ve yan etkiler, global state yönetimi, routing ve sayfa mimarisi, performans optimizasyonu, test ve kalite güvencesi. TypeScript ile React Uygulama Mimarisi eğitimi ise tip güvenli bileşen tasarımı, durum modelleme ve hook tipleri, kod organizasyonu, veri katmanı ve API sözleşmeleri, formlar, yönlendirme ve yetkilendirme ile test ve sürdürülebilirlik konularını kapsar.