Fasa 11 — Panduan Pengajar

React + Vibe Coding

Panduan lengkap untuk pengajar mengendalikan sesi React — tanpa mengajar React syntax. Ajar pelajar cara menggunakan AI untuk membina aplikasi React.

3-4
Jam Sesi
2
Demo Langsung
7
Langkah Pelajar
Advanced
Tahap Pelajar

📋 Ringkasan Sesi

Modul ini adalah pengenalan kepada React melalui Vibe Coding. Pelajar tidak perlu belajar React syntax. Sebaliknya, mereka akan belajar cara menyuruh AI membina komponen React, mengurus state, dan menyambungkan app ke database.

Falsafah modul ini: "React adalah library JavaScript paling popular. Dengan Vibe Coding, anda tak perlu hafal syntax — anda cuma perlu tahu nak suruh AI bina APA."

Objektif Pembelajaran

  • Memahami konsep React (components, props, state, hooks) melalui penerangan AI
  • Mampu menulis prompt yang efektif untuk menghasilkan kod React
  • Dapat setup projek Vite + React menggunakan AI
  • Mampu membina komponen React (Card, Button, Navbar, Dashboard) melalui AI
  • Memahami React Router dan cara sambung ke Supabase
  • Dapat build dan deploy React app ke Cloudflare Pages

Prasyarat Pelajar

  • Telah menyiapkan modul HTML/CSS/JavaScript asas (Fasa 1-3)
  • Faham konsep asas web (HTML, CSS, JavaScript)
  • Mempunyai Node.js dan npm/npx diinstal
  • Mempunyai akaun GitHub dan pengalaman Git asas

Falsafah Utama: Pelajar TIDAK perlu mahir JavaScript atau React. Mereka hanya perlu tahu APA yang mereka nak bina, dan AI akan uruskan HOW. Tugas pengajar adalah untuk mengajar mereka cara berkomunikasi dengan AI dengan berkesan.

🔄 Aliran Sesi (3-4 Jam)

1 Falsafah (15 min) 2 AI Terangkan React (20 min) 3 Demo 1: Setup (25 min) 4 Demo 2: Dashboard (30 min) 5 Latihan (60-90 min) 6 Rumusan (10 min)

Langkah 1: Falsafah "React Tanpa Belajar React" (15 minit)

Terangkan pendekatan modul ini. Gunakan analogi mudah:

Analogi: React macam bahasa asing. Biasanya kena ambil kursus berbulan-bulan untuk fasih. Tapi dengan AI, anda ada "penterjemah peribadi" — anda cuma perlu tahu nak cakap APA, bukan CARA nak sebut. AI akan tulis kod React untuk anda. Anda cuma perlu faham apa yang AI hasilkan dan tweak sikit-sikit.

  • React adalah library: Bukan bahasa baru — cuma JavaScript dengan cara tersusun
  • Vibe Coding = Prompt Engineering: Skill utama adalah menulis prompt yang jelas
  • AI sebagai rakan coding: Bukan gantikan learning, tapi percepatkan proses
  • Fokus pada "apa": Pelajar fokus pada APA nak bina, AI handle HOW

Langkah 2: Minta AI Terangkan Konsep React (20 minit)

Tunjukkan cara minta AI menerangkan konsep React dalam Bahasa Melayu yang mudah. Demo langsung:

"Terangkan apa itu React components, props, dan state dalam Bahasa Melayu yang sangat mudah. Guna analogi yang boleh faham orang baru belajar coding. Beri contoh kod ringkas untuk setiap satu."

Bincang hasilnya dengan pelajar. Tanya mereka: "Apa yang anda faham dari penerangan AI tadi?" Ini membina keyakinan mereka.

Langkah 3: Demo 1 — "Dari Zero ke React App dalam 10 Minit" (25 minit)

Demo langsung yang paling penting. Tunjukkan pelajar cara setup projek React dari kosong menggunakan AI.

Rujuk Modul Pelajar Langkah 1-3 untuk skrip penuh.

Langkah 4: Demo 2 — "Bina Dashboard Component" (30 minit)

Demo lanjutan — bina dashboard card dengan props, state, dan styling. Tunjukkan AI boleh buat komponen kompleks.

Rujuk Modul Pelajar Langkah 4 untuk skrip penuh.

Langkah 5: Latihan Amali (60-90 minit)

Pelajar menjalankan 5 latihan secara individu atau berpasangan:

  1. Setup React project dengan AI
  2. Bina 3 components (Card, Button, Navbar)
  3. Bina page dengan routing (2 routes)
  4. Connect ke Supabase — fetch & display data
  5. Deploy React app ke Cloudflare Pages

