React Temelleri

Bu durum 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. Uygulamanın hızlı olması önemlidir çünkü kullanıcılar sayfaya girdiğinde işlemlerini bitirip çıkmayı hedefler. Sayfaların tepki süresi kullanılabilirlik için önemli etkendir.

SPA yapısı sayesinde, kullanıcılar için sunucuda hazırlanan sayfalar, kullanıcı bilgisayarlarında hazırlanmaya başladı. Yani sistemin yükü sunucudan alınıp kullanıcı bilgisayarlarına devredilmiş oldu. Sistem yükü kullanıcılara dağıtıldığı için, kullanıcı sayısı arttıkça sistem kaynağı da artar. Aynı zamanda ön bellek kullanımı geleneksel web uygulamalarından daha iyidir. Kullanıcı interneti yavaş olsa dahi, yerel veriyi daha iyi kullandıkları için uygulamada gezinme daha hızlı olacaktır. SPA ile hazırlanan uygulamaların avantajlarından bir diğeri ise tüm ekranlarda sayfa yapısı aynı kalacağı için kullanıcı deneyimi artacaktır. Kullanıcı farklı sayfa tasarımları ile karşılaşmayacaktır.

SPA, avantajlarının yanında dezavantajlara da sahiptir. Geliştiriciler için önemli olan SEO algoritmaları hâlâ SPA uygulamaları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.

Web sayfasındaki elemanların yapısını modelleyen ve düzenlenmesine imkân sağlayan yapı Document Object Model (DOM) olarak tanımlanmaktadır. 

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.

React, komponent tabanlı bir konsept kullanarak bildirimsel kullanıcı arayüzleri oluşturmaya odaklanan bir JavaScript kütüphanesidir. 

Web uygulamaları için kullanılan sürümleri doğrudan React veya ReactJS  olarak adlandırılır.

React'ın mobil uygulama için kullanılan sürümleri React Native olarak adlandırılır.

React’ın bugünkü popülaritesi, diğer tüm ön uç geliştirme kütüphanelerinin popülaritesini gölgede bıraktı. Bunun nedeni React'da dinamik uygulamaların kolay oluşturulması, gelişmiş performans, hızlı öğrenme eğrisi, hem web hem de mobil uygulamaların geliştirilmesi için kullanılabilmesi ve tek yönlü veri akışını kontrol edebilmesidir. 

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.

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 ile uygulama ortamını hazırlayabilmek için bilgisayarda NodeJs ve NPM yüklü olmalıdır.

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. 

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 burayada 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.

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.

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.

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.

React’te temel olarak iki tür komponent vardır. Bunlar fonksiyon komponentler ve sınıf komponentlerdir. 

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 ile alt eleman olan komponentlere doğrudan veri aktarmak için props yapıları kullanılır.

Props veri türü olarak number, boolean, string, dizi gibi veri türlerini taşıyabilir.

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’ı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.