Membangun Aplikasi To-Do List dengan React.js dan Tailwind CSS
Published: 2024-01-11 18:51:30


Dalam dunia <u>pengembangan web modern</u>, 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](https://create-react-app.dev/):

```bash
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:

```bash
bashCopy code
npm install tailwindcss postcss autoprefixer

```

Inisialisasikan konfigurasi Tailwind dengan perintah:

```bash
bashCopy code
npx tailwindcss init -p

```

### **3. Konfigurasi PostCSS:**

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

```jsx
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`**:

```jsx

// 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;

```

```jsx

// 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`**:

```jsx

<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:

```jsx

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:

```lua
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**

- [haniflab.com](https://www.haniflab.com)