Konten ini merupakan konten mirroring dari situs Medium dengan beberapa perubahan. Lihat konten orisinal di sini
Bootstrap adalah framework CSS yang sangat populer. Bootstrap dapat membuat styling UI pada situs web dengan cepat melalui pendekatan component-based. Selain itu, saat ini Bootstrap juga mendukung styling dengan pendekatan class-based sehingga tampilan UI dapat lebih dimodifikasi sesuai keinginan kita. Jika nantinya diperlukan, Bootstrap juga dapat dikustomisasi lebih lanjut menggunakan SASS.
Jika kamu sudah familier dengan Bootstrap dan ingin menggunakannya pada aplikasi React JS, banyak opsi yang bisa dipilih. Salah satunya adalah menginstal Bootstrap melalui NPM pada terminal.
Mengapa Bootstrap standar? Bukan react-bootstrap?
react-bootstrap menggunakan komponen dengan syntax JSX beserta atribut-atribut style yang harus dipelajari. Jadi jika kamu sudah familier dengan Bootstrap standar, kamu bisa lebih fokus mempelajari struktur React JS tanpa perlu mempelajari atribut-atribut yang belum perlu dipelajari.
Berikut akan saya jelaskan sedikit mengenai cara memasang Bootstrap 5 melalui NPM pada aplikasi React JS.
Membuat Aplikasi React dengan Vite
Vite adalah tools frontend yang terkenal akan kecepatannya dalam membangun aplikasi. Dan karena command create-react-app sudah tidak lagi direkomendasikan untuk membuat aplikasi React JS, maka saat ini saya akan menggunakan Vite.
npm create vite@latest
Setelah itu, tulis nama proyek, pilih framework React, lalu pilih varian bahasa (saat ini saya menggunakan JavaScript).
Instal dependencies yang dibutuhkan dengan menjalankan command:
npm install
Kemudian buka proyek dengan code editor/IDE pilihan kamu. Struktur foldernya akan terlihat seperti ini:
Menghapus CSS Bawaan
Kita tidak akan menggunakan CSS bawaan dari Vite. Maka dari itu, kita akan menghapus kedua file App.css dan index.css pada folder src. Kemudian hapus beberapa baris kode:
// App.jsx
import './App.css';
// main.jsx
import './index.css';
Menginstal Bootstrap!
Kita masuk pada bagian utama. Kita akan menginstal Bootstrap versi 5.2.3 melalui NPM.
npm install bootstrap@5.2.3
Kemudian import Bootstrap pada file main.jsx
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
Jalankan Proyek
Masukkan command berikut untuk menjalankan development server:
npm run dev
Jika tampilan sudah seperti di atas, selamat! Bootstrap sudah berhasil terpasang. Berubahnya jenis font yang ditampilkan menunjukkan bahwa framework Bootstrap sudah terpasang pada aplikasi React-mu.
Terima kasih banyak sudah menyempatkan waktumu untuk membaca. Ikuti akun ini atau follow saya di Twitter.
Top comments (0)