การแยกไฟล์ Component (JSX/TSX File) ใน React

JSX/TSX File คืออะไร?

JSX (JavaScript XML) คือ syntax ที่ใช้เขียน UI ใน React ให้เหมือน HTML ใน JavaScript/TypeScript ไฟล์ที่ลงท้ายด้วย .jsx หรือ .tsx (สำหรับ TypeScript) จะใช้สำหรับเขียนคอมโพเนนต์แบบแยกไฟล์

ตัวอย่าง: ไม่แยกไฟล์ (Anti-pattern)

// App.js
function Header() {
  return <h1>My App</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Welcome!</p>
    </div>
  );
}
export default App;

ข้อเสีย: โค้ดจะรกและดูแลยากเมื่อโปรเจกต์ใหญ่ขึ้น

---

ตัวอย่าง: แยกไฟล์ Component (Best Practice)

src/components/Header.jsx

export default function Header() {
  return <h1>My App</h1>;
}

src/App.jsx

import Header from "./components/Header";

export default function App() {
  return (
    <div>
      <Header />
      <p>Welcome!</p>
    </div>
  );
}

---

ข้อดีของการแยกไฟล์ Component

• โค้ดอ่านง่ายและเป็นระเบียบ
• Reuse component ได้ง่าย
• แก้ไข/ดูแลแต่ละส่วนได้แยกจากกัน
• ลดความซับซ้อนของแต่ละไฟล์

วิธีตั้งชื่อไฟล์และโฟลเดอร์ (มาตรฐานสมัยใหม่)

• ชื่อไฟล์และโฟลเดอร์ควรเป็น PascalCase เช่น MyButton.tsx, UserProfile.tsx
• เก็บ component ไว้ในโฟลเดอร์ components/
• ถ้าใช้ TypeScript ให้ใช้ .tsx แทน .jsx

ตัวอย่างโครงสร้าง:

src/
  components/
    Header.tsx
    MyButton.tsx
  App.tsx

เปรียบเทียบกับแนวทางเก่า/ไม่แยกไฟล์

ประเด็น	ไม่แยกไฟล์ (Anti-pattern)	แยกไฟล์ (Best Practice)
ความอ่านง่าย	ยากเมื่อโปรเจกต์ใหญ่	ง่ายและเป็นระเบียบ
การ reuse	ทำได้ยาก	ทำได้ง่าย
การดูแล/แก้ไข	เสี่ยงบั๊ก, ยุ่งยาก	ง่ายและปลอดภัยกว่า

ตัวอย่างการใช้ TypeScript (.tsx)

src/components/Welcome.tsx

import React from "react";

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return <h1>ยินดีต้อนรับ {name}</h1>;
}

สรุปแนวทางที่แนะนำ

• แยกแต่ละ Component ออกเป็นไฟล์ของตัวเองเสมอ
• ใช้ .jsx หรือ .tsx ตามภาษาที่ใช้
• ตั้งชื่อไฟล์และโฟลเดอร์ให้สื่อความหมายและเป็นมาตรฐาน
• ช่วยให้โค้ดดูแลง่าย ขยายต่อได้ดี และเหมาะกับทีมงาน

การแยกไฟล์ Component เป็นหัวใจของการเขียน React สมัยใหม่ ฝึกใช้แนวทางนี้ตั้งแต่เริ่มต้นจะช่วยให้โปรเจกต์เติบโตอย่างมีคุณภาพและยั่งยืน