React พื้นฐาน

React เป็นไลบรารี JavaScript ยอดนิยมสำหรับสร้างส่วนติดต่อผู้ใช้ (User Interface) โดยเฉพาะแอปพลิเคชันแบบ Single-page Application ที่ต้องการประสบการณ์การใช้งานที่รวดเร็วและโต้ตอบได้ดี

ทำไมเราถึงเลือก React

"AI เข้าใจ React มากกว่า Vue และ Svelte อย่างชัดเจน ในยุคที่ AI เป็นส่วนหนึ่งของ workflow สิ่งนี้กลายเป็น factor จริงๆ ในการเลือก stack"

การตัดสินใจ

ตอนเลือก frontend library/framework เราเปรียบเทียบ Vue, Svelte และ React นี่คือเหตุผลที่เลือก React:

ทำไมไม่ใช้ Vue หรือ Svelte?

• AI ช่วยได้น้อยกว่าเพราะ training data น้อยกว่า
• Ecosystem เล็กกว่า React
• คนในทีมคุ้นเคยน้อยกว่า

React ให้อะไรเราบ้าง:

• Ecosystem ใหญ่ที่สุดในวงการ frontend
• AI ช่วยได้ดีมาก (Copilot, Claude, etc. เข้าใจ React ดีที่สุด)
• หา developer ที่รู้จัก React ได้ง่าย
• Patterns และ best practices ที่ mature
• ใช้งานร่วมกับ Next.js ได้ลื่นไหล

ข้อดี-ข้อเสีย

React คืออะไร?

React เป็นไลบรารีสำหรับสร้าง UI แบบประกาศและใช้ Component เป็นหลัก ช่วยให้คุณสามารถประกอบ UI ที่ซับซ้อนจากชิ้นส่วนโค้ดเล็กๆ ที่แยกจากกันซึ่งเรียกว่า "Component"

Component แรกของคุณ

ตัวอย่างแบบโต้ตอบ

ลองแก้ไขโค้ดด้านล่างและดูผลลัพธ์ได้เลย!

แนวคิดสำคัญของ React

Component

Component เป็นหน่วยสร้างของแอปพลิเคชัน React สามารถเป็นได้สองแบบ:

• Functional Components: ฟังก์ชัน JavaScript ง่ายๆ แบบใหม่
• Class Components: Class แบบ ES6 (แนวทางเก่า)

Props

Props (properties) คือวิธีการส่งข้อมูลไปยัง component:

State

State คือข้อมูลที่เปลี่ยนแปลงได้ตลอดเวลาภายใน component:

React Hooks

Hooks คือฟังก์ชันพิเศษที่ให้คุณ "เชื่อมต่อ" กับ React features จาก function components

useState Hook

useEffect Hook

useEffect ใช้สำหรับ side effects เช่น data fetching, subscriptions, การเปลี่ยน DOM:

Dependency Array:

• [] = รันครั้งเดียวตอน mount
• [value] = รันเมื่อ value เปลี่ยน
• ไม่ใส่ = รันทุกครั้งที่ re-render (ระวัง!)

useContext Hook

useContext ใช้แชร์ข้อมูลระหว่าง components โดยไม่ต้องส่ง props:

useReducer Hook

useReducer ใช้จัดการ state ที่ซับซ้อน คล้ายกับ Redux:

useRef Hook

useRef เก็บค่าที่ไม่ทำให้ re-render หรือเข้าถึง DOM element:

useMemo Hook

useMemo จำค่าที่คำนวณแล้ว เพื่อหลีกเลี่ยงการคำนวณซ้ำ:

useCallback Hook

useCallback จำฟังก์ชัน เพื่อป้องกันการสร้างฟังก์ชันใหม่ทุกครั้ง:

Forms in React

Controlled Components

Form Validation

Data Fetching Patterns

Basic Fetch with useState & useEffect

Custom Hook สำหรับ Data Fetching

Async/Await Pattern

Performance Optimization

React.memo

ป้องกัน component re-render ถ้า props ไม่เปลี่ยน:

Code Splitting with React.lazy

ทำไมต้อง React?

1. Component-Based - สร้าง component ที่เป็นอิสระและจัดการ state เองได้
2. Declarative - ออกแบบ view ง่ายๆ สำหรับแต่ละ state และ React จะอัปเดตอย่างมีประสิทธิภาพ
3. Learn Once, Write Anywhere - ใช้ React ได้ทั้งบนเว็บ, มือถือ (React Native) หรือเดสก์ท็อป
4. ระบบนิเวศขนาดใหญ่ - มี component และไลบรารีจากชุมชนหลายพันตัว
5. Hooks - เขียน logic ที่ใช้ซ้ำได้ง่าย
6. Performance - Virtual DOM ทำให้อัปเดต UI เร็ว

Best Practices

1. แยก Components เล็กๆ

2. ใช้ Custom Hooks

3. จัดการ Side Effects ด้วย useEffect

4. Memoize Expensive Calculations

สรุป

React ทำให้การสร้าง UI ง่ายและมีประสิทธิภาพด้วย:

• ✅ Components - สร้างและใช้ซ้ำได้
• ✅ Hooks - จัดการ state และ side effects
• ✅ Forms - controlled components
• ✅ Data Fetching - patterns และ custom hooks
• ✅ Performance - memo, lazy loading

เริ่มสร้าง React app วันนี้!

แหล่งข้อมูลเพิ่มเติม

เอกสารอย่างเป็นทางการ

• React Documentation - เอกสารอย่างเป็นทางการพร้อมตัวอย่างแบบโต้ตอบ
• React API Reference - เอกสาร API ครบถ้วน
• React GitHub Repository - ซอร์สโค้ดและปัญหา

แนะนำสำหรับการเรียนรู้เพิ่มเติม

• React Beta Docs - เส้นทางการเรียนรู้สมัยใหม่พร้อม hooks
• React Patterns - รูปแบบ React ที่ใช้บ่อย
• React TypeScript Cheatsheet - TypeScript กับ React
• Awesome React - รวบรวมแหล่งข้อมูล React ที่น่าสนใจ