⚛️ React & Frontend Basics

React เป็น JavaScript Library สำหรับสร้าง User Interface (UI) ที่พัฒนาโดย Facebook (Meta) ปัจจุบันเป็นเครื่องมือยอดนิยมที่สุดในการทำ Frontend

ในหลักสูตรนี้ เราจะใช้ React (Function Components + Hooks) ร่วมกับ Vite ซึ่งเป็นเครื่องมือสร้างโปรเจกต์ที่เร็วและทันสมัยกว่า create-react-app แบบเดิม

---

⚡ 1. ทำไมต้อง React?

• Component-Based: แบ่งหน้าจอเป็นชิ้นส่วนเล็กๆ (เช่น ปุ่ม, พาดหัว, การ์ดสินค้า) แล้วนำมาประกอบกัน
• Declarative: บอกแค่ว่า "อยากได้หน้าตาแบบไหน" ที่เหลือ React จัดการ update DOM ให้เอง
• Single Page Application (SPA): เปลี่ยนหน้าโดยไม่ต้องโหลดใหม่ทั้งหน้า ทำให้ลื่นไหลเหมือนแอปมือถือ
• Ecosystem: มี Library เสริมมากมาย (Router, State Management, UI Frameworks)

---

🚀 2. การติดตั้ง (Installation)

สิ่งที่ต้องมี

• Node.js: เวอร์ชั่น 18+ (ใช้ร่วมกับ NPM)

สร้างโปรเจกต์ใหม่ด้วย Vite

เปิด Terminal และรันคำสั่ง:

npm create vite@latest frontend-app

เลือกตัวเลือกดังนี้:

1. Framework: React
2. Variant: JavaScript (หรือ TypeScript ถ้าต้องการความเข้มงวด)

เข้าสู่โฟลเดอร์และรัน

cd frontend-app
npm install      # ติดตั้ง Dependencies
npm run dev      # เริ่มเซิร์ฟเวอร์

เปิด Browser ไปที่ลิงก์ที่แสดง (มักจะเป็น http://localhost:5173)

---

📂 3. โครงสร้างโปรเจกต์ React (Vite)

• index.html: ไฟล์ HTML หลักที่เป็นจุดเริ่มต้น (จุดเดียวของ SPA)
• src/: โค้ดทั้งหมดของเราอยู่ที่นี่
  • main.jsx: จุดเริ่มต้นของ React (Mount Application ลงใน root div ของ index.html)
  • App.jsx: Component หลักตัวแรกของแอป
  • assets/: เก็บรูปภาพ, CSS, Fonts
• public/: เก็บไฟล์ Static ที่ต้องการให้อ้างอิงได้โดยตรง (เช่น favicon.ico)
• package.json: รายชื่อ Dependencies และ Scripts

---

🧼 4. JSX (JavaScript XML)

JSX คือ Syntax ที่ให้เราเขียน HTML ลงไปใน JavaScript ได้เลย!

// App.jsx
function App() {
  const name = "viize";
  
  return (
    <div className="container">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React Training</p>
    </div>
  );
}

กฎสำคัญของ JSX

1. ต้องมี Parent เดียว: ต้องหุ้มด้วย <div>...</div> หรือ Fragment <>...</> เสมอ
2. ปิด Tag เสมอ: <img />, <br />, <input /> ไม่ใช่ <img>
3. className ไม่ใช่ class: เพราะ class เป็นคำสงวนใน JavaScript
4. {} สำหรับ JavaScript: ใช้ปีกกาเพื่อแทรกตัวแปรหรือ Expression