Components

Component คืออะไร?

Component คือ function ที่ return JSX — ลองนึกภาพมันเหมือนกล่องที่:

• รับ Input → ข้อมูลที่ส่งเข้ามา (เรียกว่า props)
• ประมวลผล → ทำอะไรสักอย่าง
• ส่ง Output → JSX (UI ที่จะแสดงบนหน้าจอ)

flowchart LR
    subgraph Component
        Props[Props] -->|INPUT| Func[Function]
        Func -->|OUTPUT| JSX[JSX]
    end
    
    classDef component fill:#60a5fa,stroke:#3b82f6,stroke-width:2px
    class Props,JSX component
    class Func component

จริง ๆ แล้ว component ก็เป็นแค่ function ปกติ แต่มันจะ return สิ่งที่ React เข้าใจได้ (นั่นคือ JSX นั่นเอง)

Component เหมือนเครื่องทำโมจิ

flowchart LR
    subgraph MochiMachine
        Input1[Filling + Dough] -->|INPUT| Machine[Mochi Machine]
        Machine -->|OUTPUT| Output1[Mochi]
    end
    
    classDef mochi fill:#f9a8d4,stroke:#ec4899,stroke-width:2px
    class Input1,Output1 mochi

ลองนึกภาพ เครื่องทำโมจิ ที่:

• ใส่วัตถุดิบเข้าไป → ได้ โมจิ ออกมา

Component ก็เหมือนกัน:

• ใส่ props (ข้อมูล) เข้าไป → ได้ UI (JSX) ออกมา

// เครื่องทำโมจิ
function Mochi({ flavor }) {
  // ใส่ flavor เข้าไป
  // ออกมาเป็นโมจิรสนั้น
  return <div className="mochi">{flavor} Mochi</div>
}

เครื่องทำโมจิ	Component
แป้ง, ไส้	Props (ข้อมูลที่ส่งเข้าไป)
เครื่องจักร	Function ที่เขียน logic
โมจิ	JSX (UI ที่แสดงบนหน้าจอ)

ทำไมต้องใช้ Component?

ลองนึกภาพถ้าคุณต้องเขียนปุ่ม 10 ปุ่มที่หน้าตาเหมือนกัน — ถ้าเขียนทุกอย่างในไฟล์เดียว มันจะยาวมาก แต่ถ้าสร้าง component ชื่อ Button ขึ้นมา คุณก็แค่เรียก <Button /> 10 ครั้ง เรียกว่า reusability นั่นเอง

เหตุการณ์สมมุติของคนที่ไม่ใช้ Component

เปลี่ยนสีปุ่มใหม่หมดเลย!

แง! ปุ่มมี 10 ตัวเลยนะ ต้องไปนั่งแก้ทีละไฟล์เลยเหรอ? T_T

เหตุการณ์สมมุติของคนที่ใช้ Component

เปลี่ยนสีปุ่มใหม่หมดเลย!

ได้เลย~ ปุ่มทั้ง 10 ตัวใช้ component เดียวกันอยู่ แก้แค่ไฟล์เดียวจบเลย สบายมาก! 😎

---

Arrow Function Component

นอกจาก function declaration แบบปกติ ยังเขียนเป็น arrow function ได้อีกด้วย:

const Header = () => {
  return <header><h1>My Site</h1></header>
}

export default Header

---

กฎของ Component

React มีกฎ 3 ข้อที่ต้องจำ:

1. ชื่อต้องขึ้นต้นด้วยตัวใหญ่

function App() {}   // ✅ ถูกต้อง
function app() {}   // ❌ React จะไม่รู้จัก

<App />   // ✅ ใช้ได้
<app />   // ❌ ใช้ไม่ได้

2. ต้อง return อะไรสักอย่าง

Component ต้อง return JSX (หรือ null ถ้าต้องการซ่อน):

function Valid() {
  return <div>Hello</div>
}

function AlsoValid() {
  return null  // ไม่แสดงอะไรเลย
}

function Invalid() {
  // ❌ ไม่ return อะไรเลย — Error!
}

3. ต้องมี single root element

JSX ที่ return ต้องมี element เดียว เป็น parent:

// ❌ ผิด — มี 2 element หลัก
function Wrong() {
  return (
    <h1>Title</h1>
    <p>Description</p>
  )
}

// ✅ ถูก — wrap ด้วย div
function Correct() {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

---

Fragment — ไม่ต้อง Wrap ด้วย div

ถ้าไม่อยากใช้ <div> เป็น parent (เพราะอาจทำให้โครงสร้าง HTML มี div ล้นมาก) สามารถใช้ Fragment แทนได้:

function Article() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  )
}

<> เป็น shorthand ของ <React.Fragment> — มันจะไม่สร้าง element จริง ๆ ใน DOM (ช่วยลด DOM nodes ที่ไม่จำเป็น)

// เขียนแบบเต็มก็ได้
function Article() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
  )
}

ใช้ Fragment แทน div เสมอ ๆ ก็ได้นะ แต่ถ้าต้องการ style ที่ element นั้นก็ต้องใช้ div อยู่ดี

---

ตัวอย่าง: สร้าง Component หลายตัว

ลองสร้าง component 3 ตัว แล้วเรียกใช้งานใน App:

src/Header.tsx

function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

export default Header;

src/Content.tsx

function Content() {
  return (
    <main>
      <p>ยินดีต้อนรับสู่เว็บไซต์ของเรา!</p>
    </main>
  );
}

export default Content;

src/Footer.tsx

function Footer() {
  return (
    <footer>
      <p>© 2024 My Website</p>
    </footer>
  );
}

export default Footer;

src/App.tsx

import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";

function App() {
  return (
    <>
      <Header />
      <Content />
      <Footer />
    </>
  );
}

export default App;

จะเห็นว่าใน App เราเรียก <Header />, <Content />, <Footer /> ได้เลย — นี่คือพลังของ component: เขียนครั้งเดียว ใช้ได้หลายที่

ลองสร้าง component ของตัวเองขึ้นมาดูสิ

Quiz: Component พื้นฐาน

ข้อ 1 / 50%

Component ใน React คืออะไร?

function ที่ return HTML ปกติfunction ที่ return JSXclass ที่ return CSSobject ที่ return string

กลับส่งคำตอบ