React Nedir, Nasıl Kurulur, Reactjs Öğrenerek Proje Nasıl Geliştirilir?

Kendi platformunda da bahsetti üzere react bir javascript kütüphanesidir. User interfaces(Kullanıcı Arayüzleri) oluşturmak için facebook yazılım ekibi tarafından geliştirilmiş açık kaynak kodlu bir javascript kütüphanesidir.

React Nedir?

Facebook yazılım ekibi milyonlarca kullanıcının http isteklerinin karşılanmasını ve yeni güncellemeleri anında kullanıcıya göstermek için birçok yazılım dili ile geliştirmeler yapmış. Php, Phyton vb. Son olarak kendi yazılım dilini geliştirme kararı almışlar. Adından da anlaşılacağı üzere React yani Tepki demişler.

Burada milyonlarca kullanıcıya en hızlı cevabı server tarafını yormadan dom(Html) tarafını kontrol etmek ve canlı düzenlemek bakın burası önemli canlı düzenlemek bu şu anlama geliyor sitede aktif milyonlarca kişi varken html'de bir düzenleme oluyor ve bu da canlı oluyor siz sayfayı yenilemeden facebook akışı, arkadaş listeniz, gelen bildirimler, mesajlar anlık olarak değişiyor. Değişen taraf sadece gelen veriler değil facebook tasarım değişikliğine gittiğinde bile siz sitedeyken canlı anlık sayfayı yenilenmeden sadece belirlenen html(dom'u) alanı değişiyor.

Reactjs'nin bu kadar popüler olmasını sağlayan avantajlari nelerdir?

Canlı değişimleri, düzenlemeleri realtime olarak yapabilmek için facebook yazılım ekibi reactjs javascript freamworkünü geliştirdikten sonra yayınlıyor. Popüler olmasını ve bu kadar hızlı büyümesini sağlayan şey ise canlı veri akışı ile birlikte sayfa yenilenmeden canlı html düzenlemesi bu çok büyük bir detay küçük firma sitelerinde html'de bir değişiklik yaptığınızda ftpye dosyayı yeniden yükler ve tüm html sayfayı refresh ederek yeniden çalıştırırsınız.

Fakat milyonlarca kullanıcı sitenizde online durumdayken bunu yapmak herkesin değişikliği görebilmesi için sayfayı yenilemesi gerekiyor. Buda serverda milyonlarca kullanıcının aynı anda yeniden bağlanmasına ve serverı yormasına neden olacağı için react javascipt freamwork'ünün en büyük avantajı html(dom) tarafında canlı düzenleme yapabilmesi ve sadece belirlenen alanın değişmesini sağlamasıdır.

Html ve Dom Nedir?

Tarayıcılar html sayfası olarak siteleri ve sayfalarını gelen kullanıcıya yorumlar. Yani siz url adresine bir siteadi.com diye yazdığınızda gördüğünüz html işaretleme dilinin tarayıcıda yorumlanması sonucunda oluşan bir yapıdır. Html yapısının yüklenme render edilme aşamasında her element (head,body,foto,video,yazı,div vb) ayrı ayrı bir nesne haline getiriliyor buna DOM deniyor. Nesnelerin bir bütün haline Html İşaretleme dili deniyor.

Dom sayesinde ayrıştırılan ve nesne olan herşeyi kontrol edebiliyor ve düzenleyebiliyoruz. Html içinde bulunan kod yapısında bölümler(head,body) ve bunları taglarle sınıflandırıp özelliklerini belirleyebiliyoruz. Html içindeki her parca bir nesne yani Document Object Model(Doküman Nesne Modeli)'in kısaltması olan DOM dokümanları oluyor.

Reacjs çalışma mantığı

Reacjs html içerisinde ki nesneleri yani dom dökümanlarını kontol etmeyi ve canlı canlı düzenlemeyi başarıyor. Çalışma mantığını yani bu başarıyı nasıl elde ediyor derseniz işte burada muazzam bir teknik devreye giriyor. Örnekleyerek anlatmak gerekirse bir insanın kalbi durduğunda veya çalışmaz hale geldiğinde aynısından bir tane yerine takmanız gerekiyor ki ölen, yok olan kalp yerine çalışan bir kalp takılarak insanı yaşatmaya devam etsin.

Dikkat ettiniz mi örneği kalp olarak verdim arabada bozulan motor veya ışık yada patlayan lastik demedim çünkü arabayı duruk halde çalışmıyorken tamir ediliyor. Araba çalışırken motorunu değiştirebilirmisiniz? Reactjs çalışan insan üzerinde ki kalbin canlı olarak değiştirilmesini yapıyor. Konuyu artık daha net anladığınızı varsayıyorum ve bunu nasıl bir teknikle yaptığına geçiyorum.

Kalp Örneğimizden devam edelim bozulan kalp yerine yeni bir kalp takılması için insanı uyutuyorlar ama hücreler beyin hala canlı ve aktif. Html tarafında canlıyken react bir değişiklik yapmayı javascript dili ile başarıyor ve bunu kütüphane haline getirip yayınlıyor.

Reacjs Nasıl Çalışıyor?

Reacjts Real Dom(Gerçek) ve Virtual Dom(Sanal) ile aralarındaki farkı yakalayarak çalışır.

Reactjs html içinde bulunan dom(Real) yapısını klonluyor yani kopyalıyor. Bunu sanal bir dom(Virtual) dökümenti olarak tek yapıda 2 adet dom dökümenti olarak yapıyor. Sanal dom(Virtual) ve gerçek dom(Real) dökümenti arasında ki değişmeleri yakalıyor. Kullanıcıya tek dom olarak sunum yapıyor fakat arkada server tarafında sanal bir DOM daha çalışıyor. Burası biraz karışık gelebilir fakat online kullanıcıya bir dom(Real) html gösteriyor. Sanal dom(Virtual)daki değişiklik server tarafında yapılıyor ve kullanıcıya canlı sunuluyor.

Sanal Dom(Virtual) ve Gerçek Dom(Real) arasında ki değişiklik yapılırken kalp örneğindeki gibi tüm html sayfası yeniden yüklenmiyor. Sadece kalp yani istenen yer düzenlenen bölüm değişiyor.

Html Dom(Real) yapısında sadece belirli alanı değiştirmeyi yapmak içinde komponent olarak html(domu)'u bölümlere ayırıyor. Facebook sayfa akışı, bildirimler, hikayeler vb hepsi ayrı ayrı komponent ve ReactJs sanal dom(Virtual) ile gerçek dom arasında ki canlı değişimleri komponentler ile yapıyor. Komple tüm domu html'i değiştirmiyor. Kalp bozuksa veya değişmesi gerekiyorsa oraya ilk olarak klonunu compile ediyor. Yani komponent değişikliğini anlık olarak sanal dom üzerinden gerçekleştiriyor.

Reactjs Komponentler sayesinde sanal dom üzerinden gerçek html(dom)'unda sadece ilgili yerin değişmesini yapıyor. Artık Reactjs kurulumuna, yapısına, proje yapabilecek ve çalıştırabilecek şekilde uygulamalı olarak anlatmaya başlıyorum. Hazırsanız başlayalım.

Hazır yazılmış Nodejs npm paketlerini projelerinizde kullanabilirsiniz, Npm paketlerinin kullanımını detaylı bir şekilde anllattığım konu mevcut incelemesini yapmanızı tavsiye ederim.

Ecmascript6 Modül Sistemi

Ecmascript6 ile hayatımıza giren bir çok yenilik oldu kod yazma, kod görünümü, yazım kuralları gibi ES6'yı tüm detayları ile anlattığım konuyu incelemenizi tavsiye ederim. Gelelim es6 modül sistemine:

    //package.json dosyamıza type modül olarak belirtiyoruz.
    "type":"module"

    //Paketi projemize dahil etmeyi şöyle yapıyorduk
    var colors = require('colors');

    //Ecmascript6 modül ile require yerine import yazarak kullanıyoruz.
    import colors from "colors";
  

Ecmascript6 hatalar alıyorsanız büyük ihtimalle nodejs 13. versiyondan küçük kullanıyorsunuz. ES6 yüklemeniz gerekiyor.

    //Es6 yükleme Komutu
    npm install esm

    //node index.js dosyamızı çalıştıralım
    node -r esm index.js

    //package.json dosyası içine start olarak eklerseniz:
    "start": "node -r esm index.js"

    //node index.js dosyamızı çalıştırabiliriz
    npm start
  

Kendi modülünüzü yazarak projeyeye import dahil etme ise:

    //modulum.js adında bir dosya oluşturup içine kodlarımızı yazalım
    function metin(sname){
      return "İsmail " + sname;
    }

    export default metin;

    //modülümüzü index.js içinde çağırmak için
    import Modulum from './modulum.js';

    console.log(Modulum("Gültekin"));

    //Ekrana çıktı olarak: ismail Gültekin
  

Javascipt Callback Kullanım Yöntemleri

Javascipt'te bir veri alışverişi sırasında bağlandığınız yerden gelen sonuc aşamasında ki olayların kontrolü diyebiliriz. Bağlandığınız yer fonksiyon, fetch, rest-api yada sonuç istediğiniz veritabanı bile olabilir. Çok kısaca Callback tanımı istek yaptıktan sonra ki gelen veriyi ve o aşamayı kontol etmeyi baz alır.

Peki Kontol dediğimiz mekanizma nedir ne işimize yarayacak javascipt asenkron olduğu için gelen tüm istekleri işler sıraya koymadan, fakat bize gelen sonuca göre başka bir sorgu daha yapmamız gerekiyorsa örneğin userları listelerken onların postları da lazım arka arkaya ilk olarak userlar listelenmesi gerekiyor bunu örnekle yapalım.

callback.js adında bir dosya oluşturarak içine kodlarımızı sonrada node callback ile dosyamızı terminalden çalıştıralım

    //nodejs için fetch npm paketini projemize kuralım
    npm install node-fetch;

    //fetch paketini projemize dahil edelim
    const fetch = require("node-fetch");

    //1.ci bağlantı ile userları veri olarak çekelim
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((data) => data.json())
      .then((users) => {
        console.log("Userlar Yüklendi", users);
        //2.ci bağlantı ile gelen veriden sonra yeni veri cektik
        fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then((dposts) => dposts.json())
        .then((posts) => console.log("Post Yüklendi:", posts))
      })
      .catch((error)=>{//Hata alırsak cath ile yakalıyoruz
          console.log(error);
      })

    //Terminalden callback.js dosyamızı çalıştırıp sonucları görelim
    node callback.js
  

Javascipt Callback önemli bir konu sorgu, istek yaptığımızda gelen sonuca göre 2 adımda ne yapacağımızı ve hataları kontrol ettiğimiz bir yapıdır. Önemle üstünde durmanızı tavsiye ederim.