Elementleri Render Etmek

Elementler React uygulamalarının en küçük yapı taşlarıdır.

Bir element, ekranda görmek istediğiniz şeyi tanımlar:

const element = <h1>Merhaba Dünya</h1>;

Tarayıcı DOM elementlerinden farklı olarak, React elementleri düz nesnelerdir ve oluşturulması kolaydır. React DOM, React elementleriyle eşleşecek şekilde DOM’u güncellemekle ilgilenir.

Bu konu hakkında detaylı Türkçe bilgi için Fatih Acet’in makalesine göz atabilirsiniz.

Not:

Daha yaygın olarak bilinen component kavramıyla elementler karıştırılabilir. Bir sonraki bölümde componentleri tanıtacağız.

Elementleri birer değişken, componentleri ise fonksiyon olarak düşünebilirsiniz; birbirinden farklı şeylerdir.

Bir Elementi DOM'a Render Etmek

HTML dosyanızda bir <div> olduğunu varsayalım:

<div id="root"></div>

Buna root DOM düğümü diyoruz çünkü içindeki her şey React DOM tarafından yönetilecektir.

DOM düğümü hakkında detaylı bilgi için JavaScript HTML DOM Navigation içeriğini inceleyenilirsiniz.

Sadece React ile oluşturulmuş uygulamalar genellikle tek bir root DOM düğümüne sahiptir.

React’i mevcut bir uygulamaya entegre ediyorsanız, istediğiniz kadar çok sayıda ayrı root DOM düğümü olabilir.

React elementini bir root DOM düğümüne dönüştürmek için, her ikisini de ReactDOM.render() işlevine yerleştirin.

const element = <h1>Merhaba Dünya!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen’de Deneyin

Sayfanızda “Merhaba Dünya!” başlığı görüntülenecektir.

Oluşturulan Bir Elementi Güncellemek

React elementleri değişmez. Bir element oluşturduktan sonra, elementin alt elementlerini veya attributelerini değiştiremezsiniz.

Konu hakkında detaylı bilgi için Onur Aykaç’ın yazdığı makalede Javascript’te immutable ve mutable kavramı bölümünü okuyabilirsiniz.

Bildiğimiz kadarıyla UI’ı güncellemenin tek yolu yeni bir element oluşturmak ve ReactDOM.render() fonksiyonuna geçirmektir.

Aşağıdaki saat örneğini inceleyelim.

function tick() {
  const element = (
    <div>
      <h1>Merhaba Dünya!</h1>
      <h2>Saat şu anda {new Date().toLocaleTimeString()}</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

CodePen’de Deneyin

ReactDOM.render() fonksiyonunu her saniye setInterval() içerisinden çağırır.

Not:

Pratikte React uygulamalarının çoğu, bir kez ReactDOM.render() elementini çağırır.

Birbiriyle bağlantı kurduğu için konuları atlamadan okumaya devam edin.

Yukarıdaki saat örneğinde setInterval fonksiyonu sayesinde her saniye fonksiyon çağırılır ve ReactDOM render edilir. Fakat pratikte bu kodlar bu şekilde yazılmıyor. ReactDOM bir kez render edilir ve oluşturulan elementler stateler yardımıyla güncellenir. İlerleyen konularda bunlara değineceğiz.

React DOM, componenti ve child (çocuk) componentleri önceki componentle karşılaştırır ve DOM’u istenen duruma getirmek için gereken yerlerde DOM güncellemelerini uygular.

Yani, React DOM tüm componentleri yeniden yüklemez. Değişiklik olan yeri algılar ve DOM üzerinde sadece o kısmı günceller, buda performansı olumlu yönde etkiler.

Tarayıcı üzerinden bu örneği inceleyerek doğrulayabilirsiniz.

react dom örneği

Sıradaki Eğitim: Component ve Props