ReactJS Nedir?

ReactJS, Facebook’taki bir grup geliştirici tarafından geliştirilmiş ve halihazırda geliştirilen bir kullanıcı arayüzü kütüphanesidir. Kullanıcı arayüzü geliştirmede en çok MVC(Model-View-Controller) tasarım deseni kullanılmaktadır. React bu tasarım deseninin view kısmını oluşturmaktadır. Örnek vermek gerekirse Facebook’ta sağ üstte arkadaşlarınızın neleri beğendiğini ve paylaştıklarını siz herhangi bir şey yapmadan aktığını görürüz. Bu kısım ve alttaki sohbet kısmı react kullanılarak yapılmıştır.

Ama kısa sürede bu kadar popüler olmasının arkasında yatan sebepler nelerdir?

Öncelikle performans konusuna değinelim. React’ın önemli avantajlarından biri state değişkenlerini tespit ederek arayüzde belli değişiklikleri kendisinin yapmasıdır. Yani değişikliklere göre sürekli UI oluşturur. Aslında bu performans açısından sıkıntılı bir durumdur çünkü her değişiklikte DOM nesneleri tekrar oluşturulmak zorundadır. Bunun çözümünü de Sanal DOM mekanizmasıyla yapmışlardır. Sanal DOM, render edilen DOM’un kopyasıdır. Bir değişiklik olduğunda bu sanal DOM a yansıtılır. Daha sonra gerçek DOM ile sanal DOM arasındaki farklılık tespit edilerek sadece değişiklik yapılan elemanlar render edilir. Böylelikle her değişiklikte tüm elemanları render etmek yerine sadece değişiklik yapılan elemanlar render edilerek performans iyileştirilmesi yapımaktadır.

Bir diğer konu ise react bileşenleridir. React’ta arayüz geliştirirken temel amacımız bileşen oluşturmak olmalı. Sınıf yapısını kullanarak bileşen oluşturabiliriz. Buradan konuyla ilgili örneğe ulaşabilirsiniz.

ReactJS’de önemli bir konuda syntax konusudur. React’ta kodlama yaparken JSX syntaxını kullanmalıyız. Çünkü daha kolay ve okunabilirliği daha kolaydır. JSX söz dizimi kullanmadan React ile geliştirim yapmak zordur diyebiliriz. Bunun neden böyle olduğunu anlamak için bir html elemanının JS ve JSX’te nasıl oluşturulduğuna bakalım.

Buton oluşturalım.

HTML:

    <button class="btn btn-primary">Buton</button>
  

JS:

    React.createElement("button", {className:"btn btn-primary"}, "Buton");
   

JSX:

    <button className="btn btn-primary">Buton</button>
   

JSX syntaxı XHTML e çok benzemektedir. XHTML deki gibi katı kuralları bulunmaktadır. Etiketler mutlaka kapatılmalıdır. JSX ile XHTML arasında attribute farklılıkları bulunmaktadır. Mesela XHTML deki class ‘ın JSX deki karşılığı className’dir. Buradan tüm etiketlere ulaşabilirsiniz.

React bileşenlerinin tekrar kullanılabilirliği, dinamikliği ve erişimi sağlamak için props, state ve refs adında 3 alana sahiptir.

Props:Nesneye yönelimli programlamada kurucu metoda verilen parametreler gibi düşünebiliriz. Sonradan değişmeyecek veriler React bileşeni oluşturulurken bileşene bağlanır. Buradan örneğe ulaşabilirsiniz.

State:Bileşen içinde değişecek veriler için kullanılır. Stateler değiştiğinde React bu değişiklikleri algılar ve yeniden render işlemine gider.