Website To-Do List dengan React dan Tailwind CSS

Mungkin ini adalah proyek paling klasik yang sering dibuat oleh programmer pemula—To-Do List. Tapi jangan salah, meskipun sederhana, aplikasi ini adalah cara yang bagus untuk belajar dasar-dasar React dan styling cepat pakai Tailwind CSS.

Pertama, kita mulai dengan membuat project React.

Kalau pakai Vite, jalankan:

bash
SalinEdit
npm create vite@latest todo-app
cd todo-app
npm install

Setelah itu, pasang Tailwind CSS sesuai panduan di dokumentasi resminya. Biasanya hanya butuh beberapa langkah: install dependency, edit file tailwind.config.js, dan masukkan direktif Tailwind ke file CSS utama.

Lalu, kita bikin komponen utama App.jsx yang akan menampilkan daftar tugas dan form untuk menambah tugas baru. Kita akan pakai state untuk menyimpan daftar tugas, dan setiap tugas akan berupa objek sederhana dengan id, text, dan completed.

Contoh kodenya:

jsx
SalinEdit
import { useState } from "react";

export default function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input.trim() === "") return;
    setTasks([...tasks, { id: Date.now(), text: input, completed: false }]);
    setInput("");
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center p-4">
      <h1 className="text-2xl font-bold mb-4">To-Do List</h1>
      <div className="flex gap-2 mb-4">
        <input value={input} onChange={(e) => setInput(e.target.value)}
          className="border rounded px-2 py-1"
          placeholder="Tambahkan tugas..."
        />
        <button onClick={addTask} className="bg-blue-500 text-white px-4 py-1 rounded">
          Tambah
        </button>
      </div>
      <ul className="w-full max-w-md">
        {tasks.map(task => (
          <li key={task.id} className="flex justify-between items-center p-2 bg-white mb-2 rounded shadow">
            <span onClick={() => toggleTask(task.id)}
              className={`cursor-pointer ${task.completed ? "line-through text-gray-500" : ""}`}
            >
              {task.text}
            </span>
            <button onClick={() => deleteTask(task.id)} className="text-red-500">Hapus</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Dengan ini, kamu punya To-Do List yang bisa:

• Menambah tugas

• Menandai tugas selesai

• Menghapus tugas

Styling-nya cepat dan rapi karena Tailwind CSS memungkinkan kita membuat UI tanpa ribet dengan file CSS terpisah.