React JS nedir ?


Yazıya başlamadan once sizleri bir konuda bilgilendirmek istiyorum. React, gercekten geniş yelpazeli bir konu olduğu icin bu yazıda React ’ın mantığı ve işleyişi uzerine giriş seviyesinde bir yazı ile başlamayı uygun gordum. Ayrıca eğer karşınıza daha once duymadığınız teknik ve İngilizce terimler cıkar ise lutfen okumaya devam edin, muhakkak diğer paragraflarda acıklaması bulunmaktadır. Konuyu bu şekilde işlememin sebebi, daha akılda kalıcı olmasını sağlamaktır. Şimdiden keyifli okumalar

React.JS Nedir?
Genişletmek icin tıkla ...


React ’ın resmi sitesindeki tanımı, “İnteraktif UI tasarımlarını acısız bir şekilde yapmanızı sağlar.” şeklindedir. Peki şimdi gelin React ’ın amacını, işleyişini ve tanımını bir de biz ele alalım.

React; Facebook tarafından uretilmiş, kullanıcı ara yuzleri oluşturmak icin kullanılan bir javascript kutuphanesidir. React bir framework değil, belirttiğim gibi bir kutuphanedir. Bunun nedeni, React sadece view (gorunum/sayfa) katmanına odaklanır. Bunun dışında herhangi bir mimari katman ile bir ilgisi yoktur. React ’in tek gorevi; ara yuzdeki butun işlemleri en mantıklı, en kolay, en maliyetsiz, en performanslı yolla yapıyor olmaktır. React ’ı biraz daha teknik acıdan tanımlarsak; React, component (element) bazlı, Virtual DOM (Sanal DOM) mimarisini kullanan bir frontend kutuphanesidir.

Yazının başında bazı terimlere yabancı olabileceğinizi belirtmiştim. Bunlardan ilki “component” olabilir. Şimdi gelin, React geliştirmeye başladığınız gunden itibaren en cok kullanacağınız bu terimi inceleyelim.


Component Nedir?
Genişletmek icin tıkla ...


Eğer bana “Component nedir? Tek bir cumle ile acıklar mısın?” diye sorsalar, verebileceğim tek cevap; “Component, her şeydir.” olurdu. Evet, doğru okudunuz. Her şeydir. Butun halde olan bir şeyin, kucuk parcalardan oluştuğunu biliriz. Tıpkı insan vucudu ve organları arasındaki bağ gibi. İşte bu kucuk parcalar, React icin component anlamına geliyor.

Ornek olarak, web sitesi tasarlarken birden fazla kez ve farklı yerlerde tekrar tekrar yazarak kullandığımız yapılar oluyor. Anımsadınız değil mi? Aynı div elementini başka sayfalarda kullanmak icin kopyaladığımız işlemlerden bahsediyorum. İşte burada component sihirli gucunu ortaya cıkarıyor. Bizlere diyor ki, sen bileşen olarak beni bir kere oluştur ve sonra istediğin yerde, istediğin kadar kullan. Bunu yapmamızın bir diğer sebebi ise ornek olarak verdiğimiz ilgili div yapısında bir değişiklik yapacak olsak, diğer kullandığımız tum sayfalarda değişiklikleri yapıp kayıt edecektik. Fakat component kullandığımızda, oluşturduğumuz component bileşenini değiştirdiğimiz anda artık nerede kullanırsak kullanalım otomatik olarak onlarda guncellenecektir.


Virtual DOM Nedir?
Genişletmek icin tıkla ...


DOM (Document Object Model) dediğimiz yapı; web sayfalarının bize gorunmesini sağlayan, HTML elemanlarının hiyerarşik bir bicimde bir arada bulunması anlamına gelmektedir. Virtual DOM ise DOM yapısının anahtar => değer şeklinde memory ’de bulunmuş haline denir. Yani DOM ’un bir kopyasını almak gibi duşunebiliriz.

Virtual DOM icin ornek vermek gerekirse, HTML web sayfanız uzerinde herhangi bir değişiklik yaptığımız anda, o değişikliğin ekranımıza yansıması icin butun DOM taranır ve ilgili değişiklikler oraya yansıtılır. Ozetle butun DOM baştan render edilmiş olur. İşin icine Virtual DOM girdiğinde ise herhangi bir guncelleme; ilk once Virtual DOM uzerinde, yani bellek uzerinde yapılıyor. Daha sonra Virtual DOM ’dan, gercek DOM bileşenimize aktarılırken Virtual DOM ile gercek DOM arasındaki farklılıklar kontrol ediliyor. Bu sırada React icerisinde bulunan farklılık algoritmaları devreye giriyor ve eğer herhangi bir farklılık yoksa render işlemi yapılmıyor. Farklılık var ise sadece ve sadece ilgili değişiklik yapılmış olan dallardaki farklılıklar render ediliyor.

React Ne Zaman Kullanılır?
Genişletmek icin tıkla ...


React, Virtual DOM mimarisini kullanan ve render işlemlerini mantıklı bir şekilde fiile doktuğu icin DOM uzerinde cok fazla değişikliğin yaşandığı projelerde kullanılması daha uygun olacaktır. Yani işlemlerin daha cok kullanıcı ara yuzu tarafında olduğu projelerde kullanılır.

Peki React Oğrenmeli miyim?
Genişletmek icin tıkla ...


Buna şahsen cevabım, eğer ki web programlama dunyasında iseniz React ’ı oğrenerek, programlama hayatınıza yeni bir soluk getirmiş olursunuz. Eğer mobil uygulamalar uzerinde calışıyorsanız yine yolunuzu React ile kesiştirin ama bu sefer Native olanı ile. React Native ile hemen hemen aynı yapıyı kullanarak javascript ile mobil bir uygulama yazabilirsiniz. Kısacası oğrendikten sonra pişman olmayacağınız bir yapıdır, React.

Sonuc

Bu yazıda, React ’ın geniş dunyasının sadece kapısından iceriye bakmaya calıştık. React nedir, ne değildir umarım artık kafanızda bir şeyler canlanıyordur. Daha sonra kaleme alınan ve React kodlamaya başlanılan yazılarda her şey daha eğlenceli olacağına inanıyorum. İyi calışmalar.