Aplikasi Login React yang Menggemaskan (Jangan Lupa Bawa Senyum!)

 

Hai, teman-teman! Jadi, kali ini kita bakal membuat aplikasi login dengan React yang... cukup lucu! Yups, kita nggak cuma login ke aplikasi ini, tapi juga ke dalam dunia yang penuh tawa (atau mungkin sedikit ketawa kecut kalau lupa password). Yuk, simak langkah-langkahnya!

Langkah 1: Siapkan Proyek React

Jangan takut, ini langkah paling mudah. Kita akan menggunakan create-react-app, dan aplikasi kita bakal siap dalam sekejap!

npx create-react-app login-app
cd login-app

Ini seperti membeli tiket ke dunia React. Setelah ini, kita bisa mulai berpetualang!

Langkah 2: Buat Komponen Login dengan Segudang Senyum

Sekarang, saatnya kita buat komponen login yang bakal bikin pengguna senyum-senyum sendiri. Di dalam src, buat file baru yang kita namakan Login.js dan isi dengan kode lucu ini:

import React, { useState } from 'react';
import './Login.css';  // Gaya lucu agar makin kece

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username === 'superhero' && password === 'password123') {
      setSuccess(true);
      setError('');
    } else {
      setError('Yah, username atau password salah! Coba lagi ya, superhero!');
      setSuccess(false);
    }
  };

  return (
    <div className="login-container">
      <h2 className="login-title">Halo, Masuk Yuk!</h2>

      {success && <p className="success-message">Yay! Kamu berhasil masuk, superhero! </p>}

      {error && <p className="error-message">{error}</p>}

      <form onSubmit={handleSubmit} className="login-form">
        <div className="input-group">
          <label htmlFor="username">Username (Psst... coba "superhero")</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="Masukkan username kamu, jika kamu berani!"
          />
        </div>

        <div className="input-group">
          <label htmlFor="password">Password (Coba yang klasik: "password123")</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Masukkan password kamu, super rahasia!"
          />
        </div>

        <button type="submit" className="login-button">
          Masuk! 
        </button>
      </form>

      <p className="footer-text">Tenang, nggak ada yang serius di sini. </p>
    </div>
  );
};

export default Login;

Langkah 3: Tampil Kece dengan CSS Lucu

Agar aplikasimu makin menggemaskan, kita butuh sedikit sentuhan magis di bagian styling. Buat file Login.css dengan gaya-gaya yang akan bikin pengguna terhibur (atau setidaknya nggak ngerasa kayak lagi kerja):

.login-container {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 12px;
  background-color: #f7f8fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-title {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  color: #ff6347;
  font-size: 28px;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  text-align: left;
}

.input-group label {
  font-size: 14px;
  color: #555;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 12px;
  margin-top: 5px;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid #ddd;
  box-sizing: border-box;
}

input:focus {
  border-color: #ff6347;
  outline: none;
}

.login-button {
  background-color: #ff6347;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #ff4500;
}

.success-message {
  color: green;
  font-size: 18px;
  margin-bottom: 20px;
}

.error-message {
  color: red;
  font-size: 16px;
  margin-bottom: 20px;
}

.footer-text {
  font-size: 14px;
  color: #777;
  margin-top: 20px;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.login-button {
  animation: bounce 1s infinite;
}

Langkah 4: Gabungkan di App.js

Sekarang, saatnya menggabungkan semuanya di App.js. Masukkan komponen Login ke dalam App.js supaya bisa ditampilkan di aplikasi kita.

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

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

export default App;

Langkah 5: Jalankan Aplikasinya dan Tertawa Bersama!

Setelah semua siap, saatnya untuk menjalankan aplikasi. Cukup ketik perintah berikut di terminal:

npm start

Dan... tadaa! Sekarang kamu punya aplikasi login yang nggak cuma bisa masukin data, tapi juga bikin pengguna tertawa (atau paling nggak, senyum-senyum malu karena passwordnya salah).

Kesimpulan

Aplikasi login yang satu ini adalah contoh yang super sederhana, tapi bisa bikin suasana lebih menyenangkan. Kapan lagi bisa login sambil ketawa-ketawa? Semoga kamu suka, dan kalau ada ide untuk fitur-fitur lucu lainnya, jangan ragu untuk berbagi.

Gimana? Seru kan kalau setiap login bisa jadi pengalaman yang menghibur? Cobalah dan lihat sendiri reaksi teman-temanmu!