0Pricing
React Academy · Pelajaran

Apa Itu React Portal?

Pahami API createPortal dan alasan render di luar div root dapat bermanfaat.

Apa Itu React Portal? adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan mempelajari apa itu React Portal, mengapa perenderan di luar pohon DOM induk berguna, dan cara menggunakan API createPortal.

Hierarki DOM React Normal

Secara default, setiap komponen dirender di dalam node DOM induknya. Seluruh aplikasi React biasanya berada di dalam satu `
`. Ini berfungsi dengan baik sampai Anda perlu membuat modal, tooltip, atau menu tarik-turun keluar dari induk yang memiliki `overflow: hidden`.

Apa Itu Portal

**Portal** memungkinkan Anda merender hasil komponen ke node DOM yang berbeda — node yang berada di luar root React. Pohon React komponen tersebut tidak berubah; hanya posisi DOM-nya yang berubah.
import { createPortal } from 'react-dom';

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

Alasan Portal Digunakan

Properti CSS seperti `overflow: hidden`, konteks penumpukan `z-index`, dan `transform` pada induk dapat memotong atau menyembunyikan elemen anak. Portal mengatasi batasan ini dengan memasang hasil render ke node DOM yang berbeda.

Penggelembungan Peristiwa Tetap Berfungsi

Meskipun node DOM portal berada di luar induknya, **peristiwa React tetap merambat ke atas** melalui pohon komponen React — bukan pohon DOM. Klik di dalam modal portal akan merambat ke induk React-nya.

Membuat Target Portal

Anda dapat membuat portal ke node DOM apa pun yang sudah ada. Pola yang umum adalah menambahkan `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

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

Daur Hidup Portal Terikat pada Induk React-nya

Portal dipasang saat komponen induknya dipasang dan dilepas saat induknya dilepas. React tetap melacaknya sebagai bagian dari pohon komponen yang sama, sehingga konteks dan referensi berfungsi secara normal.

Konteks Berfungsi di Seluruh Portal

Karena portal tetap menjadi bagian dari pohon komponen React, nilai konteks yang disediakan di atas portal tetap dapat diakses di dalam portal. Posisi DOM tidak memengaruhi rantai konteks React.

Menggunakan createPortal dengan Status

Kendalikan visibilitas portal dengan variabel status. Alihkan statusnya menggunakan tombol, dan konten portal akan muncul di document.body sementara tombol tetap berada di posisi DOM normalnya.
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>
  );
}

Perenderan Sisi Server & Portal

Portal memerlukan node DOM yang sudah ada, sehingga portal selalu berjalan di sisi klien. Dalam Next.js atau pengaturan SSR lainnya, pastikan kode perenderan portal hanya berjalan di browser menggunakan `useEffect` atau pemeriksaan status terpasang.

Pemeriksaan Singkat

React Portal merender konten ke node DOM yang berbeda. Aspek apa dari pohon komponen React yang terpengaruh oleh hal ini?

Ringkasan

Portal memungkinkan Anda merender hasil React ke node DOM apa pun menggunakan createPortal(). Pohon React, konteks, dan penggelembungan peristiwa tidak terpengaruh. Gunakan portal untuk mengatasi batasan overflow/z-index pada modal dan tooltip.

Berikutnya

Pelajaran berikutnya: **Membangun Komponen Modal dengan Portal** — Anda akan membuat modal yang sepenuhnya dapat digunakan ulang dan dirender melalui portal ke document.body dengan pengelolaan status buka/tutup.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Apa Itu React Portal?” gratis?

Ya — teks lengkap “Apa Itu React Portal?” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Apa Itu React Portal?”?

Pahami API createPortal dan alasan render di luar div root dapat bermanfaat. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Apa Itu React Portal?” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Apa Itu React Portal?
  2. Membangun Komponen Modal dengan Portal
  3. Menangani Fokus dan Perangkap Keyboard dalam Modal
  4. Tooltip dan Menu Dropdown dengan Portal
← Kembali ke React Academy