0Pricing
React Academy · Pelajaran

Build Pengembangan/Produksi, Peta Sumber, Lingkungan

Pahami build pengembangan dan produksi, kegunaan peta sumber, serta cara nilai lingkungan mengarahkan perilaku (misalnya URL API, debug).

Build Pengembangan/Produksi, Peta Sumber, Lingkungan adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 3 pelajaran total.

Mengapa versi pengembangan, peta sumber, dan lingkungan?

Tujuan: Pahami perbedaan antara versi pengembangan dan produksi, peran peta sumber, serta penggunaan dasar lingkungan.

  • Pengembangan: umpan balik cepat, banyak informasi
  • Produksi: dioptimalkan, tenang
  • Peta sumber: menelusuri kode asli

Ringkasan istilah

  • Versi pengembangan: HMR/pemuatan ulang otomatis, kesalahan yang jelas
  • Versi produksi: diperkecil, kode mati dihapus
  • Peta sumber: menghubungkan keluaran yang diperkecil dengan sumbernya
  • Lingkungan: mengatur URL API dan penanda fitur

Demo: lencana mode + pencatatan pengembangan

Sediakan lencana mode kecil; pencatatan khusus pengembangan diizinkan saat mode-nya adalah pengembangan.

<div id="root"></div>

Demo: antarmuka khusus penelusuran berdasarkan mode

Tampilkan panel penelusuran kecil hanya dalam mode pengembangan. Dalam produksi, panel ini menghilang.

<div id="root"></div>

Demo: nilai lingkungan untuk perilaku

Baca nilai mirip lingkungan (disimulasikan) untuk memilih URL API dan mengaktifkan atau menonaktifkan fitur.

<div id="root"></div>

Kiat & jebakan

  • Jauhkan pencatatan dan antarmuka penelusuran dari produksi
  • Buat peta sumber untuk penelusuran yang aman (simpan secara pribadi)
  • Gunakan lingkungan untuk mengganti URL dan fitur

Pemeriksaan dasar versi produksi

Apa yang biasanya benar untuk versi produksi dibandingkan dengan versi pengembangan?

Ringkasan

Ringkasan: Versi pengembangan ramah dan banyak informasi; versi produksi dioptimalkan. Peta sumber menghubungkan kode yang diperkecil dengan kode asli, dan nilai lingkungan mengarahkan URL serta penanda fitur.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Build Pengembangan/Produksi, Peta Sumber, Lingkungan” gratis?

Ya — teks lengkap “Build Pengembangan/Produksi, Peta Sumber, Lingkungan” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Build Pengembangan/Produksi, Peta Sumber, Lingkungan”?

Pahami build pengembangan dan produksi, kegunaan peta sumber, serta cara nilai lingkungan mengarahkan perilaku (misalnya URL API, debug). 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 3.

Berapa lama pelajaran “Build Pengembangan/Produksi, Peta Sumber, Lingkungan” 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. Build Pengembangan/Produksi, Peta Sumber, Lingkungan
  2. Analisis Bundel & Menghapus Kode Tak Terpakai
  3. CI Dasar: Pemeriksaan → Pengujian → Build
← Kembali ke React Academy