Modul Pelajar — React Module

⚛️ React Tanpa Belajar React

React adalah library JavaScript paling popular di dunia. Dengan Vibe Coding, anda tak perlu hafal syntax React — anda cuma perlu tahu nak suruh AI bina APA. AI akan handle semua kod React, JSX, hooks, dan state management. Anda fokus pada reka bentuk dan logik applikasi.

📦 Langkah 1: Setup Vite + React Melalui AI

Kita akan mulakan dengan setup projek React. Tapi kita tak akan hafal command setup — kita akan minta AI bantu.

Prasyarat: Pastikan Node.js sudah diinstal. Buka terminal/cmd dan taip node --version untuk sahkan. Jika tiada, muat turun dari nodejs.org.

Minta AI Setupkan Projek

Buka AI (ChatGPT, Claude, Copilot, atau mana-mana AI) dan taip prompt ini:

"Saya nak buat projek React baru dengan Vite. Beri saya arahan langkah demi langkah untuk setup dari mula. Saya guna Windows. Lepas setup, ajar saya cara nak install Tailwind CSS sekali."

AI akan beri arahan macam ni:

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

Jalankan command yang AI beri satu persatu. Lepas tu buka http://localhost:5173 dalam browser.

Tip: Kalau ada masalah, jangan panik. Copy error tu dan paste balik ke AI dengan prompt: "Saya dapat error ni: [paste error]. Tolong betulkan."

✅ Checkpoint: npm run dev berjaya dan React template kelihatan di browser

🧩 Langkah 2: Faham Components (AI Explain — Bukan Anda Belajar)

Anda tak perlu baca dokumentasi React. Biar AI yang terangkan. Guna prompt ni:

"Terangkan apa itu React Components dalam Bahasa Melayu yang sangat mudah. Guna analogi yang boleh faham orang baru belajar coding. Beri contoh kod ringkas."

AI mungkin akan terangkan macam ni:

🧱

Components = Bongkah LEGO

React components macam bongkah LEGO. Setiap bongkah (component) adalah satu bahagian kecil yang boleh diguna semula. Button component boleh guna berkali-kali di banyak tempat. Navbar component adalah satu bongkah besar yang terdiri dari bongkah-bongkah kecil (Logo, MenuItem, Button).

Falsafah: Anda tak perlu hafal cara tulis component. Cuma perlu faham KONSEP — bahawa React apps dibina dari komponen-komponen kecil yang disusun bersama. Bila faham konsep, anda boleh suruh AI bina komponen yang anda perlukan.

🎯 Langkah 3: Bina Component Pertama

Sekarang kita akan bina tiga komponen asas: Card, Button, dan Navbar. Salin kod yang AI hasilkan ke dalam projek React anda.

Prompt untuk Card Component

"Bina satu React component untuk kad (Card) yang ada: image di atas, title, description, dan button di bawah. Guna Tailwind CSS untuk styling. Beri kod penuh dalam satu fail javascript."

Buka VS Code, pergi ke folder src, dan buat fail baru Card.jsx. Paste kod yang AI bagi.

Prompt untuk Button Component

"Bina React Button component dengan variants: primary (biru), secondary (kelabu), dan danger (merah). Setiap variant ada warna berbeza. Guna Tailwind CSS. Props: variant, children, onClick."

Buat fail Button.jsx dan paste kod.

Prompt untuk Navbar Component

"Bina React Navbar component yang responsive. Logo di kiri, menu links (Home, About, Contact) di kanan. Bila skrin kecil, menu jadi hamburger. Guna Tailwind CSS."

Buat fail Navbar.jsx dan paste kod.

Gabungkan dalam App.jsx

Sekarang, buka App.jsx dan gantikan content dengan kod yang guna ketiga-tiga komponen:

"Guna Navbar, Card, dan Button component dalam App.jsx. Susun Navbar di atas, 3 cards dalam grid (3 lajur), dan setiap card ada Button di bawah. Guna Tailwind CSS."

✅ Checkpoint: 3 komponen functional — Navbar, Card, Button — kelihatan di browser

🔄 Langkah 4: Props & State — AI Explain, AI Build

Props dan State adalah dua konsep paling penting dalam React. Tapi jangan risau — AI akan terangkan dan AI akan tulis kod untuk anda.

Minta AI Terangkan Props & State

"Terangkan perbezaan antara props dan state dalam React. Guna analogi mudah. Props macam apa? State macam apa? Beri contoh kod untuk setiap satu."

AI akan terangkan secara ringkas: Props = parameter yang dihantar ke component (macam attributes HTML). State = data yang berubah dalam component (macam variable yang dynamic).

Minta AI Tambah Props ke Component

"Tambah props ke Card component saya. Card boleh terima props: title (string), description (string), imageUrl (string), dan bgColor (string). Tunjukkan cara guna dengan contoh."

