Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat project React.js. Dan sekarang, kita akan lanjutkan belajar bagaimana cara menambahkan Framework CSS Bootstrap dan router di dalam project React.js.
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 :
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
body {
background-color: lightgray !important;
font-family: 'Quicksand', sans-serif;
}
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 Bootstrap
Sekarang kita akan menambahkan CSS 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 bootstrap@5.1.1
Setalah berhasil melakukan installasi Bootstrap, sekarang kita akan panggil CSS-nya di dalam project React.js secara global. Silahkan buka file src/index.js, kemudiuan ubah kode-nya menjadi seperti berikut ini :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
//import custom CSS
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Di atas, kita melakukan import CSS Bootstrap, fungsinya agar dapat di jalankan secara global di dalam project React.js.
//import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
Langkah 3 - Installasi Library react-router-dom
React Router Dom merupakan library di dalam React.js yang digunakan untuk membuat sebuah route atau navigasi dengan mudah dan cepat serta menerapkan konsep SPA atau single page application.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project React.js.
npm install react-router-dom@5.2.0
Jika perintah di atas berhasil dijalankan, maka kita bisa memverifikasi apakah library tersebut berhasil terinstall di dalam project React.js. Silahkan cek di dalam file package.json dan dibagian dependencies, maka akan terdapat kurang lebih seperti berikut ini :
"dependencies": {
...
"react-router-dom": "^5.2.0",
...
},
Yang artinya library tersebut telah berhasil diinstall di dalam project React.js.
Langkah 4 - Membuat Component / View Register
Sekarang kita akan melanjutkan membuat beberapa component / view, dimana file ini yang akan di render ketika route dipanggil dan kita akan memberikan sample kode aja, karena di langkah selanjutnya kita akan merubah isinya lagi.
Silahkan buat folder baru dengan nama pages di dalam folder src. Dan di dalam folder pages, silahkan buat fol baru dengan nama Register.js, kemudian masukkan kode berikut ini :
import React from 'react';
function Register() {
return (
<div className="container" style={{ marginTop: "120px" }}>
<div className="row justify-content-center">
<div className="col-md-6">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
HALAMAN REGISTER
</div>
</div>
</div>
</div>
</div>
)
}
export default Register;
Langkah 5 - Membuat Component / View Login
Kita lanjutkan untuk membuat component / view untuk halaman register. Silahkan buat file baru dengan nama Login.js di dalam folder src/pages. Dan masukkan kode berikut ini :
import React from 'react';
function Login() {
return (
<div className="container" style={{ marginTop: "120px" }}>
<div className="row justify-content-center">
<div className="col-md-4">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
HALAMAN LOGIN
</div>
</div>
</div>
</div>
</div>
)
}
export default Login;
Langkah 6 - Membuat Component / View Dashboard
Terakhir, kita akan membuat component / view untuk halaman dashboard. Silahkan buat file baru dengan nama Dashboard.js di dalam folder src/pages dan masukkan kode berikut ini :
import React from 'react';
function Dashboard() {
return (
<div className="container" style={{ marginTop: "120px" }}>
<div className="row justify-content-center">
<div className="col-md-12">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
HALAMAN DASHBOARD
</div>
</div>
</div>
</div>
</div>
)
}
export default Dashboard;
Langkah 7 - Konfigurasi Router di React.js
Setelah berhasil membuat beberapa component / view, sekarang kita akan membuat konfigurasi router di dalam React.js, dimana route tersebut akan memanggil file component / view yang sudah kita buat di atas.
Silahkan buka file src/App.js, kemudian ubah kode-nya menjadi seperti berikut ini :
//import react
import React from 'react';
//import react router dom
import { Switch, Route } from "react-router-dom";
//import component Register
import Register from './pages/Register';
//import component Login
import Login from './pages/Login';
//import component Register
import Dashboard from './pages/Dashboard';
function App() {
return (
<div>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/dashboard" component={Dashboard} />
</Switch>
</div>
);
}
export default App;
Di atas, pertama kita melakukan import Switch dan Route dari React Router Dom, dimana kedua hook tersebut akan digunakan untuk membuat konfigurasi dari router.
//import react router dom
import { Switch, Route } from "react-router-dom";
Dan kita juga mengimport beberapa halaman / component yang sudah kita buat sebelumnya, yaitu Register, Login dan Dashboard.
//import component Register
import Register from './pages/Register';
//import component Login
import Login from './pages/Login';
//import component Register
import Dashboard from './pages/Dashboard';
Setelah itu, kita membuat konfigurasi route kurang lebih seperti berikut ini :
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/dashboard" component={Dashboard} />
</Switch>
Dalam contoh pendefinisian route di atas, pertama adalah path, yang mana merupakan URL yang akan digunakan di dalam route tersebut dan component adalah component yang akan di render saat route tersebut dipanggil.
Langkah 8 - Melakukan Render Route
Terakhir, kita akan menambahkan sedikit kode yang bertujuan agar dari route yang sudah kita buat di atas dapat di render di dalam web browser.
Silahkan buka file src/index.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
//import custom CSS
import './index.css';
//BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Dari penambahan kode di atas, pertama kita import hook BrowserRouter dari React Router Dom.
//BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';
Setelah itu, kita gunakan hook BrowserRouter tersebut untuk membungkus component atau file App.
<BrowserRouter>
<App />
</BrowserRouter>
Karena konfigurasi route yang kita buat berada di dalam file App tersebut.
Dan sekarang, jika kita reload project React.js, maka akan mendapatkan hasil kurang lebih seperti berikut ini :
Kenapa muncul halaman login ? karena untuk route dengan path / kita arahkan ke dalam component / view login. Jadi untuk default page adalah halaman login.
Sampai disini pembahasan bagaimana cara melakukan konfigurasi React Router Dom dan menginstall Bootstrap di dalam project React.js. Di artikel selanjutnya kita akan beajar bagaimana cara membuat proses register di dalam React.js.
Terima Kasih