Rujukan Pantas

React + Vibe Coding Reference

Prompt templates, kesilapan biasa, dan checklist deployment untuk React + Vibe Coding.

8
Prompt Templates
10
Mistakes Biasa
15
Checklist Items
Advanced
Tahap

🤖 8 Prompt Templates untuk React + Vibe Coding

Gunakan template-template ini untuk berkomunikasi dengan AI. Isi tempat kosong [dalam kurungan] dengan maklumat spesifik projek anda.

Struktur Prompt yang Berkesan: (1) Beri konteks — apa stack/app anda, (2) Nyatakan APA nak dibina, (3) Spesifik tentang feature/detail, (4) Nyatakan format output yang diingini.

1
📦 Setup React Project dengan Vite dan Tailwind
"Saya nak buat projek React baru dengan Vite dan Tailwind CSS. Setup kan projek untuk saya. Beri arahan langkah demi langkah termasuk command terminal dan konfigurasi yang diperlukan."
Gunakan untuk memulakan projek React baru. Template ini akan memberikan anda arahan lengkap dari npm create hingga konfigurasi Tailwind.
2
🧩 Bina Component dengan Props
"Bina React [jenis component] component. Component ni ada props: [senarai props]. Guna Tailwind CSS untuk styling. Beri kod penuh dalam satu fail .jsx dengan contoh penggunaan."
Template untuk membina apa-apa jenis komponen React. Contoh: Card, Button, Navbar, Modal, Form, Table. Gantikan [jenis component] dan [senarai props].
3
🧭 Bina Page dengan React Router
"Saya nak tambah page [nama page] ke React app saya yang guna React Router. Route path: [path]. Page ni ada: [senarai content/feature]. Guna Tailwind CSS. Beri kod lengkap untuk page component dan tunjuk cara tambah route dalam App.jsx."
Gunakan untuk menambah page baru ke aplikasi React Router sedia ada. Include content specification untuk hasil yang lebih tepat.
4
🗄️ Connect React App ke Supabase
"Saya nak sambung React app saya ke Supabase. Fetch data dari table '[nama table]' dan display dalam component. Guna environment variable untuk URL dan anon key. Ada loading state dan error handling. Guna Tailwind CSS."
Template untuk integrasi Supabase. Gantikan [nama table] dengan nama table yang hendak di-fetch. AI akan generate kod untuk useEffect, useState, dan Supabase query.
5
🔄 Tambah State Management
"Saya nak tambah state management untuk [feature] dalam React app saya. Guna useState/useEffect/useContext. Feature ni: [huraian feature]. Contoh: user klik button, data akan fetch dan display. Tolong beri kod lengkap."
Gunakan apabila anda perlu tambah logik state yang kompleks. Huraikan dengan jelas apa yang perlu berlaku — AI akan pilih hook yang sesuai.
6
📐 Bina Responsive Layout
"Bina responsive layout untuk [jenis page/page]. Layout ada: [senarai sections]. Guna CSS Grid dan Flexbox. Breakpoints: mobile-first, tablet (768px), desktop (1024px). Guna Tailwind CSS. Beri kod lengkap."
Template untuk membina layout page yang responsive. Nyatakan susunan section — AI akan handle grid, flexbox, dan responsive breakpoints untuk anda.
7
🚀 Deploy React App ke Cloudflare Pages
"Saya nak deploy React app (Vite) ke Cloudflare Pages. Apps guna React Router dan Supabase. Beri arahan langkah demi langkah: (1) Build command dan output folder, (2) _redirects file untuk SPA routing, (3) Environment variables untuk Supabase, (4) Konfigurasi di Cloudflare dashboard."
Template lengkap untuk deployment. Ia akan guide anda melalui semua langkah termasuk SPA routing fix yang biasa menyebabkan masalah.
8
🐛 Debug Error React
"Saya dapat error ni dalam React app saya: [paste error message] Code saya: [paste code yang relevan] Apa masalahnya dan bagaimana nak betulkan?"
Template debug paling power. Copy paste error message dan kod yang bermasalah. AI akan analyse, explain apa salah, dan beri solution yang spesifik. Skill ini adalah yang paling penting!

⚠️ 10 Kesilapan Biasa React + AI

Pelajar selalu buat kesilapan yang sama. Kenali dan elakkan mereka:

1. Prompt terlalu umum

