React Academy · Pelajaran

Memeriksa Pohon Komponen dan Props

Telusuri hierarki komponen dan baca nilai prop serta state secara langsung.

Memeriksa Pohon Komponen dan Props adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 cara menelusuri hierarki komponen bertingkat di React DevTools dan membaca nilai properti serta status yang kompleks dari bilah sisi panel Komponen.

Pohon Komponen Adalah Cerminan

Setiap komponen yang Anda lihat di DevTools mencerminkan penyarangan JSX Anda. Akar biasanya merupakan komponen App Anda. Komponen turunan menjorok di bawah induknya, persis seperti kemunculannya dalam kode sumber.

Memilih Komponen

Klik nama komponen apa pun di pohon. Panel kanan akan langsung menampilkan **properti**, **kait** (status, efek, referensi), serta berkas **sumber** dan nomor baris tempat komponen tersebut didefinisikan.

Membaca Properti Teks dan Angka

Properti teks ditampilkan di antara tanda kutip: `"hello"`. Angka ditampilkan tanpa tanda kutip: `42`. Nilai logika ditampilkan sebagai `true` atau `false`. Anda dapat mengarahkan kursor ke sebuah nilai untuk melihat isi lengkapnya jika nilai tersebut terpotong.

Memperluas Properti Objek dan Larik

Saat nilai properti berupa objek atau larik, DevTools menampilkan pohon yang dapat dilipat. Klik tanda panah di samping `{…}` atau `[…]` untuk memperluasnya dan melihat setiap kunci serta nilai bertingkat.

Memeriksa Properti Fungsi

Properti fungsi (seperti penangan `onClick`) ditampilkan sebagai `f onClick()`. Anda dapat mengeklik ikon tanda panah kecil di sampingnya untuk berpindah ke definisi fungsi di panel Sumber.

Menyaring Pohon

Gunakan kotak pencarian di bagian atas panel Komponen untuk menyaring berdasarkan nama. Ketik `Button` untuk hanya menampilkan komponen yang namanya mengandung kata tersebut. Fitur ini berguna dalam aplikasi yang memiliki ratusan komponen.

Beralih dari DOM ke React

Di tab **Elemen**, klik kanan simpul DOM dan pilih **Periksa komponen React** (tersedia setelah DevTools diinstal). DevTools akan beralih ke tab Komponen dan memilih komponen React yang merender simpul tersebut.

Mengedit Properti di DevTools

Klik dua kali nilai properti di DevTools untuk mengeditnya secara langsung. Komponen akan segera dirender ulang dengan nilai baru. Fitur ini berguna untuk menguji kasus tepi tanpa mengubah kode sumber.

Menyalin Properti sebagai JSON

Klik kanan nilai properti atau status apa pun di DevTools dan pilih **Salin nilai**. Nilai tersebut akan disalin sebagai JSON ke papan klip Anda, sehingga mudah ditempelkan ke dalam pengujian atau dokumentasi.

Pemeriksaan Singkat

Bagaimana cara memperluas properti objek atau larik di panel Komponen React DevTools?

Rangkuman

Kini Anda dapat menavigasi pohon komponen, membaca teks, angka, objek, dan fungsi, menyaring berdasarkan nama, berpindah dari elemen DOM ke komponen React, serta mengedit properti secara langsung di DevTools.

Berikutnya

Pelajaran berikutnya: **Menggunakan Tab Profiler** — Anda akan merekam perenderan, membaca grafik api, dan menentukan komponen yang menyebabkan interaksi lambat.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memeriksa Pohon Komponen dan Props” gratis?

Ya — teks lengkap “Memeriksa Pohon Komponen dan Props” 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 “Memeriksa Pohon Komponen dan Props”?

Telusuri hierarki komponen dan baca nilai prop serta state secara langsung. 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 2 dari 4.

Berapa lama pelajaran “Memeriksa Pohon Komponen dan Props” 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

← Kembali ke React Academy