🧩 Components & Props

หัวใจของ React คือ "Todo เป็น Component" การมอง UI ให้เป็นชิ้นส่วนย่อยๆ ช่วยให้เราจัดการโค้ดได้ง่ายและนำกลับมาใช้ซ้ำได้ (Reusable)

---

🏗️ 1. สร้าง Component แรก

ในสมัยก่อน React ใช้ Class Component แต่ปัจจุบันเราใช้ Function Component 100% เพราะเขียนง่ายและสั้นกว่า

ตัวอย่าง: สร้างปุ่ม MyButton.jsx

สร้างไฟล์ใหม่ src/components/MyButton.jsx:

// 1. สร้าง Function (ชื่อต้องขึ้นต้นด้วยตัวใหญ่เสมอ!)
function MyButton() {
  // 2. Return JSX
  return (
    <button style={{ padding: '10px 20px', backgroundColor: 'blue', color: 'white' }}>
      คลิกฉันสิ
    </button>
  );
}

// 3. Export เพื่อให้ไฟล์อื่นเอาไปใช้
export default MyButton;

นำไปใช้ใน App.jsx

import MyButton from './components/MyButton';

function App() {
  return (
    <div>
      <h1>ยินดีต้อนรับ</h1>
      <MyButton />
      <MyButton /> {/* ใช้ซ้ำได้กี่ครั้งก็ได้ */}
    </div>
  );
}

---

📦 2. Props (Properties)

Props คือข้อมูลที่ส่งจาก Parent (แม่) ไปหา Child (ลูก) เพื่อให้ Component ทำงานยืดหยุ่นขึ้น (เหมือน attribute ใน HTML)

รับ Props ใน UserCard.jsx

// รับ object props เข้ามา (Destructuring)
function UserCard({ name, role, age }) {
  return (
    <div className="card">
      <h3>ชื่อ: {name}</h3>
      <p>ตำแหน่ง: {role}</p>
      {age && <p>อายุ: {age} ปี</p>} {/* Conditional Rendering */}
    </div>
  );
}

export default UserCard;

ส่ง Props จาก App.jsx

import UserCard from './components/UserCard';

function App() {
  return (
    <div>
      {/* ส่งข้อมูลเข้าไป */}
      <UserCard name="Somsak" role="Admin" age={30} />
      <UserCard name="John" role="User" />
    </div>
  );
}

ข้อควรจำเกี่ยวกับ Props

Props เป็น Read-Only! ลูกห้ามแก้ค่า Props ที่แม่ส่งมาเด็ดขาด ถ้าต้องการแก้ไขข้อมูล ต้องใช้ State (บทถัดไป)

---

🎨 3. การแยกไฟล์ Component

เพื่อความเป็นระเบียบ ควรแยกไฟล์ตามหน้าที่:

• src/components/: เก็บชิ้นส่วนย่อยที่ใช้ซ้ำ (Button, Card, Navbar)
• src/pages/: เก็บหน้าจอหลัก (HomePage, LoginPage)
• src/layouts/: เก็บโครงสร้างหลัก (Header + Content + Footer)

---

🗂️ 4. Children Props

บางครั้งเราอยากส่ง "เนื้อหาข้างใน" ไม่ใช่แค่ค่าตัวแปร เราใช้ children prop

function AlertBox({ children }) {
  return (
    <div style={{ border: '1px solid red', padding: '10px' }}>
      <b>แจ้งเตือน:</b>
      {children}
    </div>
  );
}

// การใช้งาน
<AlertBox>
  เกิดข้อผิดพลาด <span>โปรดลองใหม่</span>
</AlertBox>