BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 8: React Temelleri
Giriş
İnternetin yaygınlaşması sonucu, birçok alanda masaüstü uygulamalarının yerini web uygulamaları almaktadır. Haber siteleri, e-Ticaret, eğitim, finans gibi birçok alanda web uygulamaları kullanıcılara hizmet etmektedir. Klasik yöntemlerle hazırlanan web siteleri hem kullanıcılar hem de geliştiriciler için bazı alanlarda eksik kalmaktadır. Sayfaların yüklenme süresini azaltmak, sistem kaynaklarını optimize kullanmak gibi amaçlarla sürekli yeni teknolojiler geliştirilmektedir.
Single Page Application
Web uygulamalarında, kullanıcının ekranında gördüğü her sayfa view (görünüm) olarak adlandırılır. Herhangi bir web uygulamasında birden çok view olabilir. Örneğin; bir e-Ticaret sitesinde kullanıcıların giriş yaptığı, giriş yaptıktan sonra ürünlerin listelendiği veya kullanıcı bilgilerinin gösterildiği sayfaların her biri farklı bir view olarak adlandırılır.
Kullanıcılar, viewlerin değişmesini sayfa değişmesi olarak ilişkilendirebilir. Yani bir web sayfasında yeni bir görünüm geldiğinde, kullanıcı yeni bir sayfa yüklendiğini düşünür. Geleneksel yöntemlerle hazırlanan web sitelerinde durum böyleydi. Bir web uygulaması birden çok farklı sayfadan oluşmaktaydı. Single Page Application (Tek Sayfa Uygulama) (SPA) yapısında web siteleri tek sayfalık uygulamalardan oluşmaktadır. Uygulamalar tek sayfadan oluşmasına rağmen, birden çok view içerir. Sadece kullanıcının görüntülediği ekran ile ilgili olan view aktif olur, diğerleri ekranda gösterilmez.
(Kitabınızın 259 sayfasında Görsel 8.1’de geleneksel yöntemlerle ve SPA yapısı ile hazırlanan web uygulamalarının çalışması gösterilmiştir.) Geleneksel yöntemlerle hazırlanan uygulamada, kullanıcı farklı bir view açmak istediğinde tüm sayfa yeniden yüklenir. Bu sunucunun daha fazla kaynak harcamasına neden olur. Aynı zamanda tüm sayfanın yüklenmesi kullanıcıların sayfalar arasında gezinmesini yavaşlatacak, uygulama performansını olumsuz etkileyecektir. SPA yapısı ile hazırlanan web uygulamalarında, kullanıcı uygulamaya ilk girdiğinde sayfa ile ilgili HTML, CSS ve JavaScript dosyaları yüklenir. Kullanıcı, viewler arasında gezinirken sadece ilgili alanlar güncellenir, diğer alanlar güncellenmez. SPA, avantajlarının yanında dezavantajlara da sahiptir. Geliştiriciler için önemli olan SEO algoritmaları hâlâ SPA uygulamarında performanslı çalışmamaktadır. Bu sorunu çözmek için farklı paketler kullanılmalıdır. Başka bir dezavantajı ise tarayıcı geçmişi kullanmak geleneksel uygulamalardaki kadar kolay değildir. Tarayıcının geri tuşuna basıldığında, uygulamadan önceki sayfa açılır. Tarayıcı geçmişini kullanabilmek için History API gibi teknikleri kullanmak gerekir.
History API: Geliştiricilere tam sayfa yenilemeye gerek kalmadan bir web sitesinin URL’sini değiştirme olanağı veren tekniktir.
Sanal Document Object Model (VDOM)
Temel olarak DOM, XML ve HTML gibi belgelerin ağaç yapılı bir temsilidir. Bu belgelerdeki ögeleri eklemek, kaldırmak veya güncellemek için DOM yapısı kullanılabilir.
1998 yılında DOM ilk duyurulduğunda bütün sayfayı sık sık güncellemek hedeflenmiyordu. DOM, sürekli sayfa içeriklerini güncellemek için değil daha küçük çaplı değişiklikler yapmak için kullanılıyordu. Basit işlemler için (document.getElementsByClassName) gibi metotların kullanılması yeterli oluyordu. Ancak bu yöntemlerle birkaç saniyede bir sayfayı güncellemek kaynak tüketimi açısından pahalı bir işlemdir. Tarayıcılar, sayfadaki tüm değişiklikler için DOM ağacını sık sık güncellerler ise performans kaybı oluşmaya, tarayıcı kaynakları yetersiz kalmaya başlar.
Sanal DOM, gerçek DOM yapısının sık sık güncelleme ihtiyacından kaynaklanan sorunları daha performanslı bir şekilde çözmek için geliştirilmiştir. DOM yapısından farklı olarak, sanal DOM gerçek bir yapı değildir. DOM ile arayüz oluşturmanın farklı bir yöntemidir. Gerçek DOM yapısının bir temsilidir ve geçici bellekte saklanır. Geçici bellekte bulunan bu temsili DOM, DOM API’ları kullanılmadan sık sık değiştirilebilir ve güncellenebilir. Sanal DOM’da tüm güncellemeler yapıldıktan sonra, orijinal DOM’da hangi değişikliklerin yapılması gerektiğine bakılır ve optimize edilmiş bir şekilde yapılır. Bu sayede gerçek DOM yapısında yapılacak güncellemelerin maliyeti azaltılır.
Gerçek DOM’da sürekli yapılamayan güncellemeler, Sanal DOM yapısını temsil eden JavaScript nesneleri üzerinde kolayca ve sınırsızca yapılabilir. Daha sonra Sanal DOM ile gerçek DOM yapısı karşılaştırılır. Gerçek DOM yapısında bulunmayan güncellemeler tespit edilir. Sanal DOM yapısı ile gerçek DOM yapısı güncellenir.
React, Vue gibi güncel kütüphaneler bu işlemi geliştiriciler yerine yapar. Sayfadaki güncellemeleri Sanal DOM üzerinde tespit edip gerçek DOM yapısını günceller. Gerçek DOM işlemlerine göre çok daha maliyetsiz olan Sanal DOM, güncel web kütüphanelerini bu kadar hızlı ve güvenilir yapan özelliklerden biridir.
React
React, Facebook için çalışan yazılım mühendisi olan Jordane Walke tarafından 2011 yılında piyasaya sürüldü. Komponent tabanlı bir konsept kullanarak bildirimsel kullanıcı arayüzleri oluşturmaya odaklanan bir JavaScript kütüphanesidir. React’ın ana hedefi kapsamlı, hızlı, bildirime dayalı, esnek ve basit olmaktır.
React ilk olarak web uygulamaları için geliştirilmiştir. Daha sonra mobil platformlara uygulama üretebilecek şekilde farklı versiyonları yayımlanmıştır. Web uygulamaları için kullanılan sürümleri doğrudan React veya ReactJS, mobil için kullanılan sürümleri ise React Native olarak adlandırılır. React Native ile hem Android
cihazlar için hem de IOS platformlar için uygulama geliştirilebilir. Bu sayede mobil yazılım dünyasında da popüler olabilmiştir. Nedenlerini inceleyecek olursak;
• Dinamik uygulamaların kolay oluşturulması: React, JavaScript’in aksine daha az kod yazarak çok hızlı bir şekilde uygulama geliştirmeyi sağlar. • Gelişmiş performans: React, Sanal DOM kullanır. Böylece web uygulamalarını daha hızlı günceller. • Yeniden kullanılabilir komponentler: Komponentler, herhangi bir React uygulamasının yapı taşlarıdır. Tek bir uygulama genellikle birden çok komponentten oluşur. Bu komponentlerin kendi mantığı ve kontrolleri vardır. Uygulama boyunca yeniden kullanılabilirler. Bu sayede uygulamanın geliştirme süresini önemli ölçüde azaltır. • Hızlı öğrenme eğrisi: Temel HTML ve JavaScript kavramlarını bazı eklemelerle birleştirdiği için React’ı öğrenmesi kolaydır. Yine de diğer araçlarda ve çerçevelerde olduğu gibi, React’ın kitaplığını doğru bir şekilde anlamak için biraz zaman harcamanız gerekiyor. • Hem web hem de mobil uygulamaların geliştirilmesi için kullanılabilir: Daha önce bahsedildiği gibi, React’in kendisinden türetilen, oldukça popüler olan ve güzel mobil uygulamalar oluşturmak için kullanılan React Native versiyonu vardır. • Tek yönlü veri akışı: React, tek yönlü bir veri akışını takip eder. Bu, geliştiricilerin bir React uygulaması tasarlarken genellikle alt komponentleri üst komponentlerin içine yerleştirdiği anlamına gelir. Veriler tek bir yönde aktığından, bir uygulamada hata ayıklamak ve bir sorunun nerede olduğunu bilmek daha kolay hâle gelir. Tek yönlü veri akışı avantaj olduğu kadar dezavantajda denilebilir. Proje büyüdükçe veri taşımanın zorlaşması durum yönetim araçlarının kullanılmasını gerektirir.
Çalışma Ortamının Hazırlanması
JavaScript Temelleri bölümünde bahsedildiği gibi JavaScript dosyalarını çalıştırabilmek için NodeJs uygulamasının bilgisayarda kurulu olması gerekiyor.
React uygulamalarını geliştirirken JavaScript paket yöneticisine ihtiyaç duyacağız. Paket yöneticileri React uygulamasında bulunan paket bağımlılıklarını yönetir. NodeJs kurulumu ile bilgisayarınıza Npm kurulumu da yapılacaktır.
Npm, Node Package Manager (Düğüm Paket Yöneticisi) kelimelerinin kısaltmasıdır. Bir NodeJs platformu paket yöneticisidir. Npm, yaygın olarak dünyanın en büyük yazılım kayıt defteri olarak kabul edilir. Tüm dünyadaki açık kaynak geliştiricileri tarafından kaynak kodlarını yayınlamak ve paylaşmak için kullanılır.
İlk React Uygulaması (Create React App)
React ile uygulama geliştirmeye başlamak için, dosya yapısında hazırlanması gereken modül birleştiricileri, Javascript versiyon düzenleyicileri gibi eklentilerin kurulması gereklidir. Geliştirici tüm bu kurulumları kendisi hazırlayarak yeni bir React uygulamasını ayağa kaldırabilir. Ancak yeni başlayanlar için bu eklentiler hem karmaşık olacaktır hem de zaman alacaktır.
Create React App (CRA), React uygulamasını çalıştırmak için gerekli yapılandırma dosya ve eklentileri kurulum esnasında hazırlar. Terminal ekranından yazılacak tek bir komut sayesinde gerekli tüm kurulumlar yapılır. Kurulumları yapmak için NPM paket yöneticisini kullanır. Dosyalar hazırlandıktan sonra birkaç komut daha yazarak uygulama ayağa kaldırılabilir. CRA, React ile uygulama geliştirmeye yeni başlayanlar için faydalı bir araçtır. React projesinin çok hızlı bir şekilde oluşturup çalıştırılmasını sağlar. Manuel olarak herhangi bir konfigürasyona gerek kalmaz. CRA, React’ında geliştiricisi olan Facebook tarafından desteklenir. Windows, Linux ve MacOs’ta çalışabilir.
React Dosya Yapısı
İlk uygulama çalıştırıldıktan sonra, React uygulamasını oluşturan dosyaları inceleyebiliriz. CRA ile proje oluşturduktan sonra, uygulamaya ait tüm klasör ve dosyalar uygulama ismi ile oluşturulan klasör altında toplanır. Oluşturulan React uygulamasının kendine özel dosya yapısı (Kitabınızın sayfa 266 da Görsel 8.4’teki) gibidir.
Uygulamanın altında bulunan public klasörü SPA için gerekli index.html dosyasının bulunduğu klasördür. React Sanal DOM yapısını index.html ile düzenler ve yayınlar. Uygulamaya ait logo gibi bilgiler bu klasör içerisinde tutulur.
Uygulama altındaki diğer önemli klasör ise node_modules adlı klasördür. Burada uygulamaya ait tüm paketler kurulur ve tutulur. Geliştiriciler paketlerin kurulumu için paket yöneticisi kullanır. Doğrudan müdahale yerine paket yöneticisi ile kurulumlar ve düzenlemeler yapılır. Paketlerin yönetilmesini sağlayan dosya ise package.json dosyasıdır. package.json içerisinde paket sürümleri tutulur. Paket yöneticisi ile yüklenen paketlerin bilgisi doğrudan buraya da eklenir.
React ile geliştirme yapılacak kodların olduğu klasör ise src’dir. Geliştiriciler, gerekli tüm bileşen ve sayfalar için kodlarını bu klasör altında hazırlarlar. src altında bulunan index.js uygulamanın başlangıç dosyasıdır denilebilir. Bu dosya altında sanal DOM yapısı oluşturulur ve diğer komponentler projeye index.js dosyası altından dahil edilmeye başlar.
ReactDOM ile index.html dosyasındaki root id li elemana bir Sanal DOM yapısı oluşturulur. Sanal DOM yapısının oluşturulması ile komponentler yorumlanarak render işlemi yapılır.
CRA ile oluşturulan uygulama da sadece App komponenti olsa da aslında uygulamalar birden fazla komponent kullanılarak oluşturulur. Web sayfasının bölümleri oluşturulduktan sonra her bölüm bir komponentle yönetilir. Gerektiğinde birden fazla iç içe komponentte tanımlanabilir.
JSX
JSX, React tarafından kullanılan ve XML benzeri metinlerin JavaScript/React koduyla birlikte çalışabilmesini sağlayan söz dizimidir. JavaScript XML kelimelerinin kısaltması ile oluşturulmuştur. JavaScript kodlarının arasında, HTML diline benzeyen yapıda kod geliştirilebilmesine imkân sağlar. Babel gibi ayrıştırıcılar vasıtası ile JavaScript ve HTML kodları ayrıştırılır. Babel; Esas olarak ECMAScript 2015+ kodunu mevcut ve eski tarayıcılarda veya ortamlarda geriye dönük uyumlu bir JavaScript sürümüne dönüştürmek için kullanılan bir araç zinciridir.
Komponentler
Komponentler React uygulamalarının temel yapı taşlarındandır. Uygulamada her bölüm için farklı komponentler tasarlanabilir. Tasarlanan komponentler birleştirilerek uygulama oluşturulur. Sayfadaki bölümlerin parçalanarak kolayca komponentlerle tasarlanabilmesi ve komponentlerin uygulamaya kolay dahil edilebilmesi, kullanıcı arayüzlerini oluşturmayı da kolaylaştırır. Sayfaya komponentleri dahil ederken dışarıdan içe doğru bir ağaç yapısı olarak düşünebilir. React komponentleri temelde ekranda nelerin oluşturulması gerektiğini söyleyen bir parça JSX kodu döndürür. React’te temel olarak iki tür komponent vardır.
Fonksiyon Komponentler: Fonksiyon komponentler, basitçe javascript fonksiyonlarıdır. Bir javascript fonksiyonu yazarak React’te fonksiyonel bir komponent oluşturulabilir. Bu fonksiyonlar parametre olarak veri alabilir.
Sınıf Komponentler: Sınıf komponentleri, fonksiyonel komponentlerden biraz daha karmaşıktır. Fonksiyonel komponentler, uygulamadaki diğer komponentlerle iletişim hâlinde değildirler. Ancak sınıf komponentleri birbirleriyle çalışabilir. Bir sınıf komponentinden diğer sınıf komponentine veri aktarılabilir. React’te sınıf tabanlı komponentler oluşturmak için JavaScript ES6 sınıflarını kullanabiliriz.
Sınıf ve fonksiyon tabanlı komponentlerin birbirlerine göre avantajlarından bir diğeri de komponent içinde veri tutulmasıdır. React 16.8 sürümünden önce state adı verilen yapı sadece sınıf komponentleri için kullanılabiliyordu. 16.8’den itibaren duyurulan Hooks yapısı ile fonksiyon komponentlerinde de state yapısı kullanabilir oldu.
JSX, komponent isimlerinin HTML etiketleri ile karıştırılmaması için büyük harfle başlamasını ister.
Props
React ile alt eleman olan komponentlere doğrudan veri aktarmak için props yapıları kullanılır. Komponent çağrılırken girilen değerler nesne olarak alt komponente aktarılır ve prop olarak adlandırılır. Props veri türü olarak number, boolean, string, dizi gibi veri türlerini taşıyabilir. Komponent render edilirken birden fazla prop alabilir. Yine aynı şekilde birden fazla özellik içeren nesne veya çok elemanlı dizi prop olarak alt elemana gönderilebilir. Komponentler çağrılırken sıklıkla döngüler kullanılabilir. Web sunucusundan alınan veriler, alt komponentlere prop olarak verilerek döngü oluşturulur.
React komponentler arasında veri iletimini yukarıdan aşağıya doğru yapar. Ancak iç içe geçen birçok komponentin olduğu durumlarda bu şekilde veri transferleri geliştiricinin hata yapma olasılığını arttıracaktır. Komponentler arasında veri taşıma React’ın ilk sürümlerinden itibaren süregelen bir sorundur. Bu sorunu aşmak için State Management (Durum Yönetimi) araçları kullanılmaktadır. Redux, ContexApi gibi araçlar kullanılarak bu sorun aşılabilmektedir.
useState()
React’ın diğer bir önemli yapısı da State nesneleridir. Durum anlamına gelen State, komponentin davranışını kontrol eden bir dizi gözlemlenebilir özelliğin nesnesi olarak tanımlanabilir. Başka bir deyişle State, komponentin ömrü boyunca değişebilecek bazı bilgileri tutan bir nesnedir.
React’ın 16.8 sürümünden önce yalnızca sınıf komponentlerinde State nesneleri kullanılabiliyordu. 16.8’den sonra gelen hook yapısında duyurulan userState() sayesinde fonksiyon komponentlerde de state yapısı kullanılabilir oldu. Komponent içerisinde state nesnesini kullanmak için bir değişken adı ve değişkenin içeriğini değiştirebilmek için farklı bir değişken kullanılmalıdır.