React Academy · Ders

React Portalları Nedir

createPortal API'sini ve kök div'in dışında oluşturmanın neden yararlı olduğunu anlayın.

React Portalları Nedir, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React Portals'ın ne olduğunu, üst DOM ağacının dışında oluşturmanın neden yararlı olduğunu ve createPortal API'sinin nasıl kullanılacağını öğreneceksiniz.

Normal React DOM Hiyerarşisi

Varsayılan olarak her bileşen, üst bileşeninin DOM düğümünün içinde oluşturulur. React uygulamasının tamamı genellikle tek bir `

` içinde bulunur. Bir modalın, araç ipucunun veya açılır menünün `overflow: hidden` kullanan bir üst bileşenin dışına çıkması gerekene kadar bu yaklaşım sorunsuz çalışır.

Portal Nedir?

Bir **Portal**, bir bileşenin çıktısını React kökünün dışında bulunan farklı bir DOM düğümüne oluşturmanızı sağlar. Bileşenin React ağacı değişmez; yalnızca DOM konumu değişir.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Portallar Neden Vardır

`overflow: hidden`, `z-index` yığınlama bağlamları ve bir üst bileşendeki `transform` gibi CSS özellikleri, alt bileşenleri kırpabilir veya gizleyebilir. Portallar, oluşturulan çıktıyı farklı bir DOM düğümüne ekleyerek bu kısıtlamalardan kurtulur.

Olayların Üst Bileşenlere Yayılması Devam Eder

Portalın DOM düğümü üst bileşenin dışında olsa da **React olayları DOM ağacında değil**, React bileşen ağacında üst bileşenlere yayılmaya devam eder. Bir portal modalının içindeki tıklama, React üst bileşenine kadar yayılır.

Portal Hedefi Oluşturma

Mevcut herhangi bir DOM düğümüne portal oluşturabilirsiniz. Yaygın bir yaklaşım, `index.html` dosyasına özel bir `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Portalın Yaşam Döngüsü React Üst Bileşenine Bağlıdır

Portal, üst bileşeni bağlandığında bağlanır ve üst bileşen kaldırıldığında kaldırılır. React, portalı aynı bileşen ağacının parçası olarak izlemeye devam eder; bu nedenle bağlam ve ref'ler normal şekilde çalışır.

Bağlam Portallar Arasında Çalışır

Portallar React bileşen ağacının parçası olmaya devam ettiği için, portalın üstünde sağlanan bağlam değerlerine portalın içinde de erişilebilir. DOM konumu, React bağlam zincirini etkilemez.

createPortal ile Durum Kullanımı

Portalın görünürlüğünü bir durum değişkeniyle denetleyin. Bu durumu bir düğmeyle değiştirin; böylece portal içeriği document.body içinde görünürken düğme normal DOM konumunda kalır.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Sunucu Tarafında Oluşturma ve Portallar

Portalların mevcut bir DOM düğümüne ihtiyacı vardır; bu nedenle her zaman istemci tarafında çalışırlar. Next.js veya başka SSR kurulumlarında, portal oluşturma kodunun `useEffect` ya da bağlanmış durum denetimi kullanılarak yalnızca tarayıcıda çalıştığından emin olun.

Kısa Kontrol

React Portals içeriği farklı bir DOM düğümüne oluşturur. React bileşen ağacının hangi yönü bundan etkilenir?

Özet

Portallar, createPortal() kullanarak React çıktısını herhangi bir DOM düğümüne oluşturmanızı sağlar. React ağacı, bağlam ve olayların üst bileşenlere yayılması etkilenmez. Bunları, modallar ve araç ipuçları için overflow/z-index kısıtlamalarından kurtulmak amacıyla kullanın.

Sırada

Sonraki ders: **Portallarla Modal Bileşeni Oluşturma** — open/close durum yönetimiyle document.body içine portal oluşturan, tamamen yeniden kullanılabilir bir modal geliştireceksiniz.

Sıkça Sorulan Sorular

“React Portalları Nedir” dersi ücretsiz mi?

Evet — “React Portalları Nedir” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“React Portalları Nedir” dersinde ne öğreneceğim?

createPortal API'sini ve kök div'in dışında oluşturmanın neden yararlı olduğunu anlayın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“React Portalları Nedir” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

React Portalları Nedir
Portallarla Modal Bileşeni Oluşturma
Modallarda Odağı ve Klavye Kapanlarını Yönetme
Portallarla İpuçları ve Açılır Menüler

← React Academy Sayfasına Dön