ReactJS Ders 2 | Sanal DOM & Bileşen Tabanlı Geliştirme

1. Sanal DOM (Virtual DOM) Yapısı: React.js’in temelinde sanal DOM yapısı bulunur. Sanal DOM, gerçek DOM ağacının bir kopyasıdır ve React bileşenlerinin durumu değiştiğinde kullanılır.
   İşleyiş şu şekildedir:
   • Bir bileşenin durumu değiştiğinde, React, bileşenin sanal DOM temsilini günceller.
   • Güncellenen sanal DOM, React tarafından gerçek DOM ile karşılaştırılır ve sadece değişen kısımlar belirlenir.
   • Yalnızca değişen kısımlar gerçek DOM‘a uygulanır, diğer kısımlar tekrar render edilmez.
   • Bu şekilde, gereksiz yeniden render işlemleri engellenir ve uygulamanın performansı artırılır.
2. Bileşen Tabanlı Geliştirme Yaklaşımı: React.js, bileşen tabanlı bir geliştirme yaklaşımı sunar. Bu yaklaşım, uygulamanızı bağımsız ve yeniden kullanılabilir bileşenlere ayırmanıza olanak tanır. Bileşenler, UI’nin farklı parçalarını temsil eder ve kendi durumlarını (state) ve özelliklerini (props) tutarlar.
   • Durum (state): Bir bileşenin durumu, o bileşene özgü verileri temsil eder. Durum, bileşenin yaşam döngüsü boyunca değişebilir ve bileşenin yeniden render edilmesini tetikler.
   
   
   • Özellikler (props): Bileşenlere özellikler, dışarıdan veri aktarımını sağlar. Bir üst bileşenden alt bileşene props yoluyla veri aktarılabilir ve bu veri bileşende kullanılabilir.
   React bileşenleri, işlevsel bileşenler (functional components) ve sınıf bileşenleri (class components) olarak iki farklı şekilde oluşturulabilir. İşlevsel bileşenler, fonksiyonlar aracılığıyla oluşturulurken, sınıf bileşenleri, React.Component sınıfından türetilir.İşte bir örnek:

import React from 'react';

const Counter = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Bu örnekte, Counter adında bir işlevsel bileşen oluşturduk. useState hook‘unu kullanarak count adında bir durum tanımladık ve increment adında bir fonksiyon oluşturduk.

increment fonksiyonu, tıklama olayı gerçekleştiğinde count durumunu bir artırır. Bileşen, bir başlık, sayacın değeri ve artırma düğmesi içeren bir UI döndürür.

Bileşeni kullanmak için başka bir bileşende (örneğin, App bileşeninde) Counter bileşenini kullanabilirsiniz:

import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <h1>React App</h1>
      <Counter />
    </div>
  );
}

export default App;

Bu örnekte, App adında bir işlevsel bileşen oluşturduk ve Counter bileşenini içine ekledik. App bileşeni, bir başlık ve Counter bileşenini içeren bir UI döndürür.

React bileşen tabanlı yaklaşım, uygulamanızı modüler hale getirir ve yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır.

Her bir bileşen, kendi durumu ve özellikleriyle bağımsız olarak yönetilir ve bir araya gelerek karmaşık bir UI oluşturulur.

Bu şekilde, React uygulamanızı daha sürdürülebilir, kolay bakım yapılabilir ve geliştirilebilir hale getirebilirsiniz.

Bu ikinci ders adımı, React.js’in sanal DOM yapısı ve bileşen tabanlı geliştirme yaklaşımını anlamak için size bir fikir verecektir.