Membuat To-Do List App dengan React Tailwind

Apa Itu To-Do List?

To-Do List adalah daftar tugas yang bisa ditambahkan, ditandai selesai, dan dihapus. Contohnya:

✅ Belajar React
☐ Cuci motor
☐ Kerjakan PR

Persiapan Alat

1. Install Node.js

Download dari: https://nodejs.org/

Setelah install, cek di terminal/cmd:

2. Install Code Editor

Gunakan Visual Studio Code (VS Code)

Mulai Membuat Proyek React

Kita akan pakai Vite karena cepat dan ringan dibanding Create React App.

1. Buka Terminal dan ketik:

npm create vite@latest todo-app -- --template react

todo-app adalah nama folder proyek. Bisa diganti.

Pilih "React" saat diminta template.

2. Masuk ke folder proyek:

cd todo-app

3. Install semua dependency:

npm install

Tambahkan Tailwind CSS

Untuk membuat tampilan cantik tanpa ribet, kita gunakan Tailwind CSS.

1. Install Tailwind:

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

2. Konfigurasi file tailwind.config.js:

Buka dan ubah seperti ini:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Atur file CSS

Buka src/index.css, ubah seluruh isi jadi:

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

Jalankan Proyek

Di terminal:

npm run dev

Buka browser: http://localhost:5173

Sekarang Kita Koding Aplikasinya!

1. Buka file App.jsx di folder src/

Ganti seluruh isi dengan ini:

import { useState } from "react";

function App() {
  const [task, setTask] = useState(""); // input user
  const [todos, setTodos] = useState([]); // daftar tugas

  // Menambahkan tugas
  const addTask = () => {
    if (task.trim() === "") return; // jangan tambah jika kosong
    setTodos([...todos, { text: task, completed: false }]);
    setTask(""); // kosongkan input
  };

  // Menandai tugas selesai / belum
  const toggleComplete = (index) => {
    const updatedTodos = [...todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    setTodos(updatedTodos);
  };

  // Menghapus tugas
  const deleteTask = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    
      
        To-Do List

        {/* Input dan tombol tambah */}
        
           setTask(e.target.value)}
            className="flex-1 border px-3 py-2 rounded-l-md focus:outline-none"
          />
          
            Tambah
          
        

        {/* Daftar tugas */}
        
      
    
  );
}

export default App;

Penjelasan Bagian-Bagian Kode

Coba Tambahkan Fitur Sendiri:

Simpan ke localStorage agar tidak hilang saat refresh

Tambah filter: Semua / Selesai / Belum

Tambah waktu dibuat

Gunakan ikon (react-icons)

Bonus: Tampilan Dark Mode (Opsional)

Tambahkan class Tailwind dark pada root dan sesuaikan warna. Bisa saya bantu jika kamu mau lanjut ke dark mode atau fitur lainnya.

node -v
npm -v