Yazıya başlamadan ilkin sizleri bir mevzuda bilgilendirmek isterim. React, hakkaten geniş yelpazeli bir mevzu olduğundan bu yazıda React’ın mantığı ve işleyişi üstüne giriş seviyesinde bir yazı ile başlamayı uygun gördüm. Ek olarak eğer karşınıza daha ilkin duymadığınız teknik ve İngilizce terimler çıkar ise lütfen okumaya devam edin, muhakkak öteki paragraflarda açıklaması bulunmaktadır. Mevzuyu bu şekilde işlememin sebebi, daha akılda kalıcı olmasını sağlamaktır. Şimdiden keyifli okumalar.
React.JS Nedir?
React’ın resmi sitesindeki tanımı, “İnteraktif UI tasarımlarını acısız bir halde 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; Feysbuk tarafınca üretilmiş, kullanıcı ara yüzleri oluşturmak için kullanılan bir javascript kütüphanesidir. React bir framework değil, belirttiğim şeklinde bir kütüphanedir. Bunun sebebi, React yalnız view (görünüm/sayfa) katmanına odaklanır. Bunun haricinde herhangi bir mimari katman ile bir ilgisi yoktur. React’in tek görevi; ara yüzdeki tüm işlemleri en mantıklı, en kolay, en maliyetsiz, en performanslı yolla yapıyor olmaktır. React’ı birazcık daha teknik açıdan tanımlarsak; React, component (element) bazlı, Virtual DOM (Sanal DOM) – “DOM Nedir?” – mimarisini kullanan bir frontend kütüphanesidir.
Yazının başlangıcında bazı terimlere yabancı olabileceğinizi belirtmiştim. Bunlardan ilki “component” olabilir. Şimdi gelin, React geliştirmeye başladığınız günden itibaren en oldukça kullanacağınız bu terimi inceleyelim.
Component Nedir?
Eğer bana “Component nedir? Tek bir cümle ile açıklar mısın?” diye sorsalar, verebileceğim tek yanıt; “Component, her şeydir.” olurdu. Evet, doğru okudunuz. Her şeydir. Tüm halde olan bir şeyin, minik parçalardan oluştuğunu biliriz. Tıpkı insan vücudu ve organları arasındaki bağ şeklinde. İşte bu minik parçalar, React için component anlamına geliyor.
Örnek olarak, internet sayfası tasarlarken birden fazla kez ve değişik yerlerde yeniden yeniden yazarak kullandığımız yapılar oluyor. Anımsadınız değil mi? Aynı div elementini başka sayfalarda kullanmak için kopyaladığımız işlemlerden bahsediyorum. İşte burada component büyülü enerjisini ortaya çıkarıyor. Bizlere diyor ki, sen bileşen olarak beni bir kere oluştur ve sonrasında istediğin yerde, istediğin kadar kullan. Bunu yapmamızın bir öteki sebebi ise örnek olarak verdiğimiz ilgili div yapısında bir değişim meydana getirecek olsak, öteki kullandığımız tüm sayfalarda değişimleri yapmış olup 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 otomatikman onlarda güncellenecektir.
Virtual DOM Nedir?
DOM (Document Object Model) dediğimiz yapı; web sayfalarının bizlere görünmesini elde eden, HTML elemanlarının hiyerarşik bir halde bir arada bulunması anlamına gelmektedir. Virtual DOM ise DOM yapısının anahtar => kıymet şeklinde memory’de bulunmuş haline denir. Kısaca DOM’un bir kopyasını almak şeklinde düşünebiliriz.
Virtual DOM için örnek vermek gerekirse, HTML web sayfanız üstünde herhangi bir değişim yaptığımız anda, o değişikliğin ekranımıza yansıması için tüm DOM taranır ve ilgili değişimler oraya yansıtılır. Özetle tüm DOM baştan render edilmiş olur. İşin içine Virtual DOM girdiğinde ise herhangi bir güncelleme; öncelikle Virtual DOM üstünde, şu demek oluyor ki hafıza üstünde yapılıyor. Hemen sonra Virtual DOM’dan, gerçek DOM bileşenimize aktarılırken Virtual DOM ile gerçek DOM arasındaki farklılıklar denetim ediliyor. Bu sırada React içinde 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 yalnız ve yalnız ilgili değişim yapılmış olan dallardaki farklılıklar render ediliyor.
React Ne Süre Kullanılır?
React, Virtual DOM mimarisini kullanan ve render işlemlerini mantıklı bir halde fiile döktüğü için DOM üstünde oldukça fazla değişikliğin yaşandığı projelerde kullanılması daha uygun olacaktır. Kısaca işlemlerin daha oldukça kullanıcı ara yüzü tarafında olduğu projelerde kullanılır.
Peki React Öğrenmeli miyim?
Buna şahsen cevabım, eğer ki web programlama dünyasında iseniz React’ı öğrenerek, programlama hayatınıza yeni bir nefes getirmiş olmuş olursunuz. Eğer mobil uygulamalar üstünde çalışıyorsanız gene yolunuzu React ile kesiştirin fakat bu sefer Native olanı ile. React Native ile neredeyse aynı yapıyı kullanarak javascript ile mobil bir uygulama yazabilirsiniz. Kısacası öğrendikten sonrasında pişman olmayacağınız bir yapıdır, React.
Netice
Bu yazıda, React’ın geniş dünyasının yalnız kapısından içeriye bakmaya çalıştık. React nedir, ne değildir ümit ederim artık kafanızda bir şeyler canlanıyordur. Hemen sonra kaleme alınan ve React kodlamaya başlanılan yazılarda her şey daha keyifli olacağına inanıyorum. İyi emekler.