React JS Nedir?

Önceki En İyi 9 JavaScript Framework yazımızda React’a kısaca değinmiştik.

Şimdi ise facebook tarafından geliştirilen ve web uygulamalarında kullanılmak üzere hazırlanan React’a detaylıca değineceğiz.

React Nedir?

React bir JavaScript kütüphanesi olup web uygulamaları için hızlı ve interaktif kullanıcı arayüzleri oluşturmada kullanılır.

Açık kaynak kodlu, bileşen bazlı ve front-end bir kütüphane olan React, sadece uygulamanın görünüm katmanından sorumludur.

React, Jordan Walke adında Facebook’ta çalışan bir yazılım mühendisi tarafından geliştirilmiştir.

Instagram’ın web sitesinin kullanıcı arayüzü de tamamen React ile geliştirilmiştir. Nasıl işlediğini gözlemlemek için gelin aşağıdaki Argenova'nın Instagram (@argenovatr) sayfasını ele alalım.

Gördüğünüz üzere kullanıcı arayüzü birçok bileşene ayrılmış ve her bileşenin kendine has özelliği ve işlevi var. Bu yönüyle React, debug yaparken geliştiricilere birçok kolaylık sağlamakta.

Argenova Instagram

Detaylı bilgilere değinmeden evvel öncelikle gelin biraz JavaScript ve JavaScript kütüphanesi ne demek bunlardan bahsedelim.

JavaScript Nedir?

Adından da anlaşılacağı üzere JavaScript, dinamik web içerikleri oluşturmak ve kontrol etmek amacıyla kullanılan bir scripting programlama dilidir.

JavaScript

Dinamik web içerikleri de animasyonlu grafikler, etkileşimli forumlar gibi yapılar içerir. JavaScript, web sitelerine veya web uygulamalarına animasyonlu ve interaktif özellikler eklemek amacı ile kullanılır.

JavaScript Kütüphanesi Nedir?

Yukarıdaki tanımdan da anlayacağınız üzere JavaScript, web siteleri ve web uygulamaları geliştirirken çok önemli ve merkezi bir konumda. Fakat bazen JavaScript kullanırken tekrarlayan fonksiyonlara ihtiyaç duyulur ve bu fonksiyonları her defasında sil baştan yazmak sıkıcı gelebilir.

Tam da burada JavaScript kütüphaneleri devreye girer.

JavaScript kütüphaneleri yaygın JavaScript görevleri için kullanılan önceden yazılmış kodlar bütünüdür ve bu kütüphaneler sayesinde yukarıda da bahsettiğimiz vakit alan, gereksiz kod yazma süreci ortadan kalkmış olur.

React (bir diğer adıyla ReactJS) da JavaScript kütüphanelerinden biridir.

Neden JavaScript Geliştiricileri kullanır?

ReactJS geliştirilmeden evvel, geliştiriciler kullanıcı arayüzleri geliştirirken -vanilla JavaScript- veya -jQuery- gibi diğer JavaScript kütüphanelerini kullanıyordu. Bu kütüphaneler ise daha az kullanıcı arayüzü odaklıydı. Dolayısıyla birçok hata ve bug ile karşılaşılıyor, bu da sürecin zorlaşmasına ve vakit kaybına sebep oluyordu.

2011 yılında Jordan Walke bunu önlemek amacıyla kullanıcı arayüzü geliştirmeyi kolaylaştırma amacı ile ReactJS’i oluşturdu. Bu amacın dışında ise ReactJS 2 temel özellik ile karşımıza çıkıyor:

JSX Nedir?

JSX

JSX kısaca kullanıcı arayüzünün görünümünü tanımlamada kullanılır.

Herhangi bir web sitesinin merkezinde HTML dökümanları mevcuttur. Web tarayıcınız bu dökümanları okur ve bilgisayarınızın veya kullandığınız diğer elektronik cihazların ekranına web sayfaları olarak yansıtır. Bu işlem esnasında tarayıcılar Document Oriented Model (DOM) adında, sayfaların nasıl düzenlendiği ile ilgili bir yapı oluşturur. Geliştiriciler bu yapıyı JavaScript gibi programlama dilleriyle değiştirerek dinamik içerikler ekleyebilir.

JSX (JavaScript eXtension) ise geliştiricilerin basit, HTML tarzı bir kod ile kendi DOM’larını değiştirip geliştireceği bir React uzantısıdır ve JSX son haliyle beraber kullandığınız herhangi bir tarayıcı ile tamamen uyumlu çalışacak şekilde güncellenmiştir.

JSX kullanarak DOM’u güncellemek inanılmaz bir web sitesi performans artışı ve geliştirme verimliliğini beraberinde getirir. Bu nasıl mı olur?

Virtual DOM

Eğer ReactJS kullanmıyorsanız, web siteniz DOM’u güncellemek için HTML kullanır. Bu, kullanıcının arayüz ile teması olmadan ekrandaki değişikliklerin olduğu işlemdir. Bu işlem statik web sitelerinde sorunsuz bir şekilde gerçekleşir, fakat yüksek kullanıcı yoğunluklarının olduğu dinamik web sitelerinde kullanıcı her yenile komutu verdiğinde tüm DOM’un güncellenmesi gerekir. Bu da ciddi problemlere yol açabilir.

Virtual DOM

Bunu önlemek için ReactJS tarafında Virtual DOM adında bir yapı geliştirilir.

Virtual DOM sayesinde kullanıcı ne zaman yenile tarzında bir komut verse, ReactJS gerçek DOM’daki değişikleri tespit eder. Bu sayede tüm DOM’un güncellenmesinden ziyade sadece değişiklik yapılan alan için güncelleme sağlanmış olur.

Bu özellik, kompleks ve yüksek kullanıcı etkileşimi içeren web sitelerinde ciddi anlamda düşük hesaplama güçleri ve yüklenme zamanları ile hem kullanıcılara, hem de geliştiricilere büyük avantaj sağlar.

Son Olarak:

Web geliştirme alanında başarı kazanmak demek kodunuzu olabildiğince etkili ve verimli hale getirmek için doğru araçları kullanmak demektir.

Kullanıcı arayüzleri oluşturma söz konusu olduğunda ReactJS, bunun nasıl olması gerektiği hakkında bilmeniz gereken önemli bir teknolojidir.

Eğer bu teknolojiyi öğrenmek istiyorsanız buradan React resmi sitesindeki dökümantasyonu inceleyip en kısa zamanda ReactJS yazmaya başlayabilirsiniz!