React nedir, nasıl çalışır?

React, açık kaynaklı, kullanıcılara ara yüz yaratmak için kullanılan JavaScript kütüphanelerinden biridir. Bu ara yüzlerin yaratılması için yeniden kullanılması gereken bileşenler, component isimli yapılar tarafından kullanılmaktadır.

Google ara yüzünü incelediğinizde karşınıza, logo, arama butonu, arama kutusu ve dil seçeneği gibi görseller çıkar. Bunlar yeniden kullanılma özelliği olan, birden fazla ara yüzün ortak bileşenidir. Bu görsellerin yaratılmasında ve kullanıcının hizmetine sunulmasında Reacht’in etkisi çok büyüktür.  

React’in ortaya çıkış hikâyesine baktığınızda, 2011 yılına gitmeniz gerekir. Söz konusu dönemde Facebook üzerinden XHP ismi ile bir JavaScript portu yayınlanmıştır. Bu port PHP’nin içine yerleştirilmiştir. XHP, bileşen oluşturarak kullanıcı tarafından gelen bilgileri temizleme sorumluluğunu da PHP’den alan bir yapıya sahiptir. Bu gelişmeler olurken Facebook, inanılmaz bir hızla yükselişe geçmiştir. Bu gelişim devam ettiği sürece daha kontrollü bir sisteme ihtiyaç duyulmuştur. Bir Facebook çalışanı olan Jordan Walke, XHP’den esinlenerek FaxJS ismi ile React’ın ilk versiyonunu ortaya çıkarmıştır.

React, ilk ortaya çıktığı dönemde yanlış stratejiler nedeniyle popüler olamamıştır. Fakat yaşanan gelişmeler ışığında günümüzde en çok tercih edilen kütüphanelerden biri halini almıştır. React, özellikle Airbnb ve Netflix gibi büyük şirketlerin ilgisini çekmeyi başarmıştır. Yıllar içerisinde gelişimini sürdüren React, günümüzde stabil bir yapıya kavuşmuştur. 

React Nasıl Çalışır?

HTML kodlarının JavaScript’e nasıl yazıldığını biliyorsanız, React’ı öğrenmek çok kolay olacaktır. Çünkü sistemin çalışma mantığı aynıdır. React, bir element fonksiyonu oluşturulması ile çalışmaya başlar. Bunun basit bir örneğini aşağıda görebilirsiniz:

React.createElement(“div”, { className: “red” }, “Children Text”);

React.createElement(MyCounter, { count: 3 + 5 });

Yukarıdaki örnekten anlaşılacağı üzere HTML üzerindeki söz dizimi, XML bileşenleri ile çok benzer özellikler göstermektedir. Fakat genel olarak kullanılan DOM sınıfının kullanılması yerine React classname kullanılması daha doğrudur.

JSX etiketlerine baktığınızda bir etiket adı ve niteliklerinin olduğunu görebilirsiniz. JSX diziliminde yer alan tırnak işaretleri, dizinlerin temsilidir. Bu elementler, JavaScript ile benzer özellikler gösterir. Bunun yanında sayısal değerler ve ifadelerin kesinlikle küme parantezi kullanılarak yazılması gerekir. Kısaca ifade etmek gerekirse React, HTML ve JavaScript’in karışımı olarak ifade edilebilir.  

Genel olarak React, JavaScript yerine JSX kullanılarak yazılan kod dizilimidir. Bu da React bileşenlerinin daha kolay oluşturulmasını sağlar. Standart bir JavaScript bileşeni ile de React bileşeni oluşturulabilir. Fakat emin olun bu şekilde kod dizilimleri çok karmaşık olacaktır.

Neden React Kullanmalıyım?

React kullanmak için birçok neden sıralanabilir. Söz konusu nedenlerden dikkat çekenleri şu şekilde sıralayabiliriz:

• React, her şeyden önce öğrenilmesi çok kolay bir sistemdir.
• Sistemin ayrıntılı şekilde öğrenilmesi ile birlikte yurt içi ve yurt dışı iş olanakları geniştir.
• Yeniden kullanılabilir bir sistem olması nedeniyle bir uygulama için yarattığınız sistemi diğer uygulamalar için de tercih edebilirsiniz.
• Virtual DOM kullanılarak çok daha çabuk sonuç alınabilir.
• Sistem çok popüler olduğundan geniş bir destekçi kitlesine de sahiptir. Bu nedenle sürekli geliştirilmektedir.

React çalışmalarınızda altyapı ihtiyaçlarınız için hosting çözümlerini inceleyebilir, sınırsız hosting paketlerinde özgürce kodlamanın keyfini çıkarabilirsiniz.

React’in Öne Çıkan Özellikleri

React’in öne çıkan ve kullanıcıya büyük avantajlar sağlayan özelliklerini şu şekilde sıralayabiliriz:

• React, esasında Facebook tarafından tanıtılmış bir sistemdir.
• Sistem, dünyanın önde gelen şirketleri tarafından yaygın olarak kullanılmaktadır.
• React, bir JavaScript kütüphanesi gibi düşünülmelidir.
• Bir framework olmasa da React, bir framework görevi görür.
• React’ın tek başına çalışması için bir kısım yönetim araçlarına ihtiyaç vardır.
• React’te daha iyi bir sayfa optimizasyonu sağlamak için sanal DOM tercih edilir.
• React kullanımı oldukça kolay olmakla birlikte SEO dostudur.
• Sistemin bileşeni yeniden kullanılabilir olmasını destekler.
• React, JSX’i daha iyi bir performans ortaya koyduğu için değil, kod yazımını kolaylaştırdığı için tercih edilir.

