Materi Bootstrap via NPM

🎯 Tujuan Pembelajaran

Mengenal konsep node_modules
Menginstall Bootstrap dengan npm
Menggunakan Bootstrap secara global di React
Memahami perbedaan dengan cara manual

📦 1. Apa itu npm?

npm adalah tools untuk menginstall library secara otomatis.

💡 Analogi:
npm itu seperti toko online library tempat kita mengambil semua tools yang dibutuhkan.

📥 2. Install Bootstrap

npm install bootstrap

📁 3. Struktur Project Setelah Install

project/
├── node_modules/
│   └── bootstrap/
├── public/
├── src/
│   ├── App.js
│   └── index.js
├── package.json

📌 node_modules = semua library
📌 package.json = daftar dependensi project

🔗 4. Menghubungkan Bootstrap ke React

Buka file: src/index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

🌍 5. Kenapa Bisa Dipakai di Semua Halaman?

Karena index.js adalah entry point React.

Semua komponen dimulai dari sini → jadi Bootstrap otomatis global.

⚙️ 6. Contoh Penggunaan

function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-success">
        Bootstrap via npm
      </h1>

      <button className="btn btn-primary">
        Klik
      </button>
    </div>
  );
}

⚠️ Hal yang Perlu Diperhatikan

Harus install dulu (npm install)
Jangan hapus folder node_modules
Gunakan className, bukan class

🔄 7. Perbandingan Dua Cara

Aspek	Manual (public)	npm (node_modules)
Cara setup	Download manual	Install npm
Lokasi file	public/assets	node_modules
Integrasi React	❌ Tidak langsung	✅ Langsung
Cocok untuk	Pemula	Dunia kerja
Kompleksitas	Mudah	Sedang

🧠 Catatan Singkat

“Cara manual itu seperti copy file sendiri, sedangkan npm itu otomatis mengambil dan mengelola library.”

🔥 Insight Penting

Manual → cocok untuk belajar dasar → fokus UI dasar
npm → standar industri

👉 Rekomendasi belajar: Manual dulu → baru npm

🎯 Kapan Pakai Masing-Masing?

✔ Manual → jika pemula & UI dasar
✔ npm → jika paham React lanjutan & dunia kerja

🧩 Kesimpulan

Bootstrap bisa dipakai dengan 2 cara
npm adalah cara modern & profesional
Import di index.js → berlaku global