Latihan Amali

Latihan React + Vibe Coding

Lima latihan praktikal untuk menguasai React melalui Vibe Coding. Klik setiap latihan untuk melihat langkah terperinci.

5
Latihan
7
Langkah Modul
60-90
Minit
Advanced
Tahap
1
Setup React Project dengan AI Mudah
⏱ 15-20 minit ⚛️ Vite + React 🤖 AI Prompt
▼

🎯 Objektif

Objektif: Setup projek React dari kosong menggunakan AI. Pelajar akan belajar bahawa mereka tak perlu hafal command setup — cukup dengan prompt yang betul.

📋 Prasyarat

  • Node.js sudah diinstal (check dengan node --version)
  • VS Code atau editor teks lain
  • Akses ke AI (ChatGPT, Claude, Copilot, Gemini)

🔧 Langkah-langkah

  1. Buka AI (ChatGPT/Claude/Copilot) dan taip prompt:
    "Saya nak buat projek React baru dengan Vite dan Tailwind CSS. Beri saya arahan langkah demi langkah untuk setup."
  2. AI akan berikan command. Jalankan satu persatu dalam terminal:
    npm create vite@latest react-latihan-1 -- --template react cd react-latihan-1 npm install npm install -D tailwindcss @tailwindcss/vite npm run dev
  3. Buka http://localhost:5173 dalam browser
  4. Konfigurasi Tailwind: minta AI tunjuk cara setup Tailwind dengan Vite
  5. Pastikan ada tulisan React + Tailwind dalam browser

📸 Bukti Screenshot

📸

Screenshot React app yang berjaya di-run

Ambil screenshot yang menunjukkan React app berjalan di localhost:5173 dengan Tailwind CSS berfungsi. Bukti bahawa setup berjaya.

✅ Checklist

2
Bina 3 Components (Card, Button, Navbar) Mudah
⏱ 20-30 minit 🧩 React Components 🎨 Tailwind CSS
▼

🎯 Objektif

Objektif: Bina tiga React components asas menggunakan prompt AI. Pelajar akan belajar cara meminta AI menghasilkan komponen yang boleh diguna semula.

📋 Prasyarat

  • Projek React dari Latihan 1 sudah siap dan berfungsi

🔧 Langkah-langkah

Card Component

  1. Buka AI dan taip prompt:
    "Bina React Card component. Ada props: image, title, description, dan bgColor. Guna Tailwind CSS untuk styling. Beri kod penuh."
  2. Buat fail baru src/Card.jsx dan paste kod dari AI
  3. Uji dengan mengimport Card dalam App.jsx

Button Component

  1. Taip prompt:
    "Bina React Button component dengan tiga variants: primary (biru), secondary (kelabu), danger (merah). Props: variant, children, onClick, disabled. Guna Tailwind CSS."
  2. Buat fail src/Button.jsx dan paste kod

Navbar Component

  1. Taip prompt:
    "Bina React Navbar component yang responsive. Logo di kiri, navigation links di kanan. Bila skrin kecil (<768px), links jadi hamburger menu. Guna Tailwind CSS."
  2. Buat fail src/Navbar.jsx dan paste kod

Tip: Cuba minta AI tambah variasi. Contoh: "Tambah props size (sm, md, lg) untuk Button component." Lihat betapa mudahnya nak enhance component dengan AI.

📸 Bukti Screenshot

📸

Screenshot ketiga-tiga components dalam browser

Ambil screenshot yang menunjukkan Navbar di atas, Card di tengah, dan beberapa Button dengan variant berbeza. Juga screenshot struktur folder src yang mengandungi Card.jsx, Button.jsx, Navbar.jsx.

✅ Checklist

3
Bina Page dengan Routing (React Router) Sederhana
⏱ 20-30 minit 🧭 React Router 📄 Multiple Pages
▼

🎯 Objektif

Objektif: Setup React Router dan bina aplikasi dengan 2 routes minimum (Home dan About). Pelajar akan belajar SPA routing menggunakan AI.

📋 Prasyarat

  • Projek React dari Latihan 1 dengan components dari Latihan 2

🔧 Langkah-langkah

  1. Buka AI dan taip prompt:
    "Saya nak tambah React Router v6 ke projek React saya. Ajar saya cara install dan setup routing untuk 2 pages: Home (/) dan About (/about). Saya guna Tailwind CSS."
  2. Install React Router:
    npm install react-router-dom
  3. Update main.jsx: bungkus App dalam BrowserRouter
  4. Bina HomePage component guna prompt:
    "Bina HomePage component untuk React. Ada hero section dengan tajuk besar, paragraph penerangan, dan CTA button. Guna Tailwind CSS."
  5. Bina AboutPage component guna prompt:
    "Bina AboutPage component. Ada profile section, skills section (bar progress), dan contact info. Guna Tailwind CSS."
  6. Setup Routes dalam App.jsx dan update Navbar guna Link component
  7. Uji: klik Home > About > Home — page bertukar tanpa reload