"Bina component" — terlalu vague. AI tak tahu apa yang anda nak. Hasilnya component yang generic dan tak guna.

✅ Jadi spesifik: "Bina product card component dengan image, title, price, rating stars, dan add-to-cart button. Guna Tailwind CSS."

2. Tak beri konteks kepada AI

AI tak tahu apa stack, framework, atau setup anda. Ia mungkin suggest cara yang tak compatible dengan projek anda.

✅ Mulakan prompt dengan konteks: "Saya guna React + Vite + Tailwind CSS. Saya nak..."

3. Nak semuanya dalam satu prompt

Minta AI hasilkan entire app dalam satu prompt. Hasilnya terlalu generic dan susah nak debug.

✅ Pecah kepada langkah kecil: (1) Setup projek, (2) Bina component A, (3) Bina component B, (4) Sambungkan. Test setiap langkah sebelum proceed.

4. Guna .js bukan .jsx

React JSX syntax hanya berfungsi dalam fail dengan extension .jsx (atau .tsx untuk TypeScript). Kalau guna .js, React akan confused.

✅ Sentiasa guna extension .jsx untuk fail React component. Contoh: Card.jsx, Button.jsx, bukan Card.js.

5. Lupa restart dev server

Pasang dependency baru (react-router-dom, supabase-js) tapi lupa restart npm run dev. App buat tak tahu dependency baru.

✅ Lepas install dependency baru, STOP server (Ctrl+C) dan start semula (npm run dev). Jangan refresh browser je — kena restart server.

6. Tak baca error console

Bila component tak muncul, pelajar terus panik dan minta AI tulis semula kod. Sebenarnya error dah tertera di browser console (F12).

✅ Buka browser console (F12 > Console). Baca error. Copy error ke AI dengan prompt template #8. Jangan teka-teka apa masalah.

7. Lupa export component

Tulis component cantik-cantik tapi lupa tambah export default. Bila import dalam App.jsx, dapat error "Module not found" atau component undefined.

✅ Pastikan setiap component fail ada export default NamaComponent; di baris terakhir. Check AI-generated code untuk line ni.

8. Tak guna .env untuk API keys

Hardcode Supabase URL dan anon key terus dalam kod. Bila push ke GitHub, keys terbocor. Bila deploy, keys tak sama dengan production.

✅ Guna .env file dengan prefix VITE_. Contoh: VITE_SUPABASE_URL=.... Jangan commit .env ke Git. Set environment variables di platform deployment.

9. Lupa _redirects untuk SPA

Deploy React app dengan React Router. Semua jalan di localhost. Tapi bila deploy, refresh page terus 404. Sebab server cuba cari file /about secara fizikal.

✅ Buat fail public/_redirects dengan content: /* /index.html 200. AI boleh tolong buatkan fail ni. Jangan lupa commit sebelum deploy!

10. Terima kod AI tanpa semak

AI kadang-kadang generate code yang guna syntax lama (React class components) atau pattern yang deprecated. Atau guna library yang tak compatible.

✅ Minta AI guna React Hooks (functional components) dan Tailwind CSS. Kalau nampak class MyComponent extends React.Component, minta AI tulis semula guna functional component dengan hooks.

✅ Build & Deploy Checklist

Gunakan checklist ini setiap kali anda deploy React app ke production. Tick setiap item sebelum deploy.

Sebelum Build

Build

Deploy (Cloudflare Pages)

Selepas Deploy

Pro Tip: Simpan checklist ni sebagai DEPLOY_CHECKLIST.md dalam root projek React anda. Setiap kali nak deploy, buka dan tick satu persatu. Amalan ini akan elakkan 90% masalah deployment!.

⚡ Quick Reference: Perintah Penting

Tujuan Command / Prompt
Setup React + Vite npm create vite@latest . -- --template react
Install Tailwind (Vite) npm install -D tailwindcss @tailwindcss/vite
Install React Router npm install react-router-dom
Install Supabase npm install @supabase/supabase-js
Run dev server npm run dev
Build for production npm run build
SPA redirect file Content public/_redirects: /* /index.html 200
Vite env prefix VITE_NAMA_VARIABLE (wajib VITE_ prefix)

Ingat: Tak perlu hafal command-command ni. Cuma perlu tahu command apa yang wujud. Bila perlu, minta AI ingatkan. Tapi having this reference sheet helps speed things up!