Kategori: React.Js

React.Js Dersleri – Başlangıç ve Kavramlar

React.Js Dersleri – Başlangıç ve Kavramlar

Giriş

Bugün yeni bir eğitim serisinin ilk yazısına başlıyoruz. Devamını getirmeyi düşündüğüm bu seride temel anlamda React.Js öğrenip bunun üzerine uygulamalar ve denemeler yapacağız. React.Js özetlemek gerekirse Facebook’un geliştirdiği bir javascript “user interface” kütüphanesidir. Detaylara inmeden önce bazı belii temel kavramların üzerinden geçmekte fayda var.

React.js Nedir?

React, Facebook tarafından geliştirilen etkileşimli öğeler oluşturulmasını kolaylaştıran, geniş kapsamlı ve sürekli güncellenen bir arayüz bileşenidir. React’ı diğer kütüphanelerden ayıran bir özelliği ise sadece istemci (client-side) taraflı değil aynı zamanda sunucu (server-side) taraflı da çalışabilme özelliğidir. Ayrıca durum değişikliklerini Sanal DOM (Virtual DOM) adı verilen bir yerde tutarak daha verimli çalışmalar gerçekleştirmenize olanak sağlar.

React.Js bir javascript arayüz oluşturma kütüphanesidir.
React.Js bir javascript arayüz oluşturma kütüphanesidir.

Sanal DOM (Virtual DOM) Nasıl Çalışır?

Bir insanın etrafında biçimlendirdiğiniz bir nesneniz olduğunu hayal edin. Bir insana ait bütün özelliklere sahip ve insanın o anki halini yansıtmış olsun. Şimdi bu objeyi alıp değişiklik yaptığınızı düşünün. Bıyık ve biraz da kaslı kollar ekleyin. Ne zaman bu değişiklikleri yapsak iki şey meydana gelir; Birincisi, React bir “Diffing” algortması çalıştırarak hangi değişiklikler yapıldığını tespit eder. İkinci adım ise “Uzlaştırma”, yani burada diff sonuçlarıyla DOM’u günceller. Basitçe React’ın DOM ile çalışma mantığı bu şekildedir. React çalışma şekli; gerçek insanı alıp baştan aşağı onu yeniden yapmak yerine sadece hayal edilen yeni görüntüde yüzü ve kollarını değiştirir.

Bu demek oluyor ki, eğer girdide bir metin bulunuyorsa ve işleyici meydana geldiğinde, girişin temel düğümü uzlaştırması için ayarlanmadığı sürece metin bozulmaz. Çünkü React sanal DOM’u kullanır.

Sanal DOM’da gerçekleşen hiçbir işleyiş kullanıcıya yansıtılmayacağı için de server-side programlama yapabilmek mümkün hale gelmektedir.

Başlangıç

React “Starter kit”ini indirerek artık eğitimlerimize başlayabiliriz.

React Starter Kit

Sayfamızı Oluşturalım

React’ı sayfamıza kurabilmek için öncelikle react.js, react-dom.js ve JSXTransformer.js yi sayfamıza eklememiz gerekmektedir. Daha sonra component’lerimizi yazabilmemiz için ise script taglarımızı açmamız gerekir. Ancak react yazabilmek için script tagımızını type değerini “text/jsx” olarak belirlemeliyiz. Bunu daha sonra açıklayacağım.