React JS nedir ?
Yazıya başlamadan önce sizleri bir konuda bilgilendirmek istiyorum. React, gerçekten geniş yelpazeli bir konu olduğu için bu yazıda React’ın mantığı ve işleyişi üzerine giriş seviyesinde bir yazı ile başlamayı uygun gördüm. Ayrıca eğer karşınıza daha önce duymadığınız teknik ve İngilizce terimler çıkar ise lütfen okumaya devam edin, muhakkak diğer paragraflarda açıklaması bulunmaktadır. Konuyu bu şekilde işlememin sebebi, daha akılda kalıcı olmasını sağlamaktır. Şimdiden keyifli okumalar
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 üretilmiş, kullanıcı ara yüzleri oluşturmak için kullanılan bir javascript kütüphanesidir. 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’in tek görevi; ara yüzdeki bütün işlemleri en mantıklı, en kolay, en maliyetsiz, en performanslı yolla yapıyor olmaktır. React’ı biraz daha teknik açıdan tanımlarsak; React, component (element) bazlı, Virtual DOM (Sanal DOM) mimarisini kullanan bir frontend kütüphanesidir.
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 günden itibaren en çok kullanacağınız bu terimi inceleyelim.
Eğer bana “Component nedir? Tek bir cümle ile açıklar mısın?” diye sorsalar, verebileceğim tek cevap; “Component, her şeydir.” olurdu. Evet, doğru okudunuz. Her şeydir. Bütün halde olan bir şeyin, küçük parçalardan oluştuğunu biliriz. Tıpkı insan vücudu ve organları arasındaki bağ gibi. İşte bu küçük parçalar, React için component anlamına geliyor.
Örnek 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 için kopyaladığımız işlemlerden bahsediyorum. İşte burada component sihirli gücünü ortaya çı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 ö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.
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, 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.
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.
Sonuç
Bu yazıda, React’ın geniş dünyasının sadece kapısından içeriye bakmaya çalış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 çalışmalar.
Yazıya başlamadan önce sizleri bir konuda bilgilendirmek istiyorum. React, gerçekten geniş yelpazeli bir konu olduğu için bu yazıda React’ın mantığı ve işleyişi üzerine giriş seviyesinde bir yazı ile başlamayı uygun gördüm. Ayrıca eğer karşınıza daha önce duymadığınız teknik ve İngilizce terimler çıkar ise lütfen okumaya devam edin, muhakkak diğer paragraflarda açıklaması bulunmaktadır. Konuyu bu şekilde işlememin sebebi, daha akılda kalıcı olmasını sağlamaktır. Şimdiden keyifli okumalar
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 üretilmiş, kullanıcı ara yüzleri oluşturmak için kullanılan bir javascript kütüphanesidir. 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’in tek görevi; ara yüzdeki bütün işlemleri en mantıklı, en kolay, en maliyetsiz, en performanslı yolla yapıyor olmaktır. React’ı biraz daha teknik açıdan tanımlarsak; React, component (element) bazlı, Virtual DOM (Sanal DOM) mimarisini kullanan bir frontend kütüphanesidir.
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 günden itibaren en çok kullanacağınız bu terimi inceleyelim.
Eğer bana “Component nedir? Tek bir cümle ile açıklar mısın?” diye sorsalar, verebileceğim tek cevap; “Component, her şeydir.” olurdu. Evet, doğru okudunuz. Her şeydir. Bütün halde olan bir şeyin, küçük parçalardan oluştuğunu biliriz. Tıpkı insan vücudu ve organları arasındaki bağ gibi. İşte bu küçük parçalar, React için component anlamına geliyor.
Örnek 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 için kopyaladığımız işlemlerden bahsediyorum. İşte burada component sihirli gücünü ortaya çı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 ö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.
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, 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.
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.
Sonuç
Bu yazıda, React’ın geniş dünyasının sadece kapısından içeriye bakmaya çalış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 çalışmalar.