Merhaba herkese. Yeni bir eğitim serisi ile beraberiz. Bu eğitim sürecimiz boyunca React konusunu ele alıyor olacağız. React nedir ile başlayıp bir projeyi adım adım gerçekleştirirken aynı zamanda React konularını ele alıyor olacağız. Keyifli bir öğrenme süreci dilerim.

 React.JS Nedir?

React’ın resmi sitesindeki tanımı, “İnteraktif UI tasarımlarını acısız bir şekilde yapmanızı sağlar.” şeklindedir. Bildiğiniz üzere büyük yazılım firmaları oluşturdukları yeni kütüphaneler ve teknolojilerle hem dikkat çekiyor hem de geliştiricilerin kodlama serüvenlerini kolaylaştırıyorlar.

React Javascript kütüphanesini Facebook üretmiştir. Bu kütüphanenin amacı kullanıcı arayüzleri oluşturmaktır. React bir framework değil, belirttiğim gibi bir kütüphanedir. Bunun nedeni, React sadece view (görünüm/sayfa) katmanına odaklanır. Bunun dışında herhangi bir mimari katman ile bir ilgisi yoktur.

React bir amaca odaklanmıştır. O da arayüzdeki bütün işlemleri en mantıklı, en az maliyetle, en kolay ve en performanslı şekilde yapmaktır. Buna odaklandığı içinde sunduğu çözümler geliştiricilerin kodlama yöntemlerini değiştirmiş ve kolaylaştırmıştır. Yeni bir mantık ortaya koyması nedeniyle de çok önemli bir yere sahip olmuştur.

React yapısına biraz göz atacak olursak component(element) bazlı, Virtual DOM(Sanal DOM) mimarisini kullanan bir kütüphanedir diyebiliriz.

Component Nedir?

Component bir web sayfasının her bir parçasına verilen isimdir.

Örneğin bir web sayfasında bir ana şablon vardır. Daha sonra bu şablon içinde Navbar, Sidebar, ContentArea, Footer gibi alanların her biri bu bütünün bir parçasıdır ve biz bunlara component deriz. Bu mimari yapı zaten React’in hızlı olmasını da sağlayan yapıdır. Aynı zamanda daha hızlı proje yaratmanın da sihirli anahtarıdır.

Burada kısaca örnek vermek gerekirse. Daha önceden geliştirme yaptıysanız anımsayacaksınız ki örneğin bir div elementini farklı html dosyaları içinde kopyala yapıştır yaparak tekrar tekrar kullanırdık. React component yapısıyla bize şunu söylüyor o div elementini bir kere yaz çağırman gereken yerde tekrar tekrar oradan çağır ve kullan.

Bunu yapmamızın bir diğer sebebi ise örnek olarak verdiğimiz ilgili div yapısında bir değişiklik yapacak olsak, diğer kullandığımız tüm 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 güncellenecektir.

Yani kısaca Component projemiz üzerindeki tüm parçalardır. Yani her şeydir diyebiliriz.

Virtual DOM Nedir?

DOM (Document Object Model) dediğimiz yapı; web sayfalarının bize görünmesini sağlayan, HTML elemanlarının hiyerarşik bir biçimde 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 düşünebiliriz.

Virtual DOM için örnek vermek gerekirse, HTML web sayfanız üzerinde herhangi bir değişiklik yaptığımız anda, o değişikliğin ekranımıza yansıması için bütün DOM taranır ve ilgili değişiklikler oraya yansıtılır. Özetle bütün DOM baştan render edilmiş olur. İşin içine Virtual DOM girdiğinde ise herhangi bir güncelleme; ilk önce Virtual DOM üzerinde, yani bellek üzerinde yapılıyor. Daha sonra Virtual DOM’dan, gerçek DOM bileşenimize aktarılırken Virtual DOM ile gerçek DOM arasındaki farklılıklar kontrol ediliyor. Bu sırada React içerisinde 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?

React, Virtual DOM mimarisini kullanan ve render işlemlerini mantıklı bir şekilde fiile döktüğü için DOM üzerinde çok fazla değişikliğin yaşandığı projelerde kullanılması daha uygun olacaktır. Yani işlemlerin daha çok kullanıcı ara yüzü tarafında olduğu projelerde kullanılır.

React Öğrenmeli Miyim?

Buna şahsen cevabım, eğer ki web programlama dünyasında iseniz React’ı öğrenerek, programlama hayatınıza yeni bir soluk getirmiş olursunuz. Eğer mobil uygulamalar üzerinde çalışı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ı öğrendikten sonra pişman olmayacağınız bir yapıdır, React.

Evet böylelikle kısaca da olsa React yapısını ve ne olduğunu öğrenmiş olduk. Bir sonraki yazılarımla beraber yavaş yavaş React dünyasına giriş yapacağız.

Görüşmek üzere.


muratbilginer