ReactJS: Menggunakan Bootstrap dengan ReactJS
Cara Menggunakan Bootstrap dengan ReactJS
Pada tulisan kali ini kita akan membahas bagaimana cara menggunakan Bootstrap dengan ReactJS.
Bootstrap merupakan Framework CSS yang digunakan untuk membuat aplikasi yang responsive.
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:
- Menggunakan Bootstrap CDN.
- Menginstall Bootstrap melalui NPM.
- Menggunakan React Bootstap.
Membuat Project React
Buat project ReactJS terlebih dahulu:
- Buat project ReactJS:
create-react-app react-bootstrap. - Masuk ke Projek react-bootstrap:
cd react-bootstrap - Jalankan Projek react-bootstrap:
sudo npm start
Selanjutnya kita akan mengedit App.js.
Buka file App.jsyang berada di dalam folder src.
Lalu edit menjadi seperti kode di bawah ini
import React from 'react';function App() {
return (
<div className="App">
<h1>React JS</h1>
<button>Submit</button>
</div>
);
}export default App;
Lalu save perubahan tersebut, dan liat hasilnya di browser.
Terlihat bahwa ditampilkan dua buah element yaitu element h1 dan element button.
Selanjutnya kita akan menggunakan Bootstrap di ReactJS dan akan melihat perbedaan pada dua buah element tersebut.
1. Menggunakan Bootstrap CDN
Cara yang paling mudah adalah menggunakan Bootstrap CDN
Buka terlebih dahulu website bootstrap: getbootstrap.com.
Lalu copy link bootstrap cdn ke folder public/index.html.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">Buka file public/index.html.
Lalu tambahkan di dalam tag head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Sekarang, kita bisa menggunakan Bootstrap dengan ReactJS.
Simpan perubahan tersebut, lalu lihat kembali hasilnya di web browser.
Apakah terlihat perubahannya? jika tidak mari kita tambahkan beberapa class bootstrap.
Buka kembali file src/App.js.
Kemudian edit menjadi kode berikut
import React from 'react';function App() {
return (
<div className="App container">
<h1 className="text-danger">React JS</h1>
<button className="btn btn-primary">Submit</button>
</div>
);
}export default App;
Kemudian save, dan lihat perubahan di web browser kembali.
Sekarang terlihat perbedaannya, kita telah berhasil menggunakan Bootstrap dan ReactJS.
Selanjutnya, kita akan menggunakan cara kedua yaitu menginstall bootstap melalui npm.
2. Menginstall Bootstrap melalui NPM
Cara selanjutnya adalah menginstall bootstrap melalui NPM.
Sebelum melanjutkan, terlebih dahulu kita menghapus link css bootstrap yang dipasang melalui CDN pada file public/index.html.
Simpan perubahan, dan lihat hasilnya pada web browser.
Tampilan akan tampil seperti semula tanpa menggunakan Bootstrap.
Selanjutnya buka terminal dan arahkan ke dalam folder project react-bootstrap.
Install bootstrap: sudo npm install bootstap.
Setelah menginstall bootstrap, kita meng-import file bootstrap ke dalam file public/index.js.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './App';
import * as serviceWorker from './serviceWorker';Kita mengimport file bootstap.min.css ke dalam file index.js.
Simpan perubahan, dan lihat hasilnya di web browser.
Sekian cara menggunakan Bootstrap dengan ReactJS.
