FluentStack

Menjalankan `npm run dev`

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 7: React FundamentalsIntermediate40 menitBahasa Indonesia

Menjalankan `npm run dev`

Menjalankan development server React, membuka local URL, dan memahami alur edit-save-refresh.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjalankan dev server dari folder project
  • Membuka React app di browser lokal
  • Memahami bahwa terminal dev server harus tetap aktif
  • Membedakan dev server lokal dari deployment online
ReactViteDev ServerBrowser

Isi lesson

6 blok
  1. 1.
    React app lokal berjalan lewat dev serverBelum selesaiWajib
  2. 2.
    Command menjalankan dev serverBelum selesaiWajib
  3. 3.
    Checklist browser checkBelum selesaiWajib
  4. 4.
    Command dijalankan dari folder yang salahBelum selesaiOpsional
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

React app lokal berjalan lewat dev server

Wajib

Berbeda dari HTML statis yang bisa dibuka langsung sebagai file, React app modern biasanya dijalankan lewat development server. Dev server membaca source code, memproses module, lalu menyajikan app ke browser lokal.

Saat dev server berjalan, terminal harus tetap aktif. Browser membuka local URL seperti `http://localhost:5173`. Ini masih berjalan di perangkat kamu, belum online, dan belum deployment.

Bagian ini memengaruhi progres lesson.

Command menjalankan dev server

Wajib
bash
npm run dev

Jalankan command ini dari dalam folder project, yaitu folder yang punya `package.json`. Vite akan menampilkan local URL yang bisa dibuka di browser.

Bagian ini memengaruhi progres lesson.

Checklist browser check

Wajib

Kerjakan di perangkat kamu:

  • Pastikan terminal berada di folder project React.
  • Jalankan `npm run dev`.
  • Buka URL lokal yang muncul di terminal, biasanya `http://localhost:5173`.
  • Pastikan halaman React starter tampil di browser.
  • Ubah teks kecil di `src/App.tsx`.
  • Simpan file.
  • Pastikan browser memperbarui tampilan.
  • Jika ingin menghentikan dev server, kembali ke terminal lalu tekan Ctrl+C.

Jika port `5173` sudah dipakai, Vite bisa memakai port lain. Ikuti URL yang tertulis di terminal.

Bagian ini memengaruhi progres lesson.

Peringatan

Opsional

Command dijalankan dari folder yang salah

Jika `npm run dev` gagal karena script tidak ditemukan, kemungkinan terminal tidak berada di folder project yang punya `package.json`. Masuk dulu ke folder project dengan `cd fluent-react-notes`, lalu jalankan command lagi.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa arti `localhost` saat kamu membuka React app lokal?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • React app lokal dijalankan lewat dev server.
  • `npm run dev` harus dijalankan dari folder project yang punya `package.json`.
  • URL localhost menunjukkan app berjalan di perangkat sendiri.
  • Dev server tetap aktif selama terminalnya masih berjalan.
  • Berikutnya kamu akan membaca struktur folder `src`.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: React app lokal berjalan lewat dev server.

Memuat progresReview module