React veya React.js Nedir

Bir önceki makalemde framework seçiminde hangi framework’ü seçmeliyiz konusun işlemiştim. Eğer React seçimini yaptıysanız veya react kullanıyorsanız bu makeleyi okuyabilirsiniz. React ve Reacta bağlı teknolojileri bundan sonra daha detaylı olarak anlatmayı düşünüyorum. Bu haftaki konum react nedir, neden ihtiyaç duyuldu, ne zaman yayınlandı, ne gibi özellikleri mevcut konularına elimden geldiği kadar değineceğim.

React, webde kullanıcı arayüzü oluşturan bir JS kütüphanesidir. Olaya MVC açısından bakarsak V - View harfini temsil ediyor. React’ın API kullanımı önceki teknolojilere kıyasla daha basit. Basitliğin getirmiş olduğunu avatajlardan biri de öğrenmesinin kolay olması. Uygulamanızı geliştirmeye başlarken api’nin tasarımın öğrenmek için çok fazla zaman harcamıyorsunuz.

React, iki büyük apiye bölünmüş durumda. Bunlardan birinci html elementlerinin render edildiği ReactDOM Apisi. Diğeri bileşenlerin tasarımını, verilerin çekilmesini, yerleşimini vs işlemlerini yaptığımız React Component Apisi.

React Ne Zaman ve Neden Yapıldı

2011 yılında Facebook’un kendi bileşenleri üzerine zenginleştirme çalışmaları yaparken yazılımcıların bazı noktalarda tıkanması ve bu sorunun çözümü için arayışa girmesi sonucunda doğdu. Facebook’un kullanıcı sayısının artmasıyla birlikte aynı zamanda ihtiyaçlarda bir o kadar artmaya başladı. Bu artış facebook.com ‘un bakımını zorlamaya başladı, çünkü bir bileşen üzerinde çok fazla sıralı olarak güncelleme işlemleri yapmak zorunda kalınıyordu. Bir bileşenin güncelleme işlemi yapılırken, bu bileşen farklı bileşenlere bağlıydı. Herhangi bir bileşen üzerinde yeni bir özelliğin aktive edilmesi ve canlıya verilmesi için çok fazla zaman alıyordu. Özellikle Facebook gibi dev firmaların her saniyelerinin yüzbinlerce dolar olduğunu düşünürsek, bu sorun hem maliyet hem de kullanıcı deneyiminde olumsuzluk oluşturuyordu.

React, 2011 yılında Facebook mühendislerinden Jordan Walke tarafından yukarıdaki sorunların çözümü için yaratıldı. İlk prototype

Mark Zuckerberg: "Our Biggest Mistake Was Betting Too Much On HTML5" -- En büyük hatamız HTML5 ‘e çok fazla güvenmemizdi.

React ilk olarak 2011 yılında Facebook Feedslerinde, 2012 yılında ise Instagram tarafından kullanıldı, 2013 yılında ise open-source oldu. React ilk yapılırken temel amaç hızlı, ölçeklenebilir ve basit bir framework oluşturmaktı. React aynı zamanda react veya react.js olarak adlandırılmakta.

React ‘ın aşağıda yazmış olduğumdan hariç daha fazla özelliği mevcut. Ancak ben şimdilik en önemli olan üç tane temel noktaya değinmeye çalıştım. Aşağıda yazacağım maddeler, bu özelliklerin birer tanıtımıdır. Daha sonra kod yazımında bu notların üzerinde daha detaylı ve daha fazla duracağız.

Virtual DOM

React, bundan önceki javascript kütüphaneleri veya frameworklerin aksine, Real DOM(Gerçek Doküman Yapısı) ile değil Virtual DOM(Sentetik Doküman Yapısı) ile çalışır. Nedir bu Virtual DOM? Dokümanda yapılmış olan bir değişiklik, bundan önceki doküman yapısı ile karşılaştırılır, eğer farklılık mevcut ise bu değişiklik dokümana yansıtılır. Virtual DOM tam olarak Real DOM’un birebir kopyasıdır ve memory kısmında tutulur. HTML elementleri ekranda göstermek masraflı bir iş olduğu için gerekli değişiklikleri virtual üzerinde yapar. Bu değişiklik yaparken bütün dokümanı tekrar update etmek zorunda kalmadığı için çok hızlı çalışır.

Virtual DOM teknolojisinden önce, siteleri eğer hatırlarsanız hesabınıza bir mesaj geldiğinde veya bildirim aldığınızda bütün sayfayı yenilemeniz gerekiyordu. Şimdi ise mesajlarımızı anında veya bildirimlerimizi tam zamanlı olarak ekranımızda görebiliyorsunuz. Bu işlemler olurken sayfayı yeniliyor muyuz? Hayır. Virtual DOM teknolojisi bize sayfayı yenilemeden değişiklikleri yansıtma kabiliyeti kazandırdı veya aldığımız verileri sayfayı yenilemeden sadece etkilenen bölgesi değiştirmemizi sağladı. Bu şekilde kullanıcılar ile daha fazla iletişim kurabilen siteler oluşturmaya başladık.

Eğer static bir siteniz varsa veya diğer bir ifadeyle sitenizin çok fazla kullanıcı ile iletişime geçen yanlarınız yok ise Virtual DOM veya Real DOM kullanmanız çok fark etmez. Ancak kendi arasında çok fazla iletişime sahip veya çok fazla bileşen içeren bir siteniz var ve webde rekabetçi olmak istiyorsanız Virtual DOM kullanmanız şu anda gerekli.

