Makale Başlıkları
Kullanıcı arayüzü oluşturmak için kullanılan React en çok tercih edilen JavaScript kütüphanesidir. Aracın bileşenleri Facebook tarafından geliştirilmiş ve 2013 yılında açık kaynak kodlu bir JavaScript olarak piyasaya sunulmuştur. Netflix, American Express, WhatsApp ve Instagram gibi büyük şirketler tarafından da kullanılan React kullanımı kolay bir araçtır. Kullanıcı arayüzü görevlerini verimli şekilde tamamlamaya odaklanan araç, birkaç gün kullanım sonucunda kolayca anlaşılabilir.
Açık kaynak kodlu araç, arayüzleri yaratmak için kullanılır ve yeniden kullanılabilen bileşenler içerir. Bu bileşenlere Google üzerindeki arama butonunu, arama kutusunu, logosunu ve dil seçeneği bilgisini örnek verebiliriz. Bu tür görsel bileşenleri kullanmaya yarayan React bir JavaScript kütüphanesidir.
Javascript, dinamik web siteleri yaratmaya yarayan programlama dilidir. Web sayfası ziyaret edildiğinde görülen animasyonlar, formlar gibi bileşenler JavaScript sayesinde yazılır. Geçtiğimiz 10 yılda kullanımı artmıştır ve hemen hemen tüm web sayfalarında ortak alan yapıları, bileşenleri paket haline getirilebilir.
React Nedir?
2011 yılında XHP’den esinlenilerek çıkarılan fikir, 6 ay sonrasında React aracını ortaya çıkarmıştır. Günden güne popülerlik kazanarak günümüzde en fazla tercih edilen kütüphanelerden biri haline gelmiştir. SPA oluşturmak için de kullanılan kütüphane, Angular ve Vue JS gibi rakiplerini de geride bırakmıştır. Bunlardan farklı olarak veri tabanı ve form doğrulaması da sağlayarak web sitelerinde görünmeyen kısımlarla da ilgilenir.
React uygulamaları JavaScript veya JSX olarak yazılabilir ancak genellikle JSX tercih edilir. Bunun sebebiyse JavaScript’te kullanıcı arayüzlerinin yazılmasının daha zor olmasıdır. Bileşen bazlı, front-end kütüphane olan ve uygulamanın görünüm katmanından sorumlu olan React, geliştiricilere birçok kolaylık sağlıyor.
React Nasıl Çalışır?
React yeni veriler eklendiğinde veya herhangi bir verinin güncellenmesi durumunda web sayfasını tekrar yükler ve tüm işlemleri tekrarlar. Bu işlem sonrası yalnızca güncellenen veriler görüntülenebilir. Ancak bu bir dezavantaj olarak değerlendirilebilir. Örneğin bir belge nesne modeli olan DOM, web sayfası yüklendiğinde tarayıcı tarafından oluşturulmuş verileri dinamik olarak ekleyebilir ve kaldırabilir.
Her değişiklikte yeni bir DOM oluşturması da eski verilere ulaşılmasına olanak tanır. DOM’un tekrar oluşturulması ve gereksiz bellek israfına sebep olduğu da bilinmelidir. Bu sıkıntılardan kurtulmak için ise React çalıştırma daha popüler hale gelmiştir. Herhangi bir güncelleme olduğunda tüm sayfayı tekrar yüklemek yerine, eski görünümü yok eden kütüphane, bellek israfına da bu şekilde çözüm üretiyor.
React JavaScript dosyalarındaki metinleri nesnelere dönüştürür. Bu sayede HTML kodlarının anlaşılması daha kolay hale gelir. Virtual DOM ise, ögelerin niteliklerini ve içeriklerini nesneler ve özellikleri olarak listeler. React’ın bileşenlerden biri olan node ağacı da bu sayede oluşur.
Kullanıcı ya da sistemin yaptığı çeşitli eylemler, veri modelindeki mutasyonlara cevap olacak şekilde ağacı günceller. Çalışma mantığına bakacak olursak;
- Temel bir verinin değişmesi durumunda, kullanıcı arayüzü yeniden oluşturulur.
- Daha sonra DOM gösterimiyle oluşan yeni arayüz arasındaki farkın hesabı yapılır.
- Hesaplama sonrası gerçek DOM, sadece gerçekte değişen şeylerle güncellenir. Düzeltme ekleri de yalnızca etkilenen bölgelerde işlev görür. Bu sayede uygulama daha hızlı hale gelir ve bellek israfı önlenir.
React Ne İşe Yarar?
Bir JavaScript kütüphanesi olarak React, hızlı ve interaktif kullanıcı arayüzleri oluşturmaya olanak tanır. Facebook tarafından üretilmiş olan kütüphane, bir framework özelliği taşımaz. Mimari katmanla ilgisi yoktur ve yalnızca görünüm katmanına odaklanır. Tek işlevi, arayüzdeki tüm işlemleri mantıklı, kolay, maliyetsiz ve yüksek performanslı olarak yapmasıdır. React, element bazlı ve sanal DOM mimarisini kullanır.
React Sanal DOM mimarisini kullanan ve render işlemini hızlı şekilde fiile döken bir kütüphanedir. Bu yüzden değişikliğin çok fazla yaşandığı projeler üzerinde kullanılır. İşlemlerin daha çok kullanıcı arayüzü tarafında olduğu projelere uygundur denilebilir.
JSX, XML’in JavaScript içerisine yerleştirilmesi için dilbilgisi olan bu araç, kodun biçimlendirme dili içine yazılmasına olanak tanır. Artılarına bakıldığında;
- Zaman kazandırır.
- IOS ve Android için harmanlanabilen kod tabanının oluşturulmasına olanak tanır.
- Yüksek kalibreli modern bir kullanıcı deneyimi sunar.
- Çok yönlü bir uygulama geliştirilmesini sağlar.
- Kullanıcı arabirimi duyarlıdır.
- Daha hızlı yükleme süresine sahip web siteleri oluşturulmasını sağlar.
React DOM işlemini verimli şekilde günceller ve web bazlı uygulamalarda sorun yaşanmasını engeller. Sanal DOM’lar oluşturmaya yarayan araç, bunları bir hafızada tutmayı sağlar. Herhangi bir değişiklik olması durumunda sanal olanı da aynı anda günceller.
Farklı arama motorlarına da erişebilen kullanıcı arayüzü oluşturmaya olanak tanıyan React tam bir SEO dostudur. Uygulama sürecini hızlandırarak SEO sıralamasını yükseltir çünkü SEO optimizasyonunda web sayfasının hızı da etkilidir.
Facebook tarafından tanıtılan kütüphane, dünya çapında birçok popüler marka ve şirket tarafından kullanılır hale gelmiştir. Hem bir framework olarak hem de JavaScript kütüphanesi olarak işlev görebilir ve yönlendirme ve yönetim gibi farklı amaçlar için ek elementlere olan ihtiyacı ortadan kaldırır.
Daha iyi sayfa optimizasyonu için sanal DOM kullanır ve HTML ve JavaScript’in karışımı olarak JSX uzantısı içerir. Web geliştirme konusunda başarılı olmak, etkili ve verimli bir web sitesi oluşturmak için bu araç kullanılabilir.
Kullanıcı arayüzleri oluşturma konusunda en önemli teknolojilerden olan React karmaşık ve yüksek kullanıcı etkileşimini içeren web sayfalarında düşük hesaplama güçlerini ve düşük yükleme zamanlarını kullanıcılara sunarak hem kullanıcılar için hem de geliştiriciler için avantaj sağlar.
Instagram’ın da kullanıcı arayüzü React ile geliştirilmiş tir ve birçok bileşene ayrılmıştır. Her bileşenin kendine has özelliği ve işlevinin olması da geliştiricilere birçok kolaylık sağlıyor.
Neden React Kullanmalı?
React kullanımı öğrenmesi kolaydır ve öğrenen kişiler için yurtdışında iş imkanı artar. Yeniden kullanılabilen yapısı sayesinde uygulama içerisinde yaratılan diğer uygulamalarla da kullanılabilir. Sanal DOM ile performans açısından hızlı sonuç verir ve destekleyici bir topluluğa sahiptir.
Özelliklerine bakıldığında React test edilebilir, sunucu tarafı oluşturma, tek yönlü veri bağlama, basitlik ve düşük öğrenme eğrisi gibi işlevlere sahiptir. React işlevi olan test edilebilirlik, bir bileşenin nasıl işleneceğini ve davranacağını belirlemeye yarar. Bu işlev sayesinde uygulamaların test edilmesi ve hata ayıklanması oldukça kolaydır.
Sunucu tarafı oluşturma, bileşenlerin başlangıç durumlarını sunucu tarafında önceden oluşturmaya yarar. SSR ile sunucunun tarayıcıya cevabı görüntülemeye hazır bir sayfa HTML’ye sahip olur. Bu sayede tarayıcı, JavaScript’in yüklenmesi ve yürütülmesi çok hızlı şekilde olur. Bu da web sitesinin hızlı yüklenmesi anlamına gelir.
Tek yönlü veri bağlama işlevi ise diğer frameworklerden farklı olarak tek yönlü veri akışını izlemesi anlamına gelir. Bunun avantajı ise, uygulama verilerinin tek bir yönde akmasını ve bu sayede daha iyi kontrol imkanı sağlamasıdır. Böylece uygulama daha esnek hale gelir ve verimlilik artar.
Basitlik ise, JSX dosyalarının kullanımının uygulamayı basitleştirmesi sonucunda kütüphanenin kazandığı bir özelliktir. Bileşen tabanlı yaklaşım ve farklı yaşam döngüsü yöntemleriyle de öğrenme kolaylaşır.
Öğrenme eğrisi ise, React’ta düşüktür. Temel programlama bilgisine sahip olan her kişi React’ı kolaylıkla öğrenebilir. HTML, JavaScript hakkında bilgisi olan kişiler bu kütüphaneyi öğrenmek için çok az zaman ayırıyorlar.
