Soal UTS React JS

Komponen Penilaian

Berikut adalah komponen penilaian untuk UTS ini:

• Implementasi Komponen (20%): Struktur, penggunaan props, dan komposisi komponen yang tepat
• Penggunaan Hooks (20%): Implementasi React Hooks yang sesuai dengan kebutuhan aplikasi
• State Management (15%): Pengelolaan state yang efisien dan sesuai dengan kompleksitas aplikasi
• Routing (15%): Implementasi React Router yang benar untuk navigasi antar halaman
• Data Fetching (15%): Pengambilan dan pengelolaan data dari API eksternal
• Desain UI dan UX (10%): Tampilan yang responsif dan user-friendly
• Kode yang Bersih dan Terorganisir (5%): Struktur folder, penamaan, dan format kode
• BONUS (10%): Berhasil melakukan deploy di Vercel

Deskripsi Tugas

Pada UTS ini, Anda akan mengembangkan aplikasi React yang menerapkan berbagai konsep fundamental React seperti komponen, props, state, lifecycle, hooks, routing, dan state management. Fokus utama adalah implementasi fetching data dari API di sisi klien.

Detail Penugasan

1. Komponen, Props, dan State

Implementasikan berbagai jenis komponen dengan manajemen props dan state yang sesuai:

• Minimal 5 komponen fungsional yang berbeda
• Penggunaan props untuk komunikasi antar komponen
• Implementasi prop validation dengan PropTypes
• Pembuatan komponen yang memiliki state lokal

Komponen fungsional adalah standar modern dalam pengembangan React dan memungkinkan penggunaan hooks. Penggunaan props memungkinkan aliran data yang jelas antar komponen, sedangkan PropTypes membantu dokumentasi dan validasi yang lebih baik.

import React from 'react';
import PropTypes from 'prop-types';

const ProductCard = ({ product, onAddToCart }) => {
  return (
    <div className="border p-4 rounded-lg shadow-sm">
      <h3 className="font-bold text-lg">{product.name}</h3>
      <p className="text-gray-600">{product.description}</p>
      <div className="mt-4 flex justify-between items-center">
        <span className="font-semibold">${product.price}</span>
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded"
          onClick={() => onAddToCart(product)}
        >
          Add to Cart
        </button>
      </div>
    </div>
  );
};

ProductCard.propTypes = {
  product: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    description: PropTypes.string,
    price: PropTypes.number.isRequired
  }).isRequired,
  onAddToCart: PropTypes.func.isRequired
};

export default ProductCard;

2. React Lifecycle dan Hooks

Implementasikan berbagai hooks React untuk mengelola lifecycle dan state:

• useState untuk state management dalam komponen
• useEffect untuk side effects dan simulasi lifecycle methods
• useRef untuk referensi DOM dan nilai yang persisten
• useCallback untuk memoize functions
• useMemo untuk memoize nilai-nilai yang membutuhkan komputasi tinggi
• Minimal 1 custom hook yang Anda buat sendiri

Hooks menyederhanakan logika React dan memungkinkan penggunaan state dan fitur React lainnya tanpa menulis kelas. Hooks juga meningkatkan reusabilitas kode dan membuatnya lebih mudah ditest.

import { useState, useEffect } from 'react';

// Custom hook untuk fetching data
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url, { signal });
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
          setData(null);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();

    // Cleanup function
    return () => {
      controller.abort();
    };
  }, [url]); // Re-run effect if URL changes

  return { data, loading, error };
}

export default useFetch;

3. Pengambilan Data (Data Fetching)

Implementasikan pengambilan data dari API eksternal:

• Gunakan fetch API atau Axios untuk mengambil data
• Implementasi loading states saat data sedang diambil
• Penanganan error yang baik
• Integrasi data yang diambil dengan state aplikasi

Hampir semua aplikasi modern perlu berkomunikasi dengan API. Pengambilan data yang efisien dan penanganan error yang baik sangat penting untuk pengalaman pengguna yang optimal.

4. React Router

Implementasikan navigasi dan routing dalam aplikasi:

• Minimal 3 halaman/rute berbeda
• Implementasi dynamic routing dengan parameter
• Penggunaan nested routes (jika sesuai)
• Navigasi programatis menggunakan hooks dari React Router
• Implementasi error page untuk rute yang tidak ditemukan

