📘 MATERI 1: Integrasi Bootstrap Manual

Tanpa NPM — menggunakan folder public/assets

🎯 Tujuan Pembelajaran

🧩 1. Apa itu Bootstrap?

Bootstrap adalah framework CSS untuk membuat tampilan website lebih cepat dan rapi tanpa menulis CSS dari nol.

Contoh komponen:

📥 2. Cara Mendapatkan Bootstrap (Manual)

  1. Buka website resmi Bootstrap
  2. Download file Bootstrap (CSS & JS)
  3. Ekstrak file

File penting:

📁 3. Struktur Project

project/
├── public/
│   ├── assets/
│   │   ├── css/
│   │   │   └── bootstrap.min.css
│   │   ├── js/
│   │   │   └── bootstrap.bundle.min.js
│   │   └── img/
│   └── index.html
├── src/
│   ├── App.js
│   └── index.js
📌 Penjelasan:
public = file langsung dibaca browser
assets = tempat CSS, JS, gambar

🔗 4. Menghubungkan Bootstrap ke Project

Buka file public/index.html

<!-- CSS Bootstrap -->
<link rel="stylesheet" href="%PUBLIC_URL%/assets/css/bootstrap.min.css">

<!-- JS Bootstrap -->
<script src="%PUBLIC_URL%/assets/js/bootstrap.bundle.min.js"></script>
✔ <link> = CSS
✔ <script> = JavaScript
✔ %PUBLIC_URL% = folder public

🌍 5. Kenapa Bisa Dipakai di Semua Halaman?

Karena index.html adalah root aplikasi.

Semua React component dirender di dalamnya, jadi Bootstrap otomatis aktif di semua halaman.

⚙️ 6. Cara Menggunakan di React

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

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

🎯 7. Contoh di Beberapa Halaman

Home.js

function Home() {
  return <button className="btn btn-primary">Home</button>;
}

About.js

function About() {
  return <div className="alert alert-warning">
    About Page
  </div>;
}
✔ Tidak perlu import Bootstrap lagi
✔ Semua halaman otomatis bisa pakai

⚠️ 8. Hal yang Perlu Diperhatikan

💡 9. Kelebihan Cara Ini

🔚 Kesimpulan