Functional Components (คอมโพเนนต์แบบฟังก์ชัน) - วิธีเขียนคอมโพเนนต์ React สมัยใหม่ที่ใช้ฟังก์ชันแทนคลาส

// คอมโพเนนต์แบบฟังก์ชัน แทนการใช้แบบ Class
const Counter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

Hooks (ฮุค) - ฟังก์ชันพิเศษที่ให้คุณใช้ฟีเจอร์ของ React โดยไม่ต้องเขียนคลาส

// ฮุคพื้นฐาน: useState, useEffect, useContext
import { useEffect, useState } from "react";

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

  useEffect(() => {
    document.title = `คลิกไปแล้ว ${count} ครั้ง`;
  }, [count]);
}

Type Safety (ประเภทความปลอดภัย) - ช่วยจับข้อผิดพลาดก่อนรันโปรแกรม

// ใช้ TypeScript กับ React (TSX)
interface UserProps {
  id: number;
  name: string;
  email: string;
}

const User: React.FC<UserProps> = ({ id, name, email }) => {
  return <div>{name} ({email})</div>;
};

Component Structure (โครงสร้างคอมโพเนนต์) - จัดระเบียบโค้ดให้เป็นแบบแผน

// แบบแผนการจัดโครงสร้างคอมโพเนนต์
import { useEffect, useState } from "react";
import styles from "./Button.module.css";

// ฮุคและตัวแปร
// ฟังก์ชันช่วยเหลือ
// คอมโพเนนต์และการ return JSX

State Management (การจัดการสถานะ) - วิธีเก็บข้อมูลที่แชร์กันหลายคอมโพเนนต์

// ใช้ Context API สำหรับการจัดการสถานะ
import { createContext, useContext, useState } from "react";

const CounterContext = createContext(null);

export const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
};

// หรือใช้ Zustand สำหรับ global state
import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Custom Hooks (ฮุคที่สร้างเอง) - แยกโค้ดที่ใช้บ่อยเป็นฮุคเพื่อใช้ซ้ำได้

// แยก logic ที่ใช้บ่อยเป็น custom hook
export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  return { count, increment, decrement };
}

// นำไปใช้
function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}

Props (พร็อพส์) - วิธีส่งข้อมูลจากคอมโพเนนต์พ่อไปยังคอมโพเนนต์ลูก

// การส่งและรับ props
interface ButtonProps {
  text: string;
  onClick?: () => void;
  variant?: "primary" | "secondary";
}

const Button: React.FC<ButtonProps> = ({
  text,
  onClick,
  variant = "primary",
}) => {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

Event Handling (จัดการอีเวนต์) - วิธีจัดการกับเหตุการณ์ต่างๆ บนหน้าเว็บ

// การจัดการอีเวนต์
function Form() {
  const [name, setName] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Submitting:", name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">ส่ง</button>
    </form>
  );
}

CSS in React (CSS ใน React) - วิธีจัดการสไตล์ในแอปพลิเคชัน React

// ใช้ CSS Modules
import styles from "./Button.module.css";

function Button() {
  return <button className={styles.button}>คลิก</button>;
}

// หรือใช้ styled-components
import styled from "styled-components";

const StyledButton = styled.button`
  background: ${props => props.primary ? "blue" : "white"};
  color: ${props => props.primary ? "white" : "blue"};
  padding: 8px 16px;
`;

Conditional Rendering (การแสดงผลตามเงื่อนไข) - แสดงหรือซ่อน UI ตามเงื่อนไข

// การแสดงผลตามเงื่อนไข
function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <button>ออกจากระบบ</button> : <button>เข้าสู่ระบบ</button>}

      {isLoggedIn && <ProfileSettings />}
    </div>
  );
}

Lists and Keys (ลิสต์และคีย์) - วิธีแสดงข้อมูลเป็นรายการและใช้คีย์อย่างถูกต้อง

// การแสดงผลรายการข้อมูล
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

Lazy Loading (โหลดแบบขี้เกียจ) - โหลดคอมโพเนนต์เมื่อจำเป็นเท่านั้น

// ใช้ React.lazy และ Suspense
import { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>กำลังโหลด...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Error Handling (จัดการข้อผิดพลาด) - วิธีจัดการกับข้อผิดพลาดที่เกิดขึ้น

// ใช้ Error Boundaries
import { Component, ErrorInfo, ReactNode } from "react";

class ErrorBoundary extends Component<
  { children: ReactNode; fallback: ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("เกิดข้อผิดพลาด:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

Modern Tooling (เครื่องมือสมัยใหม่) - เครื่องมือที่ช่วยให้พัฒนาแอปพลิเคชันง่ายขึ้น

# ใช้ Vite เพื่อสร้างโปรเจ็กต์ React
npm create vite@latest my-app -- --template react-ts

หมายเหตุ:

• ใช้ฟังก์ชันคอมโพเนนต์แทนคลาสคอมโพเนนต์
• ใช้ฮุคเพื่อจัดการสถานะและเอฟเฟ็กต์
• แยกโลจิกที่ใช้บ่อยเป็น custom hooks
• ใช้ TypeScript สำหรับการตรวจสอบประเภทข้อมูล
• ใช้ Context API หรือ Zustand สำหรับการจัดการสถานะทั่วทั้งแอป