Praktik: Membuat aplikasi daftar tugas sederhana dengan React.js

From OnnoWiki
Jump to navigation Jump to search

Tujuan Pembelajaran:

Setelah menyelesaikan praktik ini, mahasiswa mampu:

  • Membuat proyek React.js menggunakan Vite
  • Mengelola state untuk data dinamis
  • Menggunakan form dan event handling
  • Menghapus dan menambahkan data secara dinamis

Persiapan Awal

1. Install Node.js dan npm 

sudo apt update
sudo apt install nodejs npm -y

2. Cek versi: 

node -v
npm -v

Inisialisasi Proyek React

3. Buat Proyek Baru dengan Vite 

npm create vite@latest todo-app -- --template react
cd todo-app
npm install
npm run dev

Akses di browser: `http://localhost:5173`

Struktur Proyek Dasar

Buat folder `components` di `src`: 

mkdir src/components

1. Buat Komponen Tambah Tugas (`AddTask.jsx`)

 // src/components/AddTask.jsx
 import { useState } from "react";
 
 function AddTask({ onAdd }) {
   const [text, setText] = useState("");
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (text.trim() === "") return;
     onAdd(text);
     setText("");
   };
 
   return (
     <form onSubmit={handleSubmit}>
       <input
         type="text"
         placeholder="Tulis tugas..."
         value={text}
         onChange={(e) => setText(e.target.value)}
       />
       <button type="submit">Tambah</button>
     </form>
   );
 }
 
 export default AddTask;

2. Buat Komponen Daftar Tugas (`TaskList.jsx`)

 // src/components/TaskList.jsx
 function TaskList({ tasks, onDelete }) {
   return (
     <ul>
       {tasks.map((task, index) => (
         <li key={index}>
           {task} <button onClick={() => onDelete(index)}>Hapus</button>
         </li>
       ))}
     </ul>
   );
 }
 
 export default TaskList;

3. Kelola State di `App.jsx`

 // src/App.jsx
 import { useState } from "react";
 import AddTask from "./components/AddTask";
 import TaskList from "./components/TaskList";
 
 function App() {
   const [tasks, setTasks] = useState([]);
 
   const addTask = (text) => {
     setTasks([...tasks, text]);
   };
 
   const deleteTask = (index) => {
     const newTasks = tasks.filter((_, i) => i !== index);
     setTasks(newTasks);
   };
 
   return (
     <div>
       <h1>Daftar Tugas</h1>
       <AddTask onAdd={addTask} />
       <TaskList tasks={tasks} onDelete={deleteTask} />
     </div>
   );
 }
 
 export default App;

4. Styling Sederhana (Opsional)

Tambahkan ke `src/index.css` atau `App.css`: 

body {
  font-family: Arial, sans-serif;
  padding: 2rem;
  background: #f0f0f0;
}

input {
  padding: 0.5rem;
  margin-right: 0.5rem;
}

button {
  padding: 0.5rem;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

5. Fitur Tambahan (Opsional untuk Mahasiswa Lebih Lanjut)

  • Tambahkan fitur checklist (tugas selesai)
  • Simpan data ke `localStorage`
  • Gunakan UUID untuk key unik
  • Tambahkan validasi lebih lanjut (panjang teks minimal, dsb.)

Tugas Mahasiswa

Praktik Mandiri

  • Buat aplikasi daftar tugas berdasarkan template ini
  • Tambahkan fitur tambahan:
    • Centang tugas selesai (opsional)
    • Simpan ke `localStorage` (opsional)

Laporan Praktik

  • Screenshot hasil aplikasi
  • Penjelasan singkat bagaimana state dan props digunakan
  • Upload project ke GitHub dan lampirkan link

Referensi


Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Praktik:_Membuat_aplikasi_daftar_tugas_sederhana_dengan_React.js&oldid=72472"