ReactJS Nedir ? Nasıl Kullanılır ?

  • 20.37.2016
  • tayyipyetis
  • ReactJS

react jsMerhaba arkadaşlar. güzel bir cuma günü sabah saatlerinde yine faydalı bulduğum bir konuda makale yazmak istedim. JQuery ile ilk tanıştığım zamanlar onun mükemmel bir Client kodlama kütüphanesi olduğunu düşündüğümü hatırlıyorum aslında bu fikrim hala çok da değişmiş değil. Nedense hep alt seviye programlama dillerine ilgi duymuşumdur örneğin çok bilmesem de Assembly hep ilgimi çekmiştir keza C dili de öyle. çünkü tüm kontrol sizdedir ve ne yapmak istiyorsanız onu yapabiliyorsunuzdur üst seviye dillerin saçma sapan sınırlamalarına takılmak ve gereksiz algoritmalar üretmek zorunda değilsinizdir fakat her şeyin olduğu gibi alt seviye dillerin de elbette kötü tarafları var modern diller ile bir kaç satırda yazabildiğiniz bir uygulamayı daha çok kod yazarak geliştirmek zorunda kalıyorsunuz.

JQuery de bana göre alt seviye ama etkili bir kütüphane isminden belli olduğu üzere "Query" yani sorgu mantığı ile DOM elementlerini tam onikiden vurabiliyorsunuz. Hiyerarşik verileri sorgulama teknolojilerine özel bir sempatim olduğu için Xpath, XQuery, gibi ufak ama etkili teknolojiler bana pratik gelir Jquery de kendi alanında böyledir. Fakat teknoloji geliştikçe sorunlara yeni çözümler geliyor insanlar durmadan ihtiyaçlarına daha hızlı cevap verecek çözümler üretmek istiyorlar ReactJS de bu çözümler arasında. Facebook tarafından geliştirilen ve adını ilk uluslararası bir şirketin kariyer sayfasında aranan nitelikler kısmında gördüğüm bu kütüphane için bir kaç araştırma sonrasında gereksiz hükmüne varmıştım ve peşini bırakmıştım fakat son zamanlarda üzerinde çalıştığım bir projemde önemli bir problemle karşılaştım Back-End tarafından sadece JSON göndererek hızlı ve pratik bir şekilde HTML arayüzü oluşturmam gerekiyordu. Bu sebeple tekrar peşine düştüm ve ilgimi çekmeye başladı özellikle JSX betimlemesi ile bütünleşik kullanıldığı takdir de kendi çapında kullanılabileceğini farkettim. şimdi bu kadar açıklamadan sonra yavaş yavaş örneklere geçelim. Bu arada resmi sitesine ve geniş örneklere https://facebook.github.io/react/ adresinden ulaşabilirsiniz 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="renderhml"></div>
    <script type="text/jsx">
      React.render(
        <h1>Merhaba Dünya!</h1>,
        document.getElementById('renderhml')
      );
    </script>
  </body>
</html>

yukarıdaki örnekte jsx betimlemesi kullanılıyor. JSX html sözdizimini daha rahat kullanabilmek için tasarlanmış bir döküman tipi "JSXTransformer-0.13.3.js" dosyası tarafından tekrar işlenerek normal "text/javascript" dökümanına dönüştürülüyor.

aşağıda JSX kullanmadan yapılmış bir örnek var.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
       var Hello = React.createClass({
         render: function() {
            return React.createElement("div", null, "Hello ", this.props.name);
         }
      });
      React.render(
        React.createElement(Hello, {name: "World"}),
        document.getElementById('container')
      );
    </script>
  </body>
</html>

Örnekteki Render metodunu inceleyin. html yapısı ile değil javascript yapısı ile createElement metodu kullanılarak ve json parametresi alarak yeni bir html node'u üretiliyor ve belirtilen bir elementine içerisine render ediliyor.

Devamı gelecek...

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap