อ่านเกี่ยวกับ React Basic

React Components คืออะไร?#

• React Components คือฟังก์ชันหรือคลาสที่รับข้อมูล (props) และคืนค่า UI (React element) ให้แสดงผลบนหน้าเว็บ
• อธิบายถึงความสำคัญของ Components ในการสร้าง UI ที่สามารถนำกลับมาใช้ใหม่ (Reusability)

ประเภทของ Components#

• Functional Components : การสร้าง Components โดยใช้ฟังก์ชัน

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• Class Components : การสร้าง Components โดยใช้คลาส (ใช้ในบางกรณีที่ต้องการ lifecycle methods เช่น componentDidMount)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• ความแตกต่าง ระหว่าง Functional Components และ Class Components
  • Functional Components ใช้งานง่ายกว่า แต่ในกรณีที่ต้องการจัดการ lifecycle (ก่อน React 16.8) ก็ต้องใช้ Class Components
  • React 16.8+ ทำให้ Functional Components สามารถใช้ Hooks เช่น useState, useEffect ได้

การส่งข้อมูลให้กับ Components ด้วย Props#

• Props คือข้อมูลที่ถูกส่งจาก Component พ่อ (Parent) ไปยัง Component ลูก (Child)

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

• อธิบายการใช้ props ในการส่งข้อมูล (ไม่สามารถเปลี่ยนแปลงได้ภายในลูก)

การใช้ State ใน Components#

การจัดการ State ภายใน Functional Components ด้วย useState

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>คุณคลิก {count} ครั้ง</p>
      <button onClick={() => setCount(count + 1)}>เพิ่ม</button>
    </div>
  );
}

• อธิบายการใช้ useState และวิธีการอัปเดตค่า State

Component Lifecycle (ใน Class Components)#

• อธิบายเกี่ยวกับ Lifecycle Methods ใน Class Components
  • componentDidMount: ใช้เมื่อ Component ถูก Render ครั้งแรก
  • componentDidUpdate: ใช้เมื่อ Component อัปเดตข้อมูล
  • componentWillUnmount: ใช้เมื่อ Component ถูกทำลาย
• ตัวอย่างการใช้งาน:

class Timer extends React.Component {
  componentDidMount() {
    console.log("Component Mounted");
  }

  componentWillUnmount() {
    console.log("Component Unmounted");
  }

  render() {
    return <h1>Timer Component</h1>;
  }
}

Event Handling ใน Components#

• การใช้งาน Event Handlers เช่น onClick, onChange ใน React

function Button() {
  const handleClick = () => {
    alert('คลิกแล้ว!');
  };

  return <button onClick={handleClick}>คลิก</button>;
}

อธิบายการผูก Event Handlers กับ this ใน Class Components (สำหรับ Class Components)

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('คลิกแล้ว!');
  }

  render() {
    return <button onClick={this.handleClick}>คลิก</button>;
  }
}

Children in React Components#

• การส่งข้อมูล Children ไปยัง Components เพื่อใช้ภายใน

function Layout(props) {
  return (
    <div>
      <header>Header</header>
      <main>{props.children}</main>
      <footer>Footer</footer>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <p>This is the main content</p>
    </Layout>
  );
}

• อธิบายการใช้ props.children เพื่อรับค่าที่ถูกส่งจาก Parent Component ไปยัง Child Component

การจัดการ Reusable Components#

• การสร้าง Reusable Components โดยใช้ Props เพื่อให้สามารถนำกลับมาใช้ได้หลายๆ ที่
• ตัวอย่างการสร้างปุ่มที่สามารถปรับแต่งได้:

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="คลิกที่นี่" onClick={() => alert('คลิกแล้ว!')} />
      <Button label="ยกเลิก" onClick={() => alert('ยกเลิก')} />
    </div>
  );
}

การจัดการ Conditional Rendering#

• การแสดงผลตามเงื่อนไขด้วยการใช้ if/else หรือ ternary operator

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>ยินดีต้อนรับ!</h1> : <h1>กรุณาเข้าสู่ระบบ</h1>}
    </div>
  );
}

สรุป#

• สรุปข้อดีของการใช้ React Components เช่น การทำให้ UI เป็นระเบียบและจัดการง่ายขึ้น
• อธิบายถึงหลักการนำ Component มาทำให้ UI สามารถนำกลับมาใช้ใหม่และง่ายต่อการบำรุงรักษา