Langkah 6: Rumusan & Q&A (10 minit)

  • Review apa yang dipelajari
  • Tunjukkan 8 prompt templates
  • Galakkan pelajar guna template untuk projek sendiri

🎬 Demo 1: Dari Zero ke React App dalam 10 Minit

⏱ 10-15 minit

Setup Vite + React Melalui AI

Demo ini menunjukkan bahawa setup projek React yang kompleks boleh dilakukan dengan hanya bertanya AI. Pelajar akan nampak bahawa mereka tak perlu hafal command — cuma perlu tahu nak tanya apa.

Prompt 1: Setup Projek

"Saya nak buat projek React baru dengan Vite. Beri saya arahan langkah demi langkah untuk setup dari mula. Saya guna Windows."

AI akan beri arahan seperti:

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

Prompt 2: Install Tailwind CSS

"Tambah Tailwind CSS ke projek React + Vite saya. Beri arahan penuh."

Prompt 3: Bina Component Pertama

"Bina satu komponen React untuk navbar yang responsive. Ada logo di kiri, menu links (Home, About, Contact) di kanan. Guna Tailwind CSS untuk styling. Beri kod penuh dalam satu fail."

Tip Pengajar: Semasa demo, minta pelajar perhatikan bagaimana anda menulis prompt — bukan kod React yang dihasilkan. Tunjukkan struktur prompt yang baik: (1) Konteks, (2) Apa nak dibina, (3) Detail spesifik, (4) Format output.

🎬 Demo 2: Bina Dashboard Component

⏱ 15-20 minit

Dashboard Card dengan Props, State, dan Styling

Demo ini menunjukkan kuasa React sebenar — komponen dynamic yang boleh display data berbeza berdasarkan props dan state.

Prompt 1: Dashboard Card Component

"Bina React component untuk dashboard card. Card ada: icon, title, value, percentage change, dan background colour. Semua data datang melalui props. Guna Tailwind CSS. Beri kod penuh dengan contoh penggunaan."

Prompt 2: Tambah State

"Tambah useState hook untuk toggle antara 'view details' dan 'hide details' dalam dashboard component tu. Bila click button, detail info akan muncul atau hilang."

Prompt 3: Dashboard Grid

"Bina DashboardPage component yang guna dashboard card component tadi. Display 4 cards dalam grid layout (2x2). Guna data statik sebagai props untuk setiap card. Guna Tailwind CSS grid."

Key Takeaway: Dalam masa 3 prompt sahaja (5 minit menaip), AI boleh hasilkan satu halaman dashboard yang functional dengan props, state, dan responsive grid. Bandingkan dengan menulis manually yang ambil masa berjam-jam. Inilah kuasa Vibe Coding + React.

🎯 Key Teaching Points

🤖
AI sebagai guru React: Biar AI yang terangkan konsep React kepada pelajar. Minta AI guna analogi mudah. Pelajar belajar secara semula jadi — bukan melalui lectures yang membosankan.
💡
Prompt > Syntax: Skill paling penting dalam modul ini adalah menulis prompt yang jelas. Bukan menghafal syntax React. Tekankan struktur prompt: konteks + keperluan + detail + format output.
🔄
Iterative building: Ajar pelajar untuk mula dengan prompt mudah, kemudian tambah detail secara berperingkat. Jangan minta AI hasilkan semuanya sekali gus. Build incremental, test selalu.
🔧
Debug dengan AI: Bila error berlaku (dan pasti akan berlaku), ajar pelajar untuk copy-paste error ke AI dan minta bantuan. Skill debug dengan AI adalah skill seumur hidup.

🎓 Panduan Fasilitasi

Cara Mengendalikan Kelas

  • Demo dahulu, baru praktik: Tunjukkan demo penuh (2 demo), baru lepaskan pelajar buat latihan sendiri
  • Pair programming: Suruh pelajar berpasangan — satu pegang keyboard, satu baca prompt. Tukar peranan setiap 15 minit
  • Jangan takut error: React apps selalu ada error. Tunjukkan cara copy-paste error ke AI dan minta bantuan. Ini skill penting!
  • Tekankan structure prompt: Banyak pelajar gagal sebab prompt tak jelas. Ajar mereka: "Konteks + Apa nak buat + Detail + Format"
  • Celebrate wins: Bila pelajar berjaya display komponen React pertama, minta mereka screenshot dan share

Strategi Mengatasi Pelajar Pelbagai Tahap

Tahap Pelajar Cabaran Pendekatan
Tak pernah guna terminal Npm command, Vite setup Beri arahan langkah demi langkah. Suruh mereka copy-paste command terus
JavaScript basic sahaja Takut dengan JSX Jelaskan JSX = "HTML dalam JavaScript". AI akan handle semua JSX
Dah pernah guna framework lain Nak faham React betul-betul Galakkan mereka explore AI-generated code. Tanya AI "kenapa guna cara ni?"
Pelajar cepat Mudah bosan Beri cabaran tambahan: tambah animation, guna API betul, buat dark mode toggle

