Praktik: Membuat aplikasi daftar tugas sederhana dengan React.js

Berikut adalah modul praktik yang dirancang untuk membantu Anda dalam membuat aplikasi daftar tugas (To-Do List) sederhana menggunakan React.js pada sistem Ubuntu 24.04. Modul ini merupakan bagian dari mata kuliah Pemrograman Web dan disusun tanpa menggunakan alat dari Microsoft.

• • Tujuan Pembelajaran:**

1. Memahami dasar-dasar React.js dalam pembuatan aplikasi frontend. 2. Mampu membuat komponen dan mengelola state dalam React.js. 3. Mampu membangun aplikasi To-Do List sederhana dengan fitur menambah dan menghapus tugas.

• • Prasyarat:**

- Pemahaman dasar tentang HTML, CSS, dan JavaScript. - Akses ke sistem yang menjalankan Ubuntu 24.04. - Koneksi internet untuk menginstal paket yang diperlukan.

• • Langkah 1: Instalasi Node.js dan npm**

React.js memerlukan Node.js dan npm (Node Package Manager) untuk pengelolaan paket dan dependensi.

1. **Perbarui daftar paket:**

  ```bash
  sudo apt update
  ```

2. **Instal Node.js dan npm:**

  ```bash
  sudo apt install nodejs npm
  ```

3. **Verifikasi instalasi:**

  ```bash
  node -v
  npm -v
  ```

  Perintah di atas akan menampilkan versi Node.js dan npm yang telah diinstal.

• • Langkah 2: Membuat Proyek React Baru**

Setelah Node.js dan npm terinstal, Anda dapat membuat proyek React baru menggunakan Vite, alat build yang cepat dan modern untuk proyek JavaScript.

1. **Buat proyek baru dengan Vite:**

  ```bash
  npm create vite@latest my-todo-app
  ```

  Ikuti prompt yang muncul:

  - Pilih nama proyek (misalnya, `my-todo-app`).
  - Pilih framework: **React**.
  - Pilih varian: **JavaScript** atau **TypeScript** sesuai kebutuhan.

2. **Masuk ke direktori proyek dan instal dependensi:**

  ```bash
  cd my-todo-app
  npm install
  ```

3. **Jalankan server pengembangan:**

  ```bash
  npm run dev
  ```

  Aplikasi React.js Anda sekarang berjalan dan dapat diakses melalui alamat yang ditampilkan, biasanya `http://localhost:5173`.

• • Langkah 3: Membuat Komponen To-Do List**

Dalam React.js, komponen digunakan untuk membangun antarmuka pengguna secara modular. Kita akan membuat komponen untuk menampilkan daftar tugas dan formulir untuk menambah tugas baru.

1. **Buat file `TodoList.js` dalam folder `src`:**

  ```jsx
  import React, { useState } from 'react';

  function TodoList() {
    const [tasks, setTasks] = useState([]);
    const [task, setTask] = useState();

    const addTask = () => {
      if (task.trim() !== ) {
        setTasks([...tasks, task]);
        setTask();
      }
    };

    const removeTask = (index) => {
      const newTasks = tasks.filter((_, i) => i !== index);
      setTasks(newTasks);
    };

    return (

Daftar Tugas

        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Tambahkan tugas baru"
        />
        <button onClick={addTask}>Tambah</button>

{tasks.map((t, index) => (
• {t} <button onClick={() => removeTask(index)}>Hapus</button>
))}

    );
  }

  export default TodoList;
  ```

  Komponen `TodoList` di atas memungkinkan pengguna untuk menambahkan tugas baru ke dalam daftar dan menghapus tugas yang sudah ada.

2. **Modifikasi `App.js` untuk menggunakan komponen `TodoList`:**

  ```jsx
  import React from 'react';
  import TodoList from './TodoList';

  function App() {
    return (

        <TodoList />

    );
  }

  export default App;
  ```

  Dengan memodifikasi `App.js` seperti di atas, komponen `TodoList` akan dirender sebagai bagian dari aplikasi utama.

• • Langkah 4: Menjalankan dan Menguji Aplikasi**

1. **Pastikan server pengembangan berjalan:**

  Jika sebelumnya Anda telah menghentikan server, jalankan kembali dengan perintah:

  ```bash
  npm run dev
  ```

2. **Akses aplikasi melalui browser:**

  Buka browser dan navigasikan ke `http://localhost:5173`. Anda akan melihat antarmuka aplikasi To-Do List yang telah dibuat.

3. **Uji fitur aplikasi:**

  - Tambahkan beberapa tugas dengan mengetikkan teks pada input dan menekan tombol "Tambah".
  - Hapus tugas dengan menekan tombol "Hapus" di sebelah tugas yang ingin dihapus.

• • Catatan Tambahan:**

- **Penyimpanan Data:** Untuk menyimpan data tugas secara permanen, Anda dapat mempertimbangkan penggunaan `localStorage` atau mengintegrasikan aplikasi dengan backend.

- **Stilisasi:** Untuk mempercantik tampilan, Anda dapat menambahkan file CSS dan mengimpor ke dalam komponen yang sesuai.

- **Fitur Tambahan:** Pertimbangkan untuk menambahkan fitur seperti menandai tugas yang telah selesai, mengedit tugas, atau menambahkan tenggat waktu untuk setiap tugas.

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat aplikasi To-Do List sederhana menggunakan React.js pada Ubuntu 24.04. Aplikasi ini dapat dikembangkan lebih lanjut sesuai kebutuhan dan kreativitas Anda.