Membangun Aplikasi To-Do List dengan React.js dan Tailwind CSS

Dalam dunia pengembangan web modern, membangun aplikasi yang interaktif dan responsif adalah suatu keharusan. React.js, sebuah pustaka JavaScript yang populer untuk pengembangan antarmuka pengguna, dan Tailwind CSS, sebuah kerangka kerja CSS utility-first, adalah kombinasi yang hebat untuk menciptakan aplikasi web yang dinamis dan menarik. Pada artikel ini, kita akan menjelajahi langkah-langkah untuk membuat aplikasi To-Do List menggunakan React.js dan Tailwind CSS.

1. Persiapan Proyek:

Sebelum memulai, pastikan Anda memiliki Node.js dan npm terinstal di komputer Anda. Gunakan perintah berikut untuk membuat proyek React baru dengan Create React App:

bashCopy code
npx create-react-app react-todo-list
cd react-todo-list

2. Instalasi Tailwind CSS:

Install Tailwind CSS dan dependensinya dengan menggunakan npm:

bashCopy code
npm install tailwindcss postcss autoprefixer

Inisialisasikan konfigurasi Tailwind dengan perintah:

bashCopy code
npx tailwindcss init -p

3. Konfigurasi PostCSS:

Buka file postcss.config.js dan tambahkan konfigurasi Tailwind CSS:

javascriptCopy code
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. Struktur Komponen:

Organisasikan proyek dengan membuat struktur folder untuk komponen. Buat komponen TodoList.js dan TodoItem.js:


// TodoList.js
import React, { useState } from 'react';
import TodoItem from './TodoItem';

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  // Tambahkan fungsi-fungsi manipulasi todo di sini

  return (
    <div className="max-w-md mx-auto mt-8">
      {/* Tampilkan formulir tambah todo di sini */}
      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  );
};

export default TodoList;


// TodoItem.js
import React from 'react';

const TodoItem = ({ todo }) => {
  // Tambahkan logika checkbox dan hapus di sini

  return (
    <li className="flex items-center justify-between bg-white p-4 mt-2 rounded-md shadow">
      {/* Tampilkan isi todo di sini */}
    </li>
  );
};

export default TodoItem;

5. Desain dengan Tailwind CSS:

Gunakan kelas-kelas Tailwind CSS untuk merancang komponen-komponen tersebut. Contoh penggunaan kelas Tailwind dalam komponen TodoItem:


<li className="flex items-center justify-between bg-white p-4 mt-2 rounded-md shadow">
  <span className="text-gray-700">{todo.text}</span><div className="flex items-center space-x-2">
    <input type="checkbox" id={`todo-${todo.id}`} />
    <button className="text-red-500" onClick={() => handleDelete(todo.id)}>
      Hapus
    </button>
  </div>
</li>

6. Implementasi Fungsi-Fungsi To-Do:

Tambahkan logika untuk menambah, menghapus, dan menandai sebagai selesai pada to-do:


const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    // Implementasi penambahan todo
  };

  const handleDelete = (id) => {
    // Implementasi penghapusan todo
  };

  const handleToggleComplete = (id) => {
    // Implementasi penandaan todo sebagai selesai
  };

  return (
    <div className="max-w-md mx-auto mt-8">
      <form onSubmit={handleAddTodo} className="mb-4">
        {/* Tambahkan input dan tombol submit di sini */}
      </form>
      <ul>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={() => handleDelete(todo.id)}
            onToggleComplete={() => handleToggleComplete(todo.id)}
          />
        ))}
      </ul>
    </div>
  );
};

7. Struktur Folder Proyek:

Berikut adalah struktur folder proyek yang direkomendasikan untuk aplikasi To-Do List:

luaCopy code
react-todo-list/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- TodoList.js
|   |   |-- TodoItem.js
|   |-- App.js
|   |-- index.js
|-- .gitignore
|-- package.json
|-- postcss.config.js
|-- tailwind.config.js

Penjelasan Struktur:

public/: Direktori ini berisi file statis yang akan disajikan oleh server. File index.html di sini digunakan sebagai template utama aplikasi.
src/: Direktori ini merupakan tempat utama untuk kode sumber aplikasi React.
- components/: Direktori ini berisi komponen-komponen React yang digunakan dalam aplikasi. Pada contoh ini, TodoList.js dan TodoItem.js adalah komponen-komponen yang digunakan untuk menampilkan daftar to-do dan item to-do.
- App.js: File ini merupakan komponen utama yang merangkum seluruh logika dan tampilan aplikasi.
- index.js: File ini digunakan untuk merender komponen utama (App.js) ke dalam elemen HTML dengan ID root pada file public/index.html.
.gitignore: File ini berisi daftar file dan direktori yang akan diabaikan oleh Git.
package.json: File konfigurasi untuk proyek Node.js, yang mencakup daftar dependensi, skrip, dan konfigurasi proyek lainnya.
postcss.config.js: File konfigurasi untuk PostCSS, digunakan untuk mengintegrasikan Tailwind CSS ke dalam proyek.
tailwind.config.js: File konfigurasi untuk Tailwind CSS, berisi pengaturan kustomisasi seperti warna, font, dan konfigurasi lainnya.

Dengan struktur folder yang terorganisir dengan baik, proyek Anda akan mudah dipelajari dan dikelola. Anda dapat menambahkan direktori tambahan jika diperlukan, misalnya, styles/ untuk menyimpan file CSS khusus atau utils/ untuk menyimpan utilitas fungsi. Sesuaikan struktur ini sesuai dengan kebutuhan dan preferensi proyek Anda.

Tantang to-do listmu seperti petualangan seru! Setiap tugas adalah misi kecil yang bisa kamu taklukkan. Ingat, setiap tugas yang selesai adalah kemenangan kecil yang patut dirayakan. Jadi, hadapi daftar tugasmu dengan senyuman, karena setiap checklist yang dicoret adalah satu langkah lebih dekat untuk menjadi pahlawan sehari-hari!

Referensi