Örneğin, şu anda okumuş olduğunuz makaleyi beğenmek istiyorsunuz beğeni sonrasından kullanıcıya bu işlemin başarılı olduğunu hissettirmek veya yapılan işlemin sonucunu göstermek istiyorsunuz. Ben makale beğenildiği zaman rengi pembeden griye çekiyorum. Bu butona basıldığında yapılan işleme dikkat ederseniz sadece o butonun değiştiğini göreceksiniz. Eğer Virtual DOM olarak bu işlemi yapmamış olsaydık bütün HTML doküman yapısını tekrar değiştirmek zorunda kalacaktır. React’ın bu özelliği sayesinde sadece bir elementte değişiklik yapıp sadece o elementin değişikliği göstermesini sağlıyoruz. React kendi sitesinde bu süreci

Oluşturulan Virtual DOM ne string, ne xml, nede html ‘dir. Virtual DOM,gösterilecek olan DOM’un nasıl oluşturalacağını ifade eden bir javascript gösterimidir.

JSX

React, aynı zamanda Virtual DOM gösterebilmek için JSX teknolojisini geliştirdi. Bu teknoloji ile aynı anda hem html yazabilir hemde JS interaktif işlemlerinizi yapabilirsiniz. JSX, uzun açılımı JavaScript Extension’dur(JavaScript XML).Ne html ne js olarak tanımlayabiliriz, ama aşağıda da görüldüğü gibi JS koduna daha çok benziyor. Teknik olarak ise tamamiyle javascript kodudur ve html ile kesinlikle yakından uzaktan alakası yoktur. JSX kullanımı React ile zorunlu değil ancak artık sektörde JSX kullanımı standart hale geldi. Bende şahsen bylge üzerinde JSX kullanıyorum, hem declarative hem de kullanımı çok kolay. Ayrıca JSX, bütün browserlar ile uyumlu.

JSX yazılımda hayatımıza girmeden önce api’lerimizden veya veritabanındaki verileri göstermek için genellikle Template Engine teknolojilerini(Mustache, Handlebars, EJS) kullanmak zorunda kalıyorduk. Templatelerinde kendi aralarında çok ciddi farklılılar ve kabiliyet yetenekleri mevcuttu. Eğer birini bırakıp diğerine geçmek istersek, sanki yeni bir teknolojiye geçiyor gibi hissediyorduk. Bu teknolojilerin JSX’e göre eksik olan tarafıda performans sorunlarına sahip olmaları.

HTML Engine’larda ilk render yapılırken, JSX ile gösterilir gibi işlem yapılır. DOM metin şeklinde ifade edilir ve daha sonrasında ekranda gösterilir. İlk render ettiğimiz zaman herhangi bir farklılık söz konusu değil ancak veri değiştiği zaman sıkıntı başlar. Handlerbars veya EJS kullanırken bu değişikliğe tepki vermek için HTML doküman yapısını oluşturmak için bütün veriyi tekrar DOM’a koyup öyle işlem yapmaya başlarız. JSX ile doküman yapısından sadece etkilenen elementlerde değişikliğe gideriz(Burada bunu yapan algoritmanın apide olması şart). Mesela makale altına yorum girdiğimiz varsayalım, bunu JSX ile render ederken sadece eklenen yorumu dokümanda gösteririz ancak diğer template enginelarda dokümana sadece yorumun eklenmesi yapılmaz. Doküman tekrar kontrol edilir. Önceden oluşturulmuş olan doküman kaldırılır tekrar yenisi eklenir.

JSX gelişi ile beraber artık verilemizi göstermek için HTML Engine teknolojilerini kullanmamıza gerek kalmadı. Bu bence template enginelar kullanımların bir süre devam edecek olsa bile kullanımının azalacağını düşünüyorum. Kişisel görüşüm, orta vadede JSX’in, html doküman yapısını Virtual DOM kullanarak oluşturan teknolojiler için standart haline geleceğidir.

Bileşenler(Components)

Bir React uygulamasının ana merkezinde bileşenler veya bilinen adıyla componentlar yer alır. Bileşenler, birbirinden bağımsız olabilecekleri gibi birbirine bağımlı da olabilirler ve tekrar tekrar kullanılabilirler. Bir bileşen bir kaç bileşeni bir arada içereceği gibi aynı zamanda sadece kendisi bileşen olabilir. Kullanıcılar ile bu bileşenler sayesinde iletişim kurulabilir. Örnek olarak, bileşen üzerine yerleştireceğiniz bir buton, text area ve input ile kullanıcıyla iletişime geçilir.

Gerçek hayatta buna verilebilecek en güzel örnek lego örneğidir. Hepimiz lego ile oynamışızdır, bir şey yapmak istediğimiz küçük parçaları toplar bu parçaları sonra birleştirir ne yapmak istiyorsak onu oluşturmaya çalışırdık. Bazen ise diğer yaptığımız şeyden komple bir kısmı alır başka bir lego ile yapmış olduğumuz şeye eklerdik. Bir önceki paragrafta anlatılan aslında bundan farklı değil. Örneğin bylge.com üzerinde yer alan takip et butonu kendi başına bir bileşendir ama ben bunu istediğim yerde kullanıyorum ve tekrar tekrar her bir üst bileşende tekrar yazmak zorunda kalmıyorum.

Bileşenler React projesinde kullanımına göre çok farklı tiplere göre ayrılmakta ancak bu makalenin boyutunu aşacağından dolayı bu noktada son vermek istiyorum. Diğer makalelerde görüşmek üzere, iyi çalışmalar.