🎯 Tujuan Pembelajaran
- Memahami fungsi folder public, src, node_modules
- Memahami alur kerja React
- Memahami hubungan
index.htmldanindex.jssertapp.js
📁 1. Struktur Dasar Project React
project/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── index.js
│ └── App.js
├── package.json🧠 2. Fungsi Setiap Bagian
📦 node_modules/
Tempat semua library disimpan (React, Bootstrap, dll).
👉 “Gudang dependensi”
🌍 public/
File yang langsung dibaca browser tanpa diproses React.
index.html👉 “Halaman utama (root)”
⚙️ src/
Tempat menulis kode React.
👉 “Otak aplikasi”
📄 package.json
Daftar library dan konfigurasi project.
🔗 3. Hubungan Antar File
index.html
↓
index.js
↓
App.js
↓
Komponen lain🎬 4. SIMULASI ALUR (Animasi Teks)
🟢 STEP 1 — Browser buka website
🌐 User membuka: http://localhost:3000👉 Dibaca pertama: public/index.html
🟡 STEP 2 — HTML ditemukan
<div id="root"></div>Masih kosong 😶
🔵 STEP 3 — JavaScript dijalankan
React mulai berjalan dari src/index.js
🟣 STEP 4 — React render
root.render(<App />);🟠 STEP 5 — App.js dipanggil
<h1>Hello World</h1>🔴 STEP 6 — Tampil di layar
🖥️ Hello World muncul di browser
🎥 Ringkasan Alur
🌐 Browser
↓
📄 index.html
↓
⚙️ index.js
↓
📦 App.js
↓
🖥️ UI tampil🔥 Analogi Sederhana
- index.html = layar TV 📺
- index.js = remote 🎮
- App.js = channel 📡
⚠️ Kesalahan Umum
- Mengira index.js dibuka pertama
- Menaruh semua file di public
- Bingung kenapa root kosong
💡 Bonus Praktik
- Praktik 1, hapus isi
Lihat apa yang terjadi.<div id="root"></div> - Praktik 2, Ubah teks di App.js, Lihat perubahan realtime
- Praktik 3,
<button className="btn btn-primary">Klik</button>