Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat project React.js baru dan cara menjalankannya, sekarang kita akan lanjutkan belajar bagaimana cara melakukan installasi CSS framework yaitu Bootstrap di dalam project React.js, dengan tujuan agar proses pembuatan user interface lebih mudah dan cepat.
Apa itu React Bootstrap ?
React Bootstrap adalah framework CSS Bootstrap yang dibagun ulang setiap componentnya dari awal, sehingga tidak memerlukan lagi jQuery di dalamnya. Dan mampu digunakan untuk membangun sebuah user interface dengan ekosistem yang besar.
React Bootstrap : The most popular front-end framework Rebuilt for React.
official website : https://react-bootstrap.github.io/
Langkah 1 - Hapus File yang Tidak Dibutuhkan
Pertama-tama, kita akan menghapus beberapa file yang untuk saat ini kita tidak butuhkan, tujuannya agar tidak membingungkan dan merapikan struktur folder dari project React.js.
Silahkan buka project React.js menggunakan Text Editor kesayangan teman-teman, kurang lebih hasilnya seperti berikut ini :
Silahkan buka folder src, maka kita akan menemukan banyak sekali file di dalamnya, kurang lebih seperti berikut ini :
Disini kita akan menghapus beberapa file yang memang belum kita gunakan. Berikut ini beberapa file yang harus teman-teman hapus dan tidak.
| NAMA FILE |
HAPUS ? |
App.css |
YA |
App.js |
TIDAK |
App.test.js |
YA |
index.css |
TIDAK |
index.js |
TIDAK |
logo.svg |
YA |
reportWebVitals.js |
YA |
setupTest.js |
YA |
Jika sudah, maka kita hanya memiliki 3 files yang tersisa di dalam folder src, yaitu :
-
App.js,
-
index.css
-
index.js
Sekarang kita lanjutkan untuk melakukan sedikit modifikasi di dalam 3 file tersebut, karena di dalamnya masih ada kode yang perlu dihilangkan.
Buka file src/App.js dan ubah kode-nya menjadi seperti berikut ini :
function App() {
return (
<div className="App">
<h1>Belajar React.js di SantriKoding</h1>
</div>
);
}
export default App;
Kita lanjutkan, silahkan buka file src/index.css dan ubah kode-nya menjadi seperti berikut ini :
body {
background-color: lightgray !important;
}
Dan terakhir, silahkan buka file src/index.js dan ubah kode-nya menjadi seperti berikut ini :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Sekarang, jika kita reload project React.js-nya, maka kita akan mendapatkan hasil seperti berikut ini :
Langkah 2 - Installasi dan Konfigurasi React Bootstrap
Sekarang kita lanjutka belajar bagaimana cara installasi da konfigurasi React Bootstrap di dalam project React.js. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project React.js.
npm install react-bootstrap@2.0.0-beta.5 bootstrap@5.1.0
Jika perintah di atas berhasil dijalankan, maka seharusnya kita akan mendapatkan 2 list baru di dalam file package.json, tepatnya di dalam dependencies.
"dependencies": {
...
"bootstrap": "^5.1.0",
"react-bootstrap": "^2.0.0-beta.5",
...
},
Jika sudah seperti di atas, artinya React Bootstrap sudah terinstall di dalam project React.js kita. Sekarang kita tinggal melakukan konfigurasi agar Bootstrap dapat digunakan di dalam project React.js
Silahkan buka file src/index.js dan ubah kode-nya menjadi seperti berikut ini :
import React from 'react';
import ReactDOM from 'react-dom';
//import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Di atas, kita melakukan import CSS dari Boostrap, kurang lebih seperti berikut ini :
//import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
Dengan begini, kita sudah bisa menggunakan Boostrap di dalam project React.js.
Sampai disini pembahasan bagaimana cara melakukan installasi dan konfigurasi React Bootstrap di dalam project React.js. Di artikel selanjutnya kita akan belajar bagaimana cara membuat konfigurasi router di dalam project React.js secara SPA atau single page application.
Terima Kasih