Cara Memasang Bootstrap 5 Pada Proyek React JS
Tags: react, bootstrap, webdev, indonesia
Published: 2023-12-06 07:08:34

> Konten ini merupakan konten _mirroring_ dari situs Medium dengan beberapa perubahan. Lihat konten orisinal [di sini](https://medium.com/@faizbyp/cara-memasang-bootstrap-5-pada-proyek-react-js-a600be3e98a9)

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](https://sass-lang.com/). 

![Landing Page Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcpp77d2s9o9zcfu3cgu.png)

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](https://www.npmjs.com/) 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.

```bash
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_:

```bash
npm install
```

Kemudian buka proyek dengan _code editor_/IDE pilihan kamu. Struktur foldernya akan terlihat seperti ini:

![Tampilan Struktur Folder Pada VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl4fqmux0pyic98e9uk1.png)

## 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:

```js
// 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.

```bash
npm install bootstrap@5.2.3
```

Kemudian _import_ Bootstrap pada _file_ main.jsx

```js
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_:

```bash
npm run dev
```

![Tampilan Aplikasi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d43eurp8q2s3bpj9rbos.png)

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](https://twitter.com/faizbyp).