⚛️

React คืออะไร?

JavaScript Library จาก Meta สำหรับสร้าง User Interface ใช้แนวคิด Component และ Virtual DOM เพื่อ UI ที่เร็วและนำกลับมาใช้ใหม่ได้

Meta (Facebook)2013v18+MIT License

🔄 React ทำงานยังไง?

🧩 Component — แนวคิดหลัก

React สร้าง UI โดยแบ่งออกเป็นชิ้นเล็กๆ ที่นำกลับมาใช้ใหม่ได้ เรียกว่า Component แต่ละ Component จัดการ State ของตัวเอง รับข้อมูลผ่าน Props และคืน JSX (Syntax คล้าย HTML) เพื่อแสดงผล

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

ComponentUI Block ที่นำกลับมาใช้ใหม่ได้ (Function คืน JSX)

Propsข้อมูลส่งจาก Parent ไป Child (อ่านอย่างเดียว)

Stateข้อมูลภายในที่เมื่อเปลี่ยนทำให้ Re-render

JSXSyntax คล้าย HTML ในไฟล์ JS (แปลงเป็น React.createElement)

Virtual DOMสำเนา DOM ในหน่วยความจำ React เปรียบเทียบก่อนอัปเดต DOM จริง

🪝 React Hooks ที่สำคัญที่สุด

📦

useState

เก็บ State ของ Component เมื่อ State เปลี่ยน React จะ Re-render Component นั้นอัตโนมัติ

const [count, setCount] = useState(0)

⚡

useEffect

รัน Side effect หลัง Render: ดึงข้อมูล API, Subscribe Event, ตั้ง Timer

useEffect(() => { fetchData() }, [id])

🌐

useContext

เข้าถึงข้อมูลส่วนกลาง (theme, auth, ภาษา) โดยไม่ต้องส่ง Props ผ่านทุก Component

const user = useContext(AuthContext)

🎯

useRef

อ้างอิง DOM element หรือเก็บค่าที่เปลี่ยนได้โดยไม่ trigger การ Re-render

const inputRef = useRef(null)

🚀

useMemo

Cache ค่าที่คำนวณหนัก คำนวณใหม่เฉพาะเมื่อ dependencies เปลี่ยน

const total = useMemo(() => calcTotal(items), [items])

🔁

useCallback

Cache Function reference ป้องกัน Child Component Re-render โดยไม่จำเป็น

const handleClick = useCallback(() => {}, [deps])

♻️ วงจรชีวิต Component

🌱

Mount

Component ปรากฏใน DOM ครั้งแรก useEffect ที่มี [] จะรันที่นี่ครั้งเดียว

🔄

Update

State หรือ Props เปลี่ยน → React เปรียบเทียบ Virtual DOM → อัปเดตเฉพาะส่วนที่เปลี่ยน

🍂

Unmount

Component ถูกลบออกจาก DOM Cleanup function ใน useEffect จะรัน (เคลียร์ Timer, Unsubscribe)

🌐 Ecosystem ของ React

▲

Next.js

React framework สำหรับ SSR/SSG, routing ตามไฟล์, API routes

🗺️

React Router

Client-side routing สำหรับ Single Page App (SPA)

🔄

Redux / Zustand

Global state management สำหรับแอปที่ซับซ้อน

⚡

React Query / SWR

ดึงข้อมูล, Cache, Background sync กับ API

🎨

Tailwind / MUI

UI Styling library สำหรับ Component สวยงาม

🚀

Vite / CRA

Build tools และ Dev server สำหรับโปรเจกต์ React

อยากสร้างเว็บด้วย React? ⚛️

เราพัฒนาเว็บด้วย React + Next.js, TypeScript ตามแนวปฏิบัติที่ดีที่สุด

← กลับหน้าเรียนติดต่อเรา

ที่อยู่

TNGroup soft thailand อำเภอเมือง จังหวัดมหาสารคาม

เบอร์โทร

093-3381817
098-7799609

Email

Tngroupsoft@gmail.com