Cara Membuat Halaman Login dengan React JS dan Bootstrap

React JS adalah library JavaScript yang populer untuk membangun antarmuka pengguna interaktif. Dalam artikel ini, Anda akan belajar cara membuat halaman login sederhana dengan React JS, Bootstrap untuk desain, dan JavaScript untuk validasi.

1. Persiapan Proyek React

Buat proyek React baru dengan perintah berikut:

npx create-react-app login-app

Masuk ke direktori proyek:

cd login-app

Jalankan proyek dengan perintah:

npm start

2. Instalasi Bootstrap

Tambahkan Bootstrap ke proyek Anda dengan perintah:

npm install bootstrap

Import Bootstrap ke file src/index.js:

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

3. Membuat Komponen Halaman Login

Buat file baru src/Login.js untuk halaman login:

import React, { useState } from 'react';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();
    if (!email || !password) {
      setError('Semua field harus diisi.');
      return;
    }

    if (!/^[^@]+@[^@]+\.[^@]+$/.test(email)) {
      setError('Format email tidak valid.');
      return;
    }

    setError('');
    alert('Login Berhasil!\nEmail: ' + email);
  };

  return (
    

      

        

          

            

              
Login
            
            

              {error && 
{error}
}
              

                

                  Email
                   setEmail(e.target.value)}
                  />
                
                

                  Password
                   setPassword(e.target.value)}
                  />
                
                
                  Login
                
              
            
          
        
      
    
  );
}

export default Login;

4. Menambahkan Komponen ke Aplikasi

Impor komponen Login ke file src/App.js:

import React from 'react';
import Login from './Login';

function App() {
  return (
    

      
    
  );
}

export default App;

5. Penjelasan Kode

• useState: Hook React untuk mengelola state seperti email, password, dan error.
• handleLogin: Fungsi untuk menangani validasi input dan aksi login.
• Bootstrap: Digunakan untuk mendesain form login agar terlihat profesional.

6. Validasi Input

Validasi email dilakukan dengan regex sederhana, dan validasi password memastikan input tidak kosong.

7. Menambahkan Fitur Tambahan

Untuk menambahkan fitur seperti integrasi API login, ubah fungsi handleLogin untuk mengirim data ke server menggunakan fetch atau library seperti axios:

fetch('https://example.com/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ email, password }),
})
  .then((response) => response.json())
  .then((data) => {
    if (data.success) {
      alert('Login berhasil!');
    } else {
      setError('Login gagal: ' + data.message);
    }
  });

Kesimpulan

Dengan React JS dan Bootstrap, Anda dapat membuat halaman login yang responsif dan mudah digunakan. Kombinasi validasi input dan desain modern meningkatkan pengalaman pengguna secara keseluruhan.

Gambar: Ilustrasi Halaman Login di React JS