React Academy · Ders

Portallarla Modal Bileşeni Oluşturma

document.body içinde createPortal aracılığıyla oluşturulan yeniden kullanılabilir bir modal oluşturun.

2. ders / 413 adım

Portallarla Modal Bileşeni Oluşturma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. 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, document.body içine oluşturmak için React.createPortal kullanan ve arka plana tıklayarak ya da Escape tuşuyla kapatmayı destekleyen, yeniden kullanılabilir bir Modal bileşeni geliştireceksiniz.

Modal Bileşeni İskeleti

Temel yapıyla başlayın: `isOpen`, `onClose` ve `children` props'larını kabul eden bir Modal bileşeni oluşturun. `isOpen` false olduğunda hiçbir şey oluşturmayın.

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Arka Plan ve Yayılmayı Durdurma

Dıştaki `backdrop` div'i ekranın tamamını kaplar. Buna tıklamak `onClose` işlevini çağırır. İçteki `modal` div'i `e.stopPropagation()` çağrısı yapar; böylece modalın içindeki tıklamalar arka plana yayılmaz ve modal yanlışlıkla kapanmaz.

Escape Tuşuyla Kapatma

`keydown` olayını dinleyen bir `useEffect` ekleyin. Escape tuşuna basıldığında ve modal açık olduğunda `onClose` işlevini çağırın. Temizleme sırasında dinleyiciyi kaldırın.

useEffect(() => {
  if (!isOpen) return;
  const handle = (e) => { if (e.key === 'Escape') onClose(); };
  document.addEventListener('keydown', handle);
  return () => document.removeEventListener('keydown', handle);
}, [isOpen, onClose]);

Gövde Kaydırmasını Engelleme

Bir modal açıkken genellikle arkasındaki sayfanın kaydırılmasını engellemek istersiniz. Bir `useEffect` içinde `document.body` üzerinde `overflow: hidden` özelliğini ekleyin ve kaldırın.

useEffect(() => {
  if (isOpen) {
    document.body.style.overflow = 'hidden';
  }
  return () => { document.body.style.overflow = ''; };
}, [isOpen]);

Modal için Temel CSS

Arka plan, tam ekranı kaplayan sabit bir katman olmalıdır. Modal kutusu ortalanmalıdır. Minimal bir CSS yaklaşımında modalı ortalamak için arka planda flexbox kullanılır.

.backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-width: 320px;
}

Modalı Kullanma

Modalı üst bileşende bulunan bir boolean durum değişkeniyle denetleyin. `isOpen` ve `onClose` props'larını Modal bileşenine aktarın. İstediğiniz içeriği children olarak yerleştirin.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <h2>Hello from the modal!</h2>
        <button onClick={() => setOpen(false)}>Close</button>
      </Modal>
    </>
  );
}

İçine Kapatma Düğmesi Ekleme

Klavyeyi kullanamayan veya arka planı fark etmeyen kullanıcılar için modalın içinde her zaman açıkça görünen bir kapatma düğmesi bulundurun. `onClose` işlevini children veya bir prop aracılığıyla içeriğe aktarın.

CSS Geçişleriyle Animasyon

Belirme efekti için modal kapalıyken null döndürmek yerine portalı her zaman oluşturun ancak bir CSS sınıfını değiştirin. Arka planda CSS `opacity` ve `transform` geçişi kullanın.

// Toggle class based on isOpen
<div className={`backdrop ${isOpen ? 'visible' : 'hidden'}`}>

Modal Üst Bilgisi ve Alt Bilgisi Oluşturma

Modalı alt bileşenlere ayırın: `Modal.Header`, `Modal.Body`, `Modal.Footer`. Tüketicilerin sınıf adlarını bilmeden modal düzenini birleştirebilmesi için bileşik bileşen kalıbını kullanın.

Kısa Kontrol

İç modal div'inin onClick işleyicisinde neden e.stopPropagation() çağrısı yapıyoruz?

İnteraktif derste cevapla

Özet

createPortal ile bir Modal oluşturdunuz: arka plana tıklamak modalı kapatır, Escape tuşu modalı kapatır, açıkken gövde kaydırması kilitlenir ve stopPropagation modalın içindeki tıklamaların modalı kapatmasını engeller.

Sırada

Sonraki ders: **Modallarda Odağı ve Klavye Tuzaklarını Yönetme** — erişilebilirlik gereksinimlerini karşılamak için modal açıkken odağı modalın içinde tutacaksınız.

Başlamak ücretsiz

Yapay zeka eğitmeniyle React öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 88
Dersler: 324

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Portallarla Modal Bileşeni Oluşturma” dersi ücretsiz mi?

Evet — “Portallarla Modal Bileşeni Oluşturma” 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.

“Portallarla Modal Bileşeni Oluşturma” dersinde ne öğreneceğim?

document.body içinde createPortal aracılığıyla oluşturulan yeniden kullanılabilir bir modal oluşturun. 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 2. dersidir.

“Portallarla Modal Bileşeni Oluşturma” 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