React Router memungkinkan navigasi yang mulus tanpa refresh halaman, yang merupakan salah satu keunggulan utama Single Page Applications (SPA).

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Navbar from './components/Navbar';
import HomePage from './pages/HomePage';
import ProductListPage from './pages/ProductListPage';
import ProductDetailPage from './pages/ProductDetailPage';
import CartPage from './pages/CartPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <main className="container mx-auto px-4 py-6">
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/products" element={<ProductListPage />} />
          <Route path="/products/:productId" element={<ProductDetailPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/404" element={<NotFoundPage />} />
          <Route path="*" element={<Navigate to="/404" replace />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;

5. State Management

Implementasikan state management sesuai dengan kebutuhan, disertai dengan alasan. Pilihlah di antara pilihan berikut:

Rekomendasi API dan Tips Penggunaan

Berikut adalah rekomendasi API gratis yang dapat digunakan untuk pengembangan aplikasi React, baik untuk Task Management System maupun E-Commerce Product Catalog.

1. Fake Store API

API ini ideal untuk aplikasi e-commerce dengan data produk lengkap.

• URL: https://fakestoreapi.com/
• Mendapatkan semua produk: GET https://fakestoreapi.com/products
• Mendapatkan produk berdasarkan ID: GET https://fakestoreapi.com/products/1
• Filter berdasarkan kategori: GET https://fakestoreapi.com/products/category/electronics

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fungsi untuk fetch data
    async function fetchProducts() {
      try {
        const response = await fetch('https://fakestoreapi.com/products');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setProducts(data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    }

    fetchProducts();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {products.map(product => (
        <div key={product.id} className="border p-4 rounded-lg">
          <img src={product.image} alt={product.title} className="h-40 mx-auto" />
          <h3 className="font-bold mt-2">{product.title}</h3>
          <p className="text-green-600 font-bold">${product.price}</p>
          <p>{product.category}</p>
          <button className="bg-blue-500 text-white px-4 py-2 rounded mt-2">
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

2. JSON Placeholder

API sederhana yang cocok untuk task management dengan operasi dasar.

• URL: https://jsonplaceholder.typicode.com/
• Mendapatkan semua tugas: GET https://jsonplaceholder.typicode.com/todos
• Mendapatkan tugas berdasarkan ID: GET https://jsonplaceholder.typicode.com/todos/1
• Filter berdasarkan user: GET https://jsonplaceholder.typicode.com/todos?userId=1

3. DummyJSON

API dengan data dummy yang kaya dan mendukung banyak endpoint.

• URL: https://dummyjson.com/
• Produk: GET https://dummyjson.com/products
• Keranjang: GET https://dummyjson.com/carts
• Pencarian produk: GET https://dummyjson.com/products/search?q=phone
• Filter berdasarkan kategori: GET https://dummyjson.com/products/category/smartphones

4. MockAPI.io

Platform untuk membuat dan mengelola API palsu kustom.

• URL: https://mockapi.io/
• Memungkinkan pembuatan struktur data sendiri
• Mendukung semua operasi CRUD
• Data disimpan secara persisten

5. JSON Server (Local Development)

Tool untuk membuat REST API lokal menggunakan file JSON.

• Instalasi: npm install -g json-server
• Buat file db.json dengan data Anda
• Jalankan: json-server --watch db.json --port 3001

{
  "tasks": [
    { "id": 1, "title": "Learn React", "completed": false },
    { "id": 2, "title": "Build Task App", "completed": false }
  ],
  "products": [
    { "id": 1, "title": "Smartphone", "price": 499, "category": "electronics" },
    { "id": 2, "title": "Laptop", "price": 999, "category": "electronics" }
  ]
}

Tips Umum Penggunaan API

• Gunakan Custom Hook: Buat hook seperti useFetch untuk mengelola pemanggilan API dan status loading/error
• Implementasikan Caching: Gunakan state management untuk menyimpan respons API, mengurangi permintaan berulang
• Error Handling: Selalu tangani kemungkinan error dan tampilkan pesan yang sesuai kepada pengguna
• Loading States: Tampilkan spinner atau skeleton loader saat menunggu respons API
• Debouncing: Untuk fitur pencarian, terapkan debouncing untuk mengurangi permintaan API

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();

    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url, { signal: abortController.signal });

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const result = await response.json();
        setData(result);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();

    return () => {
      abortController.abort();
    };
  }, [url]);

  return { data, loading, error };
}

// Penggunaan:
// const { data: products, loading, error } = useFetch('https://fakestoreapi.com/products');

Prasyarat

Sebelum mengerjakan UTS ini, pastikan Anda telah memahami dan menguasai:

• Dasar JavaScript Modern: Arrow functions, destructuring, spread operator, dan konsep ES6 lainnya
• Fundamental React: JSX, komponen, props, dan state
• Node.js dan npm/yarn: Instalasi dan penggunaan package manager
• Git: Dasar-dasar version control untuk mengumpulkan tugas

Alat dan Bahan

Untuk mengikuti praktikum ini, Kalian memerlukan:

• Browser Web: Chrome, Firefox, atau Edge
• Code Editor: Visual Studio Code dengan ekstensi ES7+ React/Redux/React-Native snippets
• Node.js dan npm: Versi terbaru untuk mengelola paket
• Git: Untuk version control dan pengumpulan tugas
• React Developer Tools: Ekstensi browser untuk debugging

Paket dan Library yang Dibutuhkan

• React: Library utama
• React Router: Untuk navigasi antar halaman
• Axios: Untuk mengambil data dari API (opsional: bisa menggunakan fetch API)
• Styling: CSS, Tailwind CSS, atau library styling lainnya

Format Pengumpulan

Direktori GitHub

• Buat repository dengan format: uts_pemrograman_web_[NIM]
• Contoh: uts_pemrograman_web_119140001

Struktur Folder

• Setiap folder berisi folder aplikasi react

Deadline Pengumpulan

• Deadline: Minggu, 23 Maret 2025, pukul 23:59 WIB
• Keterlambatan pengumpulan akan dikenakan pengurangan nilai sebesar 10% per hari

Untuk panduan deploy aplikasi ke Vercel, silakan lihat Tutorial Hosting React di Vercel.