- React'in mimarisi, kullanıcı arayüzü performansını optimize etmek için yeniden kullanılabilir bileşenlere ve Sanal DOM'a odaklanır.
- Veri akışını özellikler ve dahili durum aracılığıyla yönetmek, dinamik ve etkileşimli web uygulamalarına olanak tanır.
- JSX, JavaScript mantığını doğrudan HTML benzeri işaretlemeyle birleştirerek kullanıcı arayüzü yapılarının oluşturulmasını kolaylaştırır.
- useState ve useEffect gibi modern hook'lar, yan etkileri ve durum güncellemelerini yönetmek için karmaşık sınıf yaşam döngülerinin yerini alıyor.
İnternetteki en şık web sitelerinin nasıl bu kadar hızlı ve duyarlı kaldığını merak ettiyseniz, büyük olasılıkla React ile destekleniyorlar. Meta ekibi tarafından oluşturulan bu JavaScript kütüphanesi, bileşen tabanlı bir yaklaşım kullanarak karmaşık arayüzler oluşturmamıza olanak tanıyarak ön uç geliştiriciler için oyunun kurallarını tamamen değiştirdi ; bu da temelde bir sayfayı her yerde yeniden kullanabileceğiniz küçük, yönetilebilir parçalara ayırmak anlamına geliyor.
React ile çalışmaya başlamak, özellikle teknik terimleri ve araç zincirleriyle ilk başta aşılması zor bir engel gibi gelebilir, ancak bir kez kavradığınızda kendinizi süper güç kazanmış gibi hissedeceksiniz. İster saf HTML/CSS geçmişiniz olsun ister zaten bir JS uzmanı olun, amaç sıkıcı DOM manipülasyonundan uzaklaşmak ve sadece kullanıcı arayüzünün nasıl görünmesini istediğinizi tanımladığınız ve React'in tarayıcıyı güncellemenin ağır işlerini üstlendiği bildirimsel bir programlama stilini benimsemektir.
Temel Felsefe: Bileşenler ve JSX
Özünde, her React uygulaması sadece bir bileşen ağacıdır . Bileşenleri LEGO tuğlaları gibi düşünün; küçük bir düğme, bir arama çubuğu veya tam bir gezinme menüsü oluşturabilir ve ardından bunları bir araya getirerek eksiksiz bir uygulama yaratabilirsiniz. Bu bileşenler esasen JSX (JavaScript XML) döndüren JavaScript fonksiyonlarıdır . JSX, HTML'ye çok benzese de, aslında UI yapımızı doğrudan mantığımızın içine yazmamıza olanak tanıyan akıllı bir sözdizimi uzantısıdır.
Tarayıcılar JSX'i doğrudan okuyamadığı için, onu standart JavaScript'e derlemek üzere Babel veya Vite gibi araçlar kullanıyoruz . Akılda tutulması gereken bir nokta, JSX'in JavaScript olması nedeniyle bazı HTML özniteliklerinin biraz farklı olmasıdır. Örneğin, "class" kelimesini kullanamazsınız çünkü bu JavaScript'te ayrılmış bir kelimedir, bu nedenle onun yerine className kullanıyoruz . Mantık ve işaretlemenin bu karışımı, geliştirme sürecini çok daha sezgisel hale getirir ve kodunuzu düzenli tutar.
Veri İşleme: Özellikler ve Durum
Bir siteyi etkileşimli hale getirmek için bileşenlerinizin verilere ihtiyacı vardır. Bunu ele almanın iki ana yolu vardır: Props ve State . Props (özelliklerin kısaltması), bir fonksiyona geçirilen argümanlar gibidir. Sadece okunabilirler ve tek yönlü akarlar: üst bileşenden alt bileşene. Bir UserProfile bileşeniniz varsa, bileşenin verinin nereden geldiğini bilmesine gerek kalmadan kimi göstereceğini bilmesi için kullanıcı adını bir prop olarak geçirebilirsiniz.
Öte yandan, durum (state) bileşenin özel belleğidir . Özellikler (props) üst bileşen tarafından belirlenirken, durum dahili olarak yönetilir. Kullanıcı bir düğmeye tıkladığında veya bir forma veri yazdığında, durum güncellenir. Sihir burada gerçekleşir: Durum her değiştiğinde, React yeni verileri yansıtacak şekilde bileşeni otomatik olarak yeniden oluşturur . Bu, DOM'da bir öğeyi manuel olarak bulma ve metnini değiştirme ihtiyacını ortadan kaldırır; bu, saf JavaScript'te büyük bir baş ağrısıydı.
Sanal DOM'un Büyüsü
React'in bu kadar hızlı olmasının en büyük nedenlerinden biri Sanal DOM'dur . Gerçek tarayıcı DOM'unu güncellemek hesaplama açısından maliyetli ve yavaştır. Bir şey değiştiğinde her seferinde gerçek DOM'a dokunmak yerine, React bellekte hafif bir sanal kopyasını oluşturur . Durum güncellendiğinde, React yeni sanal sürümü eskisiyle karşılaştırır ( fark bulma adı verilen bir işlem ) ve yalnızca gerekli değişiklikleri gerçek tarayıcıya uygulamak için en verimli yolu hesaplar.
Bu uzlaştırma süreci, uygulamanızın büyük miktarda veriyi işlerken veya sık sık güncellemeler alırken bile yavaşlamamasını sağlar. Sorunsuz geçişlere ve neredeyse yerel bir masaüstü uygulaması gibi hissettiren yüksek performanslı bir kullanıcı deneyimine olanak tanıyan gizli formül budur.
Kancalarla Modern Gelişim
Eskiden, durum ve yaşam döngülerini yönetmek için karmaşık ES6 sınıfları kullanmanız gerekiyordu. Şimdi ise, durum ve diğer React özelliklerini basit fonksiyonel bileşenlerde kullanmanıza olanak tanıyan Hook'larımız var. En yaygın olanı, verileriniz için bir değişken ve onu güncellemek için bir fonksiyon sağlayan useState'tir . Daha temizdir, daha az tekrar eden kod gerektirir ve kodunuzun test edilmesini çok daha kolaylaştırır.
Ardından , yan etkiler için İsviçre çakısı niteliğinde olan `useEffect` var . İster bir API'den veri çekiyor olun, ister bir abonelik kuruyor olun, ister sayfa başlığını manuel olarak değiştiriyor olun, `useEffect` bu mantığın çalıştığı yerdir. Bir bağımlılık dizisi sağlayarak ne zaman çalışacağını kontrol edebilirsiniz ; dizi boşsa, efekt yalnızca bileşen ilk kez yüklendiğinde, eski `componentDidMount` yöntemine benzer şekilde bir kez çalışır.
Çevrenizi Hazırlamak
Geliştirmeye başlamak için makinenizde Node.js ve npm (Node Paket Yöneticisi) kurulu olması gerekir . Teknik olarak script etiketleri kullanarak bir sayfaya React ekleyebilirsiniz, ancak gerçek projeler için bunu kimse yapmaz çünkü çok yavaştır. Modern standart , yıldırım hızında bir derleme aracı ve önceden yapılandırılmış bir ortam sağlayan Vite kullanmaktır; bu, Linux kullanan geliştiricilerin programlama iş akışlarını optimize etmelerine benzer. Terminalinizde basit bir komut çalıştırarak, yerel bir geliştirme sunucusu içeren ve Hot Module Replacement (MRP) özelliğine sahip bir proje oluşturabilirsiniz ; bu da değişikliklerinizin kaydet düğmesine bastığınız anda tarayıcıda görünmesi anlamına gelir.
Projeniz kurulduktan sonra, .jsx dosyalarınızın bulunduğu bir src klasörü ve giriş noktası görevi gören bir index.html dosyası içeren bir yapı göreceksiniz. React genellikle tek bir HTML öğesine (genellikle "root" kimliğine sahip bir div'e) bağlanır ve createRoot adı verilen bir yöntem kullanarak tüm uygulamayı bu noktaya yerleştirir.
Gelişmiş Desenler: Durum ve Listeleri Kaldırma
Uygulamanız büyüdükçe, iki bileşenin aynı veriyi paylaşması gerektiğini göreceksiniz. Prop'lar yalnızca aşağıya doğru aktığı için çözüm, durumu yukarıya taşımaktır . Bu, durumu en yakın ortak üst bileşene taşımak anlamına gelir. Üst bileşen daha sonra durumu prop olarak her iki alt bileşene de iletir ve alt bileşenlerin bu durumda değişiklik talep edebilmesi için bir geri çağırma fonksiyonu sağlar .
Veri dizileriyle çalışırken, React verileri bileşen listesine dönüştürmek için `map()` yöntemini kullanır. Burada önemli bir ayrıntı ` key` özelliğidir . React, hangi öğenin değiştiğini, eklendiğini veya kaldırıldığını takip etmek için listedeki her öğe için benzersiz bir tanımlayıcıya ihtiyaç duyar. Liste yeniden sıralanabiliyorsa, indeksi anahtar olarak kullanmak genellikle kötü bir fikirdir; bu nedenle, en iyi performansı sağlamak ve garip oluşturma hatalarından kaçınmak için her zaman veritabanınızdan benzersiz bir kimlik kullanmak en iyisidir.
Şekillendirme ve Etkileşim
React'te stillendirme esnektir. Standart CSS dosyalarını kullanıp içe aktarabilir veya stillerin diğer bileşenlere sızmasını önlemek için CSS Modülleri kullanabilirsiniz. Daha entegre bir yaklaşımı tercih edenler için, styled-components gibi CSS-in-JS kütüphaneleri, stilleri doğrudan JavaScript'inizde yazmanıza olanak tanıyarak, bileşenin özelliklerine bağlı olarak renkleri veya düzenleri değiştirmeyi kolaylaştırır.
Etkileşim için React, onClick ve onChange gibi sentetik olaylar kullanır . Bunlar, uygulamanızın farklı tarayıcılarda tutarlı bir şekilde çalışmasını sağlayan yerel tarayıcı olaylarının etrafındaki sarmalayıcılardır. Form oluştururken, en iyi yöntem Kontrollü Bileşen (Controlled Component) modelidir; burada giriş değeri doğrudan bir durum değişkenine bağlanır ve bu da kullanıcının gönder düğmesine basmadan önce verilerin gerçek zamanlı olarak doğrulanmasını kolaylaştırır.
Bileşenlerin modüler yapısını, Sanal DOM'un verimliliğini ve Hooks'un basitliğini birleştirerek, basit bir yapılacaklar listesinden tam ölçekli bir kurumsal platforma kadar her şeyi oluşturabilirsiniz. Ekosistem çok büyük olup, sayfa navigasyonu için React Router ve küresel durum yönetimi için Context API gibi araçlar sunarak , projeniz ne kadar büyük olursa olsun, sürdürülebilir ve ölçeklenebilir kalmasını sağlar.
