Najib Bahrudin — Portfolio

Banyak dari kita mulai belajar web development dari HTML, CSS, dan Bootstrap. Bootstrap memang sangat membantu karena menyediakan class siap pakai seperti btn, btn-primary, container, dan berbagai komponen lain yang membuat tampilan website cepat rapi tanpa harus menulis CSS dari nol.

Namun, ketika mulai masuk ke React, tantangannya mulai bergeser. Kita tidak lagi hanya memikirkan “bagaimana tampilan tombol ini terlihat bagus?”, tetapi juga “bagaimana tombol ini bisa merespons perubahan kondisi?”.

Di sinilah React menjadi menarik. Sebuah tombol tidak hanya menjadi elemen visual, tetapi bisa memiliki logika. Tombol bisa tahu apakah user sedang login atau belum. Tombol bisa mengubah teks, warna, bahkan perilakunya berdasarkan kondisi tertentu.

Contoh sederhana yang akan kita bahas adalah tombol login dinamis. Ketika user belum login, tombol akan bertuliskan Login dengan warna biru. Setelah diklik, status berubah menjadi login, lalu tombol berubah menjadi Sign Out dengan warna merah.

1. Intro: Kenapa Harus Pindah ke React?

Dulu, ketika membuat website statis, perubahan tampilan biasanya dilakukan dengan cara manual. Jika user sudah login, kita mungkin membuat halaman berbeda. Jika user belum login, kita menampilkan halaman lain. Cara ini memang bisa berjalan, tetapi kurang efisien untuk aplikasi modern.

React menawarkan pendekatan yang lebih dinamis. Kita cukup menyimpan kondisi tertentu di dalam state, lalu tampilan akan menyesuaikan secara otomatis.

Dengan kata lain, React membuat UI tidak hanya “ditampilkan”, tetapi juga “bereaksi”.

Masalah Komponen Statis

Komponen statis adalah komponen yang tampilannya tidak berubah kecuali halaman dimuat ulang atau kodenya diganti secara manual.

Contohnya seperti tombol HTML biasa:

html
<button class="btn btn-primary">Login</button>

Tombol di atas memang tampil bagus jika menggunakan Bootstrap. Namun, tombol tersebut belum memiliki logika. Ia tidak tahu apakah user sudah login atau belum.

Jika ingin mengubahnya menjadi tombol logout, kita harus mengganti teks dan class secara manual:

html
<button class="btn btn-danger">Sign Out</button>

Masalahnya, dalam aplikasi modern, perubahan seperti ini seharusnya terjadi secara otomatis berdasarkan kondisi user.

Solusi Berbasis Komponen (Component-Based)

React menyelesaikan masalah ini dengan konsep komponen.

Komponen adalah bagian kecil dari UI yang bisa memiliki tampilan dan logika sendiri. Tombol login tidak perlu lagi dianggap sebagai elemen HTML biasa, tetapi sebagai komponen yang bisa berpikir berdasarkan kondisi.

Misalnya:

jika isLoggedIn bernilai false, tampilkan tombol Login;
jika isLoggedIn bernilai true, tampilkan tombol Sign Out.

Dengan cara ini, satu komponen bisa menangani dua kondisi sekaligus tanpa perlu membuat dua tombol berbeda.

2. Arsitektur Komponen: State & Props

Sebelum menulis kode, kita perlu memahami bagaimana komponen ini bekerja.

Secara sederhana, tombol login dinamis membutuhkan satu data utama, yaitu status login user.

Status tersebut bisa kita simpan dalam state bernama isLoggedIn.

Jika nilainya false, berarti user belum login.
Jika nilainya true, berarti user sudah login.

Memahami useState Hook

useState adalah salah satu hook paling dasar di React. Hook ini digunakan untuk menyimpan data yang bisa berubah selama aplikasi berjalan.

Dalam kasus tombol login, kita bisa menulis:

jsx
const [isLoggedIn, setIsLoggedIn] = useState(false);

Artinya:

isLoggedIn adalah nilai state saat ini;
setIsLoggedIn adalah fungsi untuk mengubah nilai state;
false adalah nilai awal, yang berarti user belum login.

Ketika tombol diklik, nilai isLoggedIn akan dibalik. Jika awalnya false, maka berubah menjadi true. Jika sudah true, maka berubah lagi menjadi false.

Struktur Komponen Tombol

Komponen tombol ini akan memiliki tiga bagian utama:

state untuk menyimpan status login;
fungsi untuk mengubah status login;
tampilan tombol yang berubah berdasarkan state.

Kita juga akan tetap menggunakan class Bootstrap agar tampilannya langsung rapi.

Contohnya:

btn btn-primary untuk tombol Login;
btn btn-danger untuk tombol Sign Out.

3. Implementasi Koding (The Logic)

Di bagian ini, kita mulai masuk ke implementasi kode. Tujuan akhirnya adalah membuat komponen LoginButtonDemo yang bisa langsung digunakan di halaman blog atau aplikasi React.

Inisialisasi State Awal

Pertama, kita import useState dari React.

jsx
import { useState } from "react";

Lalu kita buat komponen:

jsx
function LoginButtonDemo() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <button className="btn btn-primary">
      Login
    </button>
  );
}

export default LoginButtonDemo;

Pada tahap ini tombol sudah muncul, tetapi belum dinamis. Teks dan warnanya masih tetap.

Membuat Fungsi HandleClick

Agar tombol bisa mengubah status login, kita buat fungsi handleClick.

jsx
const handleClick = () => {
  setIsLoggedIn(!isLoggedIn);
};

Fungsi tersebut akan membalik nilai state.

Jika isLoggedIn adalah false, maka akan menjadi true.
Jika isLoggedIn adalah true, maka akan menjadi false.

Versi yang lebih aman dan umum digunakan adalah seperti ini:

jsx
const handleClick = () => {
  setIsLoggedIn((prevState) => !prevState);
};

Cara ini lebih disarankan karena React mengambil nilai state sebelumnya secara langsung melalui prevState.

Conditional Rendering pada Teks

Sekarang kita bisa membuat teks tombol berubah berdasarkan kondisi.

jsx
{isLoggedIn ? "Sign Out" : "Login"}

Artinya:

jika isLoggedIn bernilai true, tampilkan Sign Out;
jika false, tampilkan Login.

Kita juga bisa mengubah warna tombol dengan cara yang sama:

jsx
className={`btn ${isLoggedIn ? "btn-danger" : "btn-primary"}`}

Kode lengkapnya menjadi seperti ini:

jsx
import { useState } from "react";

function LoginButtonDemo() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleClick = () => {
    setIsLoggedIn((prevState) => !prevState);
  };

  return (
    <div className="text-center my-4">
      <button
        onClick={handleClick}
        className={`btn ${isLoggedIn ? "btn-danger" : "btn-primary"}`}
      >
        {isLoggedIn ? "Sign Out" : "Login"}
      </button>

      <p className="mt-3">
        Status: {isLoggedIn ? "User sudah login" : "User belum login"}
      </p>
    </div>
  );
}

export default LoginButtonDemo;

Kode di atas sudah cukup untuk membuat tombol login dinamis.

Saat tombol diklik:

state berubah;
teks tombol berubah;
warna tombol berubah;
status di bawah tombol juga ikut berubah.

Inilah inti dari React: UI mengikuti perubahan data.

4. Visualisasi Hasil: Tampilan Akhir

Berikut adalah hasil akhir dari komponen yang kita buat.

jsx
<LoginButtonDemo />

Catatan Visual: Perhatikan bagaimana warna tombol berubah dari Biru (Login) menjadi Merah (Logout) secara seamless tanpa ada refresh halaman sedikit pun.

html
<p align="center">
  <img
    src="/images/login-button-preview.png"
    alt="Hasil Akhir Login Button React Bootstrap"
    width="400"
  />
</p>

Jika ingin membuat tampilannya sedikit lebih menarik, kita bisa menambahkan animasi transisi sederhana menggunakan CSS.

css
.btn {
  transition: all 0.3s ease;
}

Dengan CSS tersebut, perubahan warna tombol akan terasa lebih halus.

Jika ingin versi komponen yang lebih siap digunakan ulang, kita juga bisa menambahkan sedikit wrapper:

jsx
import { useState } from "react";

function LoginButtonDemo() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleClick = () => {
    setIsLoggedIn((prevState) => !prevState);
  };

  return (
    <div className="card p-4 text-center shadow-sm">
      <h5 className="mb-3">
        {isLoggedIn ? "Welcome Back!" : "Please Login"}
      </h5>

      <button
        onClick={handleClick}
        className={`btn ${isLoggedIn ? "btn-danger" : "btn-primary"}`}
      >
        {isLoggedIn ? "Sign Out" : "Login"}
      </button>

      <small className="text-muted mt-3 d-block">
        {isLoggedIn
          ? "Kamu sedang berada dalam mode login."
          : "Klik tombol untuk masuk ke akun."}
      </small>
    </div>
  );
}

export default LoginButtonDemo;

Versi ini lebih cocok untuk ditampilkan sebagai demo di artikel karena terlihat seperti komponen UI sungguhan, bukan hanya tombol biasa.

5. Kesimpulan dan Pesan untuk Developer Pemula

Belajar React bukan hanya soal menghafal sintaks seperti useState, props, atau component. Lebih dari itu, React mengajarkan kita cara berpikir baru dalam membangun UI.

Di HTML biasa, kita cenderung berpikir secara statis:

“Tampilkan tombol ini.”

Di React, kita berpikir secara dinamis:

“Tampilkan tombol berdasarkan kondisi saat ini.”

Perubahan cara berpikir inilah yang penting.

Jangan Takut dengan State

State memang bisa membingungkan di awal. Namun, hampir semua fitur interaktif di React bergantung pada state.

Mulai dari tombol login, modal, dropdown, form input, dark mode, sampai dashboard kompleks, semuanya membutuhkan state untuk menyimpan kondisi tertentu.

Jika kamu sudah memahami contoh sederhana seperti tombol login ini, maka kamu sudah memahami salah satu fondasi terpenting dalam React.

Teruslah Bereksperimen dengan UI

Jangan berhenti di tombol login.

Coba kembangkan konsep yang sama menjadi:

tombol dark mode,
tombol like,
dropdown menu,
modal popup,
form validasi,
atau navbar yang berubah ketika user login.

Semua fitur tersebut menggunakan pola berpikir yang mirip:

simpan kondisi di state, lalu ubah tampilan berdasarkan state tersebut.

Pesan Penutup

Setiap developer pasti pernah bingung saat pertama kali belajar React. Error merah di layar, komponen tidak muncul, atau state tidak berubah adalah bagian dari proses belajar.

Jangan takut dengan error. Justru dari error itulah kita belajar membaca masalah, memahami alur kode, dan memperbaiki logika program.

Tombol login sederhana ini mungkin terlihat kecil, tetapi konsep di dalamnya sangat penting. Dari satu tombol ini, kita belajar tentang state, event handling, conditional rendering, dan component-based thinking.

Setiap baris kode yang kamu tulis hari ini adalah investasi untuk kemampuanmu di masa depan.

Jangan berhenti hanya karena satu error. Debug, pahami, perbaiki, lalu lanjutkan.

Karena developer yang hebat bukan yang tidak pernah error, tetapi yang tidak menyerah ketika error muncul.

Membangun Tombol Login Dinamis: Transisi dari Bootstrap ke React