Cabaran tambahan: Cuba tambah 404 Not Found page. Prompt: "Tambah 404 page untuk route yang tak wujud dalam React Router app saya."

📸 Bukti Screenshot

📸

Screenshot Home Page dan About Page

Ambil screenshot Home page (/) dan About page (/about) — pastikan URL di address bar berbeza. Juga screenshot struktur routes dalam App.jsx.

✅ Checklist

4
Connect ke Supabase — Fetch & Display Data Mencabar
⏱ 25-35 minit 🗄️ Supabase 📊 Data Fetching
▼

🎯 Objektif

Objektif: Sambungkan React app ke Supabase database, fetch data, dan paparkan dalam komponen. Pelajar akan belajar cara integrate backend dengan React melalui AI.

📋 Prasyarat

  • Projek React dari Latihan 1 (atau 3 dengan routing)
  • Akaun Supabase (daftar percuma di supabase.com)

🔧 Langkah-langkah

  1. Buka supabase.com, buat projek baru, dan dapatkan URL + anon key dari Settings > API
  2. Buat table "products" di Supabase (id, name, price, category, image_url) — guna SQL Editor atau Table Editor
  3. Masukkan 4-5 sample data ke table products
  4. Tanya AI untuk setup Supabase client:
    "Saya nak sambung React app ke Supabase. Ajar saya cara install @supabase/supabase-js, buat supabase client, dan fetch data dari table 'products'. Guna environment variable (.env) untuk URL dan anon key."
  5. Install package:
    npm install @supabase/supabase-js
  6. Buat fail .env dalam root projek:
    VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key-here
  7. Minta AI bina component untuk display data:
    "Bina React component 'ProductList' yang fetch data dari table 'products' di Supabase. Display dalam grid cards: image, name, price, category. Guna Tailwind CSS. Ada loading spinner dan error handling."

Peringatan: Environment variable di Vite mesti bermula dengan VITE_. Contoh: VITE_SUPABASE_URL. Kalau tak, variable tak akan di-expose ke frontend.

📸 Bukti Screenshot

📸

Screenshot data dari Supabase yang dipaparkan dalam React

Ambil screenshot yang menunjukkan data dari Supabase (nama produk, harga, dll.) dipaparkan dalam grid cards. Juga screenshot Supabase dashboard yang menunjukkan table products dengan data.

✅ Checklist

5
Deploy React App ke Cloudflare Pages Sederhana
⏱ 15-20 minit 🚀 Cloudflare Pages ⚛️ React Build
▼

🎯 Objektif

Objektif: Build React app untuk production dan deploy ke Cloudflare Pages. Pelajar akan belajar cara deploy SPA React dengan betul, termasuk menangani isu routing pada production.

📋 Prasyarat

  • Projek React yang lengkap (dari Latihan 1-4)
  • Akaun GitHub dengan repository untuk projek React
  • Akaun Cloudflare (daftar di dash.cloudflare.com)

🔧 Langkah-langkah

  1. Minta AI tunjuk cara build React app:
    "Saya nak build React app saya untuk production dan deploy ke Cloudflare Pages. Build command apa? Output folder apa? Apa perlu saya setup untuk SPA routing?"
  2. Push projek ke GitHub:
    git init git add . git commit -m "React app siap deploy" git remote add origin https://github.com/username/react-app.git git push -u origin main
  3. Buka dash.cloudflare.com > Workers & Pages > Create application > Pages > Connect to Git
  4. Pilih repository React app
  5. Set build configuration:
    Project name: react-app-[nama anda] Production branch: main Build command: npm run build Build output directory: dist Root directory: (kosongkan)
  6. Tambahkan Environment Variables di Cloudflare (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY)
  7. Untuk SPA routing: buat fail public/_redirects:
    /* /index.html 200
  8. Klik Save and Deploy. Tunggu build selesai.
  9. Uji semua routes — pastikan refresh page tak jadi 404

Tip: Jangan lupa tambah _redirects file sebelum deploy. Tanpa fail ni, React Router akan return 404 bila user refresh page di /about atau /contact. Ini adalah mistake paling biasa!

📸 Bukti Screenshot

📸

Screenshot React app yang live di Cloudflare Pages

Ambil screenshot yang menunjukkan URL Cloudflare Pages (contoh: react-app-nama.pages.dev) di address bar dengan React app berfungsi sepenuhnya. Juga screenshot dashboard Cloudflare yang menunjukkan deployment successful.

✅ Checklist

🏁 Rumusan Latihan

Tahniah! Selepas menyelesaikan kelima-lima latihan ini, anda akan:

  • Mampu setup React project dari kosong menggunakan AI
  • Boleh bina komponen React (Card, Button, Navbar) dengan prompt yang betul
  • Faham React Router — multiple pages tanpa reload
  • Mampu sambung React ke Supabase — fetch data live dari database
  • Boleh build dan deploy React app ke Cloudflare Pages

Langkah seterusnya: Cuba bina projek React sendiri — gunakan prompt templates dari halaman Rujukan!