Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk mendesain website responsive dengan cepat dan mudah. ReactJS merupakan Framework JavaScript yang digunakan untuk membuat aplikasi SPA (Single Page Application). 

Saat ini, Bootstrap tidak dapat dipisahkan dalam pembuatan website, sehingga ada kalanya kita menggabungkan ReactJS dan Bootstrap dalam pengembangan website. 

 Terdapat beberapa cara yang umum digunakan untuk menambahkan Bootstrap ke React: 

1. Menggunakan Bootstrap CDN. 
2. Menginstall Bootstrap melalui NPM. 
3. Menggunakan React Bootstrap.
   

Membuat Project React 

Disini kita akan membuat project react dengan Command Cli pada windows, jadi sebelum membuat project React pastikan system komputer kita sudah terinstall Node.js.

npx create-react-app my-app
cd my-app
npm start

Setelah melakukan perintah npm start pastinya kita akan diarahkan ke browser yang menampilkan tanpilan default dari project React.

 CARA INSTALL BOOTSTRAP DENGAN CDN

Selanjutnya kita bisa menginstall Bootstrap dengan cara pertama ya itu menggunkan CDN (Conten Deliveriy Network), Untuk cara ini cukup dengan mencopy alamat CDN dari Bootstrap ke file index.html pada project React. 

Script alamat CDN Bootstrap :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

Nah dengan mengcopy File CDN ke File Index.html pada project React kita bisa mengunakan element Class Bootstrap pada project React

CARA INSTALL BOOTSTRAP DENGAN NPM

Untuk mengistall Bootstrap dengan NPM kita bisa mengunkan Command Cli Atau terminal pada editor code Visual Studio Code dengan menulis perintah :

npm install bootstrap

Setelah instalasi selesai kita tingal import di file index.js pada project react.

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

sehingga secara keseluruhan file index.js kita akan menjadi :

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  
    
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Nah sekarang kita bisa menggunakan css class yang ada di bootstrap pada project react.