⚙️ Setup Awal Project
node -v
npm -v
npx create-react-app my-app
cd my-app
📌 Penjelasan:
node -v = cek versi Node.js
npm -v = cek versi npm
create-react-app = membuat project React
cd my-app = masuk folder project
node -v = cek versi Node.js
npm -v = cek versi npm
create-react-app = membuat project React
cd my-app = masuk folder project
⭐ 1. Menjalankan Project
Perintah:
npm start🧠 Penjelasan:
- npm = Node Package Manager
- start = menjalankan script di package.json
🔎 Hasil:
Project berjalan di: http://localhost:3000
🏫 Istilah: tombol PLAY aplikasi
⭐ 2. Menghentikan Project
Perintah:
Ctrl + C🧠 Penjelasan:
- Menghentikan server Node.js
- Cara resmi stop React
Setelah muncul:
Terminate batch job (Y/N)?Jawaban:
Y
🏫 Istilah: tombol STOP aplikasi
⭐ 3. Production Build
npm run build
npm start🧠 Penjelasan:
- build = versi aplikasi siap deploy
- start = menjalankan hasil build
🏫 Mode aplikasi siap upload server (hosting)
⭐ 4. Install Package
npm install axios🧠 Penjelasan:
- install = ambil library dari internet
- masuk ke node_modules
Dev dependency:
npm install -D eslint🧠 Penjelasan:
- -D = hanya untuk development
🏫 Menambahkan fitur ke project
⭐ 5. Melihat Paket Terinstall
npm list --depth=0🧠 Penjelasan:
- menampilkan library utama
- depth=0 = tanpa dependency kecil
🏫 Melihat isi “komponen” project
⭐ 6. Membersihkan Cache
npm cache clean --force🧠 Penjelasan:
- menghapus cache npm
- dipakai saat error install
🏫 Reset sementara sistem npm
⭐ 7. Hapus node_modules (Reset Total)
Windows:
rmdir /s /q node_modules
npm installMac/Linux:
rm -rf node_modules
npm install🧠 Penjelasan:
- hapus semua library
- install ulang dari package.json
🏫 Reset total project
🎯 Rangkuman SMK RPL
| Perintah | Fungsi | Kapan digunakan |
|---|---|---|
| npm start | Menjalankan project | Saat coding |
| Ctrl + C | Stop server | Berhenti kerja |
| Y | Konfirmasi stop | Setelah Ctrl + C |
| npm install | Install library | Tambah fitur |
| npm install -D | Dev tools | ESLint, Prettier |
| npm run build | Build production | Siap upload |
| npm cache clean --force | Bersihkan cache | Jika error |
| npm list --depth=0 | Lihat library | Cek project |
| hapus node_modules + install | Reset project | Error berat |
🧠 Kesimpulan Besar
Node.js + React bekerja dengan perintah terminal yang membaca package.json
- npx create-react-app nama-folder → membuat project (folder) baru
- cd nama-folder → masuk ke folder project
- npm start → menjalankan aplikasi
- Ctrl + C → menghentikan aplikasi
- npm install → menambah library
- node_modules → tempat semua dependency
🚀 Penutup
Materi ini adalah dasar wajib sebelum masuk ke project React yang lebih kompleks.