Bagian 2: Membuat UI Frontend dengan React + Tailwind

Halo kembali di seri membangun aplikasi web fullstack bareng ruanginformatika.com! 👋

Sesuai janji di artikel sebelumnya, kali ini kita akan mulai membangun tampilan depan alias frontend dari aplikasi To-do List kita menggunakan React dan Tailwind CSS.

🧰 Langkah 1: Setup Proyek React

Kita akan menggunakan Vite karena proses setup-nya cepat dan ringan. Jalankan perintah berikut di terminal kamu:

npm create vite@latest client --template react

Lalu masuk ke folder dan install dependensi:

cd client
npm install
  

Setelah itu, kamu bisa coba jalankan proyeknya:

npm run dev

Jika berhasil, kamu akan melihat tampilan awal React di browser.

🎨 Langkah 2: Integrasi Tailwind CSS

Tailwind CSS akan kita gunakan untuk mempercepat proses styling tanpa harus mikirin file CSS manual.

Install Tailwind dengan perintah:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  

Edit file tailwind.config.js jadi seperti ini:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  

Lalu di file src/index.css, ganti isinya dengan:

@tailwind base;
@tailwind components;
@tailwind utilities;
  

Sekarang kamu bisa pakai class Tailwind langsung di JSX!

🧱 Langkah 3: Membuat Halaman Awal

Buat beberapa file komponen seperti ini:

src/
├── components/
│   ├── Header.jsx
│   ├── TodoItem.jsx
├── pages/
│   ├── Home.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   ├── Dashboard.jsx
  

Contoh kode sederhana Header.jsx:

export default function Header() {
  return (
    <header className="bg-blue-600 text-white p-4">
      <h1 className="text-xl font-bold">To-do App</h1>
    </header>
  );
}
  

Lalu tampilkan komponen Header di App.jsx.

🌐 Langkah 4: Navigasi Halaman

Install React Router untuk navigasi antar halaman:

npm install react-router-dom

Atur routing di App.jsx:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Dashboard from "./pages/Dashboard";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
  

Sekarang kamu bisa navigasi antar halaman seperti aplikasi beneran!

✅ Kesimpulan

Sampai di sini, kita sudah berhasil:

• Setup proyek frontend dengan React + Vite
• Integrasi Tailwind CSS
• Membuat halaman dan komponen dasar
• Menambahkan navigasi dengan React Router

Di artikel berikutnya, kita akan mulai membangun bagian backend API menggunakan Express dan MongoDB.

Jangan lupa simpan dan commit proyek kamu ke GitHub ya. Silahkan di next untuk lanjut ke Bagian 3! 🔥