React Academy · Pelajaran

Memasang dan Membuka React DevTools

Siapkan React DevTools di Chrome/Firefox dan jelajahi panel Components.

Memasang dan Membuka React DevTools 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 menginstal ekstensi peramban React DevTools dan mempelajari cara menavigasi panel Komponen untuk memeriksa aplikasi React yang sedang berjalan.

Apa Itu React DevTools?

React DevTools adalah ekstensi peramban yang menambahkan dua panel baru ke DevTools Chrome/Firefox: **Komponen** (untuk memeriksa pohon) dan **Profiler** (untuk mengukur kinerja). Ekstensi ini berfungsi dengan aplikasi React apa pun dalam mode pengembangan.

Menginstal Ekstensi

Buka Chrome Web Store (atau Pengaya Firefox) dan cari **React Developer Tools**. Klik **Tambahkan ke Chrome** (atau Firefox). Ikon React di bilah alat Anda akan menyala pada halaman yang menggunakan React.

Membuka DevTools

Tekan **F12** (atau Cmd+Option+I di Mac) untuk membuka DevTools peramban. Anda akan melihat tab baru berlabel **Komponen** dan **Profiler** di samping Elemen dan Konsol.

Panel Komponen

Tab Komponen menampilkan seluruh pohon komponen React pada halaman saat ini. Anda dapat mengeklik komponen apa pun untuk memeriksa properti, status, kait, dan berkas sumber yang merendernya.

Menavigasi Pohon

Gunakan kotak pencarian di bagian atas panel Komponen untuk menyaring berdasarkan nama komponen. Klik sebuah komponen di pohon untuk melihat detailnya di sisi kanan. Gunakan tanda panah untuk memperluas atau meringkas komponen turunan.

Memeriksa Properti Secara Langsung

Saat mengeklik sebuah komponen, **properti** saat ini akan muncul di panel kanan. Anda bahkan dapat mengedit nilai properti secara langsung di DevTools untuk melihat pratinjau perubahan antarmuka tanpa mengubah kode sumber.

Memeriksa Status dan Kait

Di bawah properti, Anda akan melihat **kait** seperti Status, Efek, Memo, dan Referensi. Dengan memperluas Status, Anda dapat melihat nilai saat ini dari setiap pemanggilan useState di komponen tersebut.

Persyaratan Mode Pengembangan

React DevTools hanya menampilkan nama komponen saat aplikasi berjalan dalam **mode pengembangan**. Dalam versi produksi, React menghapus nama komponen agar bundel lebih kecil. Oleh karena itu, selalu lakukan pengawakutuan secara lokal dengan npm start atau npm run dev.

Menyoroti Pembaruan

Aktifkan **Soroti pembaruan saat komponen dirender** di pengaturan DevTools (ikon roda gigi). Komponen yang dirender ulang akan berkedip dengan lapisan warna, sehingga perenderan yang tidak perlu langsung terlihat.

Pemeriksaan Singkat

Dua tab apa yang ditambahkan ekstensi React DevTools ke alat pengembang peramban?

Rangkuman

Anda telah menginstal React DevTools dan menjelajahi panel Komponen. Kini Anda dapat memeriksa pohon komponen, membaca properti dan status secara langsung, mengedit nilai di tempat, serta menyoroti perenderan ulang—semuanya tanpa menyentuh kode sumber.

Berikutnya

Pelajaran berikutnya: **Memeriksa Pohon Komponen dan Properti** — Anda akan menelusuri hierarki bertingkat secara mendalam dan mempelajari cara membaca struktur properti dan status yang kompleks di bilah sisi DevTools.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memasang dan Membuka React DevTools” gratis?

Ya — teks lengkap “Memasang dan Membuka React DevTools” 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 “Memasang dan Membuka React DevTools”?

Siapkan React DevTools di Chrome/Firefox dan jelajahi panel Components. 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 “Memasang dan Membuka React DevTools” 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