Mission 3: ทบทวน Components

เป้าหมายของ Mission นี้: ทบทวน Component — ชิ้นส่วน UI ที่ใช้ซ้ำได้

Component คืออะไร

แยกส่วน UI ที่ใช้ซ้ำได้ (เช่น Navbar, Footer, ปุ่ม) เป็นไฟล์ของตัวเอง แล้ว export ออกมา ที่ ไหนอยากใช้ก็ import เข้าไปเรียกเหมือน tag ธรรมดา

flowchart TD
    B["components/Button.tsx"] --> P1["app/page.tsx"]
    B --> P2["app/about/page.tsx"]
    B --> P3["app/contact/page.tsx"]

// components/Button.tsx
export function Button({ children }: { children: React.ReactNode }) {
  return <button className="rounded-lg bg-black px-4 py-2 text-white">{children}</button>;
}

// ที่อื่นในโปรเจค
import { Button } from "@/components/Button";

<Button>กดฉัน</Button>;

ทำไมต้องแยก Component

• ไม่ต้องพิมพ์ Navbar/Footer ซ้ำทุกหน้า — เขียนครั้งเดียว เรียกใช้ได้ทุกที่
• แก้ที่เดียว เปลี่ยนทุกหน้าที่ใช้ Component นั้นพร้อมกัน

คำศัพท์สำคัญ