Minta AI Tambah State (useState)

"Tambah useState hook ke Card component. Bila user klik "Read More" button, description akan expand/collapse (toggle). Guna state boolean."

Ingat: Anda tak perlu tahu syntax useState. Cuma perlu tahu KONSEP — "saya nak ada state yang berubah bila user klik". AI akan tulis semua kod untuk anda.

✅ Checkpoint: Komponen display data berbeza melalui props dan ada interaksi toggle

🧭 Langkah 5: Routing — React Router via AI

React Router membolehkan app anda ada multiple pages tanpa reload. Anda boleh navigate dari Home ke About ke Contact dengan smooth.

"Saya nak tambah React Router ke projek React saya. Ajar saya cara install React Router dan setup 3 pages: Home, About, Contact. Guna Tailwind CSS. Beri arahan langkah demi langkah."

AI akan suruh anda:

npm install react-router-dom

Kemudian update main.jsx untuk bungkus app dalam BrowserRouter, dan setup routes dalam App.jsx.

Hasilkan page baru dengan prompt:

"Bina HomePage component. Ada hero section dengan tajuk, paragraph, dan CTA button. Guna Tailwind CSS."

"Bina AboutPage dan ContactPage component. ContactPage ada form (name, email, message). Guna Tailwind CSS."

Jangan lupa update Navbar untuk guna Link component dari React Router:

"Update Navbar component saya untuk guna React Router Link instead of biasa a tag. Links: Home (/), About (/about), Contact (/contact)."

✅ Checkpoint: Boleh navigate antara 3 pages tanpa reload

🗄️ Langkah 6: Connect ke Supabase dari React

Sambungkan React app anda ke Supabase database. Anda akan fetch data dan display dalam komponen.

Setup Supabase

Pergi ke supabase.com, buat projek baru. Dapatkan URL dan anon key dari Settings > API.

Minta AI Setup Supabase Client

"Saya nak sambung React app ke Supabase. Ajar saya cara install @supabase/supabase-js dan setup supabase client. Guna environment variable untuk API key."

Fetch Data dan Display

"Bina React component yang fetch data dari table 'products' di Supabase dan display dalam grid cards. Guna useEffect dan useState. Ada loading state dan error handling. Guna Tailwind CSS."

AI akan hasilkan kod yang guna useEffect untuk fetch data dan useState untuk simpan data. Anda cuma perlu copy-paste.

Tip: Kalau data tak muncul, buka browser console (F12 > Console). Copy error dan tanya AI: "Saya dapat error ni: [paste]. Tolong betulkan."

✅ Checkpoint: Data dari Supabase berjaya di-fetch dan dipaparkan di browser

🚀 Langkah 7: Build & Deploy ke Cloudflare Pages

Sekarang kita akan build React app untuk production dan deploy ke Cloudflare Pages.

Build untuk Production

"Saya nak build React app saya untuk production dan deploy ke Cloudflare Pages. Beri arahan langkah demi langkah. Build command apa? Output folder apa? Apa perlu setup di Cloudflare?"

AI akan suruh anda jalankan:

npm run build

Ini akan hasilkan folder dist yang mengandungi semua fail HTML, CSS, JS yang siap untuk production.

Deploy ke Cloudflare Pages

Ikut langkah ni:

Push projek React ke GitHub repository
Buka dash.cloudflare.com
Pergi ke Workers & Pages > Create application > Pages > Connect to Git
Pilih repository React app anda
Set build settings:
Build command: npm run build Build output directory: dist
Klik Save and Deploy

Peringatan untuk SPA Routing: React Router guna client-side routing. Kalau user refresh page di /about, Cloudflare akan return 404. Untuk betulkan: buat fail _redirects dalam folder public dengan content: /* /index.html 200. Atau minta AI: "Bagi saya content untuk _redirects file untuk SPA di Cloudflare Pages."

✅ Checkpoint: React app anda live di URL Cloudflare Pages — boleh dikongsi dengan semua orang!

📝 Ringkasan Perjalanan Anda

Apa yang anda dah capai dalam modul ini:

Setup React project — guna AI, bukan hafal command
Faham Components — AI yang terangkan dengan analogi
Bina 3 komponen — Card, Button, Navbar — semuanya guna prompt
Props & State — faham konsep, AI tulis kod
React Router — multiple pages tanpa reload
Supabase — fetch data dari database
Build & Deploy — React app live di internet

Ingat: Anda tak perlu jadi expert React. Dengan Vibe Coding, anda boleh bina aplikasi React yang kompleks hanya dengan tahu cara menulis prompt yang baik. Skill ini akan kekal bersama anda walaupun teknologi React berubah.

Langkah seterusnya: Cuba prompt templates dari halaman Rujukan untuk projek React anda sendiri!