React'te Elementlerin Render Edilmesi

React öğrenirken en temel konulardan biri, oluşturduğumuz elementlerin tarayıcıdaki DOM'a nasıl aktarıldığını anlamak. React uygulamalarında bunun için genellikle HTML içerisinde bir root elementi oluşturuyoruz.

Bir Elementin DOM'a Render Edilmesi

HTML dosyamızda React uygulamasının bağlanacağı bir kök DOM düğümü bulundurabiliriz:

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

React uygulamamız bu elementin içerisinde oluşturuluyor. Güncel React kullanımında bu kök elemana createRoot() ile bağlanıp, ardından render() metodunu kullanıyoruz:

import { createRoot } from "react-dom/client";

const element = 
Hello World
;

const root = createRoot(document.getElementById("root"));

root.render(element);

Burada root elementi React'ın uygulamayı DOM'a yerleştireceği noktayı belirliyor.

Render Edilmiş Elementin Güncellenmesi

React elementleri immutable (değişmez) yapıdadır. Yani oluşturduğumuz React elementinin kendisini sonradan değiştirerek güncelleme yapmıyoruz.

Arayüzde bir değişiklik olduğunda React yeni bir render sonucu oluşturuyor ve önceki sonuçla karşılaştırarak DOM'a gerekli değişiklikleri uyguluyor.

React Yalnızca Gerekli Kısımları Günceller

React'ın önemli avantajlarından biri de her değişiklikte tüm DOM'u baştan oluşturmak yerine, önceki render ile yeni render arasındaki farkları belirleyip gerekli DOM değişikliklerini uygulaması.

Örneğin bir sayfada sadece başlık değiştiyse, React'ın bütün sayfayı baştan oluşturması gerekmez. Değişen kısmı tespit ederek DOM üzerinde yalnızca gerekli güncellemeyi yapabilir.

Bu karşılaştırma ve DOM'a gerekli değişikliklerin uygulanması süreci React'ın reconciliation mekanizmasının önemli bir parçasıdır. Güncel React dokümantasyonunda da yeniden render sonrasında DOM'un yalnızca gerekli kısımlarının güncellendiği belirtiliyor.

---

Kısaca

• HTML içerisinde React'ın bağlanacağı bir root elementi bulunur.
• createRoot() ile React bu DOM düğümüne bağlanır.
• root.render() ile React elementi ekrana aktarılır.
• Bir güncelleme olduğunda React yeni render sonucunu oluşturur.
• React gerekli farkları belirleyerek DOM üzerinde yalnızca gerekli değişiklikleri yapar.

Not: Eski React kaynaklarında ReactDOM.render(element, document.getElementById("root")) kullanımını görebilirsiniz. Bu API artık güncel React'ta kullanılmıyor; React 19 ile render API'si kaldırıldı ve yerine createRoot() kullanılması gerekiyor.