Critical Reminder: Modul ini adalah tentang menggunakan AI, bukan tentang React. Jika pelajar boleh hasilkan React app functional tanpa belajar React syntax, itu adalah kejayaan. React hanyalah "medium" — AI adalah "tools".

🧭 Journey Pelajar: React Tanpa Belajar React

Setiap pelajar akan melalui journey ini sepanjang sesi. Gunakan ini untuk tracking progress:

1️⃣

Setup Vite + React

Guna prompt AI untuk setup projek. Tak perlu hafal command — AI akan beri arahan langkah demi langkah.

✅ Checkpoint: npm run dev berjaya
2️⃣

AI Terangkan Components

Minta AI explain apa itu React components dengan analogi. Faham konsep tanpa baca dokumentasi tebal.

✅ Checkpoint: Pelajar boleh explain components guna ayat sendiri
3️⃣

Bina Component Pertama

Guna prompt untuk hasilkan Card, Button, Navbar. Copy-paste kod ke App.jsx. Lihat hasil di browser.

✅ Checkpoint: Ada 3 komponen functional di browser
4️⃣

Props & State

Minta AI explain props vs state. Kemudian suruh AI tambah props dan state ke komponen sedia ada.

✅ Checkpoint: Komponen display data berbeza melalui props
5️⃣

Routing dengan React Router

Install React Router dan setup 2-3 pages. Navigation antara pages tanpa reload.

✅ Checkpoint: Boleh navigate antara Home, About, Contact
6️⃣

Connect ke Supabase

Sambung React app ke Supabase database. Fetch data dan display dalam komponen.

✅ Checkpoint: Data dari Supabase muncul di browser
7️⃣

Build & Deploy

Build React app untuk production dan deploy ke Cloudflare Pages.

✅ Checkpoint: URL live boleh dikongsi

⚠️ Kesilapan Biasa Pelajar & Penyelesaian

1. "npm command tak jumpa"

Masalah: Node.js tak diinstal, atau terminal tak guna folder projek yang betul.

✅ Penyelesaian: Check Node.js dengan node --version. Install dari nodejs.org. Pastikan terminal di folder projek (cd ke folder betul).

2. "JSX syntax error"

Masalah: AI generate kod JSX tapi pelajar paste dalam fail .js (bukan .jsx). React tak recognise JSX dalam .js.

✅ Penyelesaian: Pastikan fail bernama .jsx (contoh: App.jsx, Card.jsx). Kalau guna .js biasa, React/Vite mungkin tak process JSX. Ajar pelajar guna .jsx extension.

3. "Component tak nampak"

Masalah: Pelajar lupa import component dalam App.jsx. Atau salah path import.

✅ Penyelesaian: Check import statement. Pastikan nama fail dan path betul. Guna auto-import dari VS Code — start taip nama component, VS Code akan suggest import. Ajar pelajar untuk perhatikan error di console.

4. "Tailwind tak jalan"

Masalah: Tailwind CSS tak dikonfigurasi dengan betul. Atau lupa tambah directives dalam CSS file.

✅ Penyelesaian: Pastikan tailwind.config.js wujud dan index.css ada tiga baris: @tailwind base; @tailwind components; @tailwind utilities;. Kalau tak sure, minta AI setupkan semula.

5. "React Router blank page"

Masalah: Lupa bungkus app dalam BrowserRouter, atau route path tak konsisten.

✅ Penyelesaian: Check main.jsx — pastikan ada <BrowserRouter>. Check route paths — guna / untuk home, /about untuk about page. Copy error ke AI minta bantuan.

6. "Data dari Supabase tak muncul"

Masalah: CORS policy block, atau API key salah, atau query tak betul.

✅ Penyelesaian: Check console untuk error. Pastikan Supabase URL dan anon key betul (dari dashboard Supabase). Check CORS settings di Supabase dashboard. Guna AI untuk debug: paste error dan minta bantuan.

7. "Build failed — module not found"

Masalah: Ada dependency yang tak di-install atau version conflict.

✅ Penyelesaian: Check package.json — pastikan semua dependency ada. Jalankan npm install. Kalau still error, delete node_modules dan package-lock.json, then npm install semula. Copy error ke AI.

8. "Deploy blank page"

Masalah: Build output directory salah, atau base path tak set untuk routing.

✅ Penyelesaian: Untuk React Router di Cloudflare Pages, set base: "/" dalam vite.config.js. Untuk subfolder, guna base: "/repo-name/". Build output directory = dist. Juga perlu tambah _redirects file untuk SPA routing.