Cara Bikin Halaman Login yang Keren dengan Bootstrap 5 dan ReactJs

Kali ini kita akan belajar cara bikin halaman login yang keren dengan bootstrap 5 dan ReactJs. Yuk, simak langkah-langkahnya!

Bootstrap 5 dan ReactJs, Apa Sih Itu?

Sebelum kita mulai, kita harus tahu dulu apa sih bootstrap 5 dan ReactJs itu. Bootstrap 5 adalah framework CSS yang populer dan mudah digunakan untuk membuat website yang responsif dan indah. Bootstrap 5 tidak lagi membutuhkan jQuery, jadi kita bisa langsung pakai bootstrap 5 di proyek ReactJs kita tanpa perlu library tambahan.

ReactJs adalah library JavaScript yang ringan dan powerful untuk membuat user interface yang interaktif dan dinamis. ReactJs memungkinkan kita untuk membuat komponen-komponen yang reusable dan mudah diatur, sehingga kita bisa membuat website yang kompleks dengan lebih cepat dan efisien. ReactJs juga kompatibel dengan bootstrap 5, jadi kita bisa menggabungkan keduanya untuk membuat website yang keren dan modern.

Langkah 1: Install Bootstrap 5 dan ReactJs

Langkah pertama yang harus kita lakukan adalah install bootstrap 5 dan ReactJs di proyek kita. Caranya gampang banget, tinggal ikutin instruksi berikut ini:

• Buka terminal atau command prompt di folder proyek kita
• Ketik npx create-react-app my-app untuk membuat proyek ReactJs baru dengan nama my-app
• Masuk ke folder proyek dengan mengetik cd my-app
• Ketik npm install bootstrap untuk install bootstrap 5
• Ketik npm install @popperjs/core untuk install popper.js yang dibutuhkan oleh bootstrap 5

Setelah selesai install, kita harus import bootstrap 5 di file utama proyek kita, yaitu src/index.js. Caranya, tambahkan kode berikut di file tersebut:

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

Kode di atas akan mengimport file CSS dan JS dari bootstrap 5, sehingga kita bisa menggunakan class-class dan komponen-komponen yang disediakan oleh bootstrap 5 di proyek kita.

Langkah 2: Buat Komponen Halaman Login

Langkah kedua yang harus kita lakukan adalah membuat komponen halaman login yang akan menampilkan form untuk input email dan password, serta tombol untuk login. Caranya, kita bisa membuat file baru dengan nama Login.js di folder src/components. Lalu, isi file tersebut dengan kode berikut:

import React, { useState } from "react"

function Login() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const handleSubmit = (e) => {
    e.preventDefault()
    // logic untuk login
    alert(`Email: ${email}, Password: ${password}`)
  }

  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card mt-5">
            <div className="card-body">
              <h1 className="card-title text-center">Login</h1>
              <form onSubmit={handleSubmit}>
                <div className="mb-3">
                  <label htmlFor="email" className="form-label">
                    Email
                  </label>
                  <input
                    type="email"
                    className="form-control"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>
                <div className="mb-3">
                  <label htmlFor="password" className="form-label">
                    Password
                  </label>
                  <input
                    type="password"
                    className="form-control"
                    id="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </div>
                <div className="d-grid">
                  <button type="submit" className="btn btn-primary">
                    Login
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Login

Kode di atas akan membuat sebuah fungsi komponen React yang bernama Login. Kita juga menggunakan hook useState untuk membuat state untuk menyimpan nilai email dan password yang diinput oleh user. Kita juga membuat fungsi handleSubmit untuk menangani submit form dan menjalankan logika untuk login. Untuk sementara, kita hanya menampilkan data yang diinput dengan alert.

Untuk template HTML, kita menggunakan class-class dari bootstrap 5 untuk membuat tampilan yang responsif dan indah. Kita juga menggunakan atribut value dan onChange untuk mengikat nilai input dengan state komponen, dan atribut onSubmit untuk menjalankan fungsi handleSubmit ketika form di-submit.

Langkah 3: Tampilkan Komponen Halaman Login di Aplikasi

Langkah ketiga yang harus kita lakukan adalah menampilkan komponen halaman login yang sudah kita buat di langkah sebelumnya di aplikasi kita. Caranya, kita bisa mengimport komponen Login.js di file src/App.js dan menempatkannya di dalam template. Berikut adalah kode untuk file App.js:

import React from "react"
import Login from "./components/Login"

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  )
}

export default App

Kode di atas akan mengimport komponen Login dari file Login.js dan menampilkan komponen tersebut di dalam template.

Langkah 4: Jalankan dan Cek Hasilnya

Langkah terakhir yang harus kita lakukan adalah menjalankan dan mengecek hasil dari aplikasi yang sudah kita buat. Caranya, kita bisa ketik npm start di terminal atau command prompt untuk menjalankan aplikasi kita di mode development. Lalu, kita bisa buka browser dan masuk ke alamat http://localhost:3000 untuk melihat hasilnya.