Praktikum React Dasar
Memahami konsep dasar React dan membangun aplikasi interaktif dengan Component-Based Architecture
Tujuan Praktikum
Setelah menyelesaikan praktikum ini, Kalian diharapkan mampu:
- Memahami filosofi dan konsep dasar React (Component-Based Architecture)
- Membuat dan menggunakan functional components dengan hooks
- Mengelola state dan props dalam aplikasi React
- Menerapkan event handling dan conditional rendering
- Membuat form interaktif dengan controlled components
- Mengelola daftar data dengan keys dan rendering lists
- Memahami lifecycle components melalui useEffect
- Mengimplementasikan routing dasar dengan React Router
- Membuat custom hooks untuk logika yang reusable
- Menggunakan Context API untuk state management
- Menulis test unit untuk komponen React
Pengenalan React
Apa itu React?
React adalah library JavaScript yang dikembangkan oleh Facebook (sekarang Meta) untuk membangun antarmuka pengguna (UI) yang interaktif dan efisien. Berbeda dengan framework monolitik, React berfokus pada satu hal dan melakukannya dengan sangat baik: membangun UI dengan pendekatan component-based.
Konsep Kunci React
| Konsep | Deskripsi |
|---|---|
| Component-Based | Memecah UI menjadi komponen yang reusable dan independent |
| Declarative | Menentukan seperti apa UI seharusnya, React yang mengupdate DOM |
| Virtual DOM | Representasi memori dari DOM untuk perubahan yang efisien |
| Unidirectional Data Flow | Data mengalir satu arah, mudah di-debug |
| JSX | Sintaks yang mirip HTML untuk menulis struktur UI |
| Hooks | Memungkinkan functional components menggunakan state dan fitur React |
React vs Framework Lain
React hanya menangani layer view dalam aplikasi. Ini berbeda dengan framework seperti Angular atau Vue yang lebih comprehensive. Dengan React, Anda bebas memilih libraries tambahan untuk state management (Redux, Zustand), routing (React Router), dan lainnya sesuai kebutuhan project.
Alat dan Bahan
Untuk mengikuti praktikum ini, Kalian memerlukan:
- Node.js dan npm: Versi terbaru (LTS) untuk menjalankan React dan tools development
- Code Editor: Visual Studio Code dengan ekstensi React/JSX
- Browser Modern: Chrome/Firefox dengan React DevTools terinstal
- Git: Untuk version control dan submission praktikum
Rekomendasi Ekstensi VS Code
Ekstensi berikut akan meningkatkan produktivitas pengembangan React:
- ES7+ React/Redux/React-Native snippets - Snippets untuk React
- ESLint - Untuk menemukan dan memperbaiki masalah dalam kode
- Prettier - Untuk memformat kode secara otomatis
- Auto Import - Mengimpor modul secara otomatis
- React Developer Tools - Ekstensi browser untuk inspect komponen React
Materi Praktikum
Setup Project
Instalasi dan konfigurasi project React dengan Create React App
Components & Props
Membuat komponen React dan menggunakan props
State & Hooks
Mengelola state dengan useState dan useEffect
Routing
Navigasi multi-halaman dengan React Router
Custom Hooks
Membuat dan menggunakan custom hooks
Context API
State management global dengan Context API
Testing
Testing komponen dengan Jest dan React Testing Library
Format Pengumpulan
Direktori GitHub
- Buat repository dengan format:
pemrograman_web_itera_[NIM] - Contoh:
pemrograman_web_itera_119140001
Struktur Folder
- Buat folder per pertemuan dengan format:
[NAMA]_[NIM]_pertemuan[X] - Contoh:
johndoe_119140001_pertemuan5 - Setiap folder berisi semua file praktikum dan tugas untuk pertemuan tersebut
Deadline Pengumpulan
- Deadline: -
- Keterlambatan pengumpulan akan dikenakan pengurangan nilai sebesar 10% per hari
Tugas Praktikum
Aplikasi Manajemen Buku Pribadi
Buatlah aplikasi manajemen buku pribadi yang memungkinkan pengguna mencatat buku-buku yang dimiliki, sedang dibaca, atau ingin dibeli.
Persyaratan Wajib
-
Fitur Dasar:
- Menambah buku baru (judul, penulis, status: milik/baca/beli)
- Mengedit dan menghapus buku
- Filter buku berdasarkan status
- Pencarian buku
-
Teknologi React:
- Gunakan
useStatedanuseEffect - Buat minimal 3 komponen reusable
- Implementasikan Context API untuk state management
- Gunakan React Router untuk navigasi multi-halaman
- Gunakan
-
Penyimpanan: Gunakan localStorage untuk menyimpan data
Persyaratan Teknis
- Gunakan functional components dengan Hooks
- Implementasikan minimal 2 custom hooks
- Buat minimal 5 test unit dengan React Testing Library
- Terapkan error handling untuk form input
- Struktur folder yang modular dan terorganisir
Tips Implementasi
Struktur folder yang disarankan:
src/
├── components/
│ ├── BookForm/
│ ├── BookList/
│ └── BookFilter/
├── pages/
│ ├── Home/
│ └── Stats/
├── hooks/
│ ├── useLocalStorage.js
│ └── useBookStats.js
├── context/
│ └── BookContext.js
└── App.jsKriteria Penilaian
| Aspek | Bobot |
|---|---|
| Fungsi dasar aplikasi | 30% |
| Penerapan konsep React | 25% |
| Struktur kode dan organisasi | 20% |
| Testing dan error handling | 15% |
| Dokumentasi | 10% |
Dokumentasi yang Diperlukan
- README.md berisi:
- Deskripsi aplikasi
- Instruksi instalasi dan menjalankan
- Screenshot antarmuka
- Penjelasan fitur React yang digunakan
- Komentar dalam kode untuk bagian penting
- Laporan testing (screenshots hasil test)