React, kullanıcı ara yüzleri oluşturmak maksadıyla 2011 yılında Facebook tarafından geliştirilmiş bir kütüphanedir. Geliştiriciler bu sistemi kullanırken her defasında uzun ve zorlayıcı JavaScript kodları yazmaya ihtiyaç duymuşlardır. Bir framework olmamasına rağmen React neden bu kadar popüler hale gelmiştir sorusuna cevap verirken aşağıdaki kavramları incelemenizde fayda vardır.

Virtual DOM

Web sitesinin iskeleti, HTML ile yazılır. HTML ile yazılan her bir yapı birer DOM (document object model) modelidir. Eğer bu modelde bir değişiklik ya da güncelleme yapılması gerekirse HTML ile bu işlemler gerçekleştirilebilir.

HTML ile sayfa yapısının değiştirilmesi statik sayfalarda bir soruna neden olmaz. Fakat dinamik sayfalarda bu durum sorun teşkil edebilir. Statik olarak nitelendirilen sayfalar, kullanıcı ile etkileşime geçmeyen, JavaScript’ten önceki sayfaları ifade eder. JavaScript ile birlikte dinamik sayfalar hayatımızda yer edinmeye başlamıştır. Bunun kullanımı arttıkça trafik de bu kapsamda artmıştır.

JSX kullanıcıları, güncellemeleri React ve JSX ile gerçekleştirebilir. Bu tür güncellemeler, “Virtual DOM” isminde bir hayali element ile yapılır. DOM’da ne zaman bir değişiklik yaşansa React bu hayali DOM elementinin de güncellemesi sağlanır. 

DOM sistemini bir alışveriş sepeti gibi düşünebilirsiniz. Alışverişe gittiğinizde alışveriş sepetine attığınız her bir ürün ya da değiştirdiğiniz ürünler için yeni bir sepet kullanılması, ciddi bir zaman kaybına neden olur. Bu da sistemin yavaşlaması demektir. İşlemlerin hızlı yürümesi ve sepetin her zaman güncel tutulması için sanal bir DOM ihtiyacı vardır. Bu sayede hem performans hem de toplam kazanç artacaktır. 

JSX

React uygulamaları iki şekilde yazılabilir. Bunlar JavaScript ya da JSX şeklindedir. Bu yazım şekillerinden genellikle JSX tercih edilir. Bu tercihin ana nedeni, JavaScript ile kullanıcı ara yüzlerinin yazılmasının zor olmasıdır. JSX, HTML’ye benzeyen bir kod yapısına sahiptir. Bu nedenle verinin kontrol edilmesine yardımcı olur. JSX, React ile bileşenler yaratırken kullanıcıya büyük kolaylık sağlar.

Bileşenler

Bileşenler, React’ın çalışma blokları gibi değerlendirilebilir. Bileşenler sayesinde uygulama ara yüzleri tekrar kullanılabilir ve birbirinden bağımsız şekilde kullanılabilir. Bu yönüyle sistem böl ve yönet mantığı ile çalışır. Bileşenleri temelde iki ayrı bölüme ayırabiliriz:

• Class Based Components 
• Function Based Components 

Bu iki bileşen sayesinde sistem içerisindeki yapıların birbirine veri aktarımı sağlanabilir.

React, Vue ve Angular’ın Farkları Nelerdir?

Rakipleri olarak sayabileceğimiz Vue JS ve Angular sistemlerinin aksine React, bir tür kütüphanedir. Vue JS ve Angular birer framework’tür. React, ara yüz, görsel ve görünen kısımla ilgilenir. Veri tabanı ya da form doğrulaması gibi web sayfasının görünmeyen kısmı ile ilgilenmez. Framework’lar ise web sayfasının tüm ihtiyaçlarını karşılamaya yönelik parçaların tamamını içinde bulundurur.

React Kitaplıkları

React, özellikle son yıllarda oldukça popüler hale gelmiştir. Bu anlamda react kitaplıklarının da büyük gelişme gösterdiğini söyleyebiliriz. Söz konusu kitaplıkları kullanarak işinizi çok daha pratik ve hızlı şekilde çözüme ulaştırabilirsiniz. En çok işinize yarayacağını düşündüğümüz 5 önemli kitaplık şunlardır:

• Tepki anlık görüntü
• Tepki kask
• React use
• React renk
• Tepki yükleme iskeleti

React kitaplık türleri sadece yukarıda sayılanlarla sınırlı değildir. Kullanıcının işini kolaylaştırmak için geliştirilmiş yüzlerce kitaplık vardır. Yukarıda sayılanlar popüler olan kitaplıklar olsa da siz küçük bir araştırma ile farklı kitaplıklardan da istifade edebilirsiniz. 

React çalışmalarınızda altyapı ihtiyaçlarınız için hosting çözümlerini inceleyebilir, sınırsız hosting paketlerinde özgürce kodlamanın keyfini çıkarabilirsiniz.