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.

React Kurulumu Nasıl Yapılır?

React Kurulumuna geçmeden önce npx kurulu değilse kuralım. Npx Kurulum komutu:

      npm i -g npx
      yada
      yarn global add npx
    

Npx kurulumunu yaptıktan sonra react projemizi kurarak çalıştıralım. Terminalden komutlarımız sırasıyla

      npx create-react-app projeadi
      cd projeadi
      npm start
    

      npm cache clear --force

      npm uninstall -g create-react-app
      yada
      yarn global remove create-react-app
    

Global ve cache hatalarını giderdikten sonra tekrar kuruluma gecelim. Sırasıyla komutları uygulayalım.

      npx create-react-app projeadi
    

Eğer permission denied tarzı hata alırsanız. npx create komutunun başına sudo koyarak deneyin.

      cd projeadi
      npm start
    

React projemizi kurarak çalıştırdığımızda bizi tarayıcıda 3000 portu boş ise yada başka boş olan port ile karşılayacak Örnek: http://localhost:3000/

      You can now view projeadi in the browser.

      Local:            http://localhost:3000
      On Your Network:  http://192.168.1.36:3000
    

Yukarda terminalden sizede verdiği gibi local ve Network üzerinden linklere tıklarayarak kendinizde tarayıcıda acabilirsiniz.

Evet artık React projemiz ayağa kalkarak tarayıcıda çalıştı.

Component Nedir?

React Projemizi çalıştırdıktan sonra temel yapı taşlarını inceleyerek öğrenmeye devam edelim. İlk olarak react freamwork'nün en önemli temel yapı taşı olan component nedir ve çalışma mantığını inceleyelim.

Yuraıda react çalışma mantığını, html, dom yapılarını bahsetmiştim. Kısaca yorumlamak gerekirse react dom yapılarını kullanarak html web sayfasındaki her nesneyi parcalayarak klonluyor. Html üzerindeki her obje dom parçalarına ayrıldığı için bunları anında kontrol edebilme mekanizmasına sahip oluyor. Bu sayede kontrol ettiği dom objelerini bize eklenti olarak sunuyor ve aynı zamanda bizede eklenti yani component kullanım ve oluşturma hakkı veriyor.

Componentler bir bütünün parcalara ayrılmış hali konumunda iken bize kontrol mekanizmasını kendi stantdartlarına uygun olarak çalışmamıza olanak sağlıyor.

Component'nin çok kısa tanımı ve kullanımı html sayfasında ki her nesneyi parçalayarak bileşenler olarak tanımlıyor. Bileşen yada eklenti olarak kullanmamıza imkan sağladığı için html domlarında nerede canlı değişiklik yapılıyorsa gidiyor sadece ve sadece orayı değiştiriyor. Bu sayede tüm html sayfa yenilenmiyor belirlediğimiz alan sadece güncelleniyor.

React yani Tepki Html web sayfasını klonlayarak dom yapısında atom parçalarına ayrılmış ve her parcanın canlı hareketlerini kontol ederek çalışmamıza imkan sağlıyor. Bu muazzam yapıyı bizimde kullanmamız için Component'ler üzerinde çalışmamızı istiyor.

Component Kullanımına geçmeden react projemizin klasörüne ve kök dizin dosya yapısına göz atalım.

React klasör yapısını inceleyelim

React projemizi kurduktan sonra projemizin içinde hazır klasör yapısı ile karşılaşacağız. Bu yapı bize muazzam canlı html sayfası düzenleme işlemleri yapmamıza olanak sağlayacak. React klasör yapısı:

• node_modules
• public
• src
• package.json