React

อินเทอร์เฟซแบบตอบสนองและประกอบร่างได้

React คือไลบรารียอดนิยมสำหรับสร้างส่วนติดต่อผู้ใช้ คอมโพเนนต์, JSX, state และ hooks จากนั้นก็การจัดการข้อมูล, ประสิทธิภาพ และสถาปัตยกรรม ตั้งแต่คอมโพเนนต์แรกของคุณไปจนถึงแพตเทิร์นระดับผู้เชี่ยวชาญ

พื้นฐาน

ผู้เริ่มต้น - เรียนพื้นฐานทีละขั้น

• ทำไมต้อง React, คอมโพเนนต์แรกของคุณ และ JSXมาทำความรู้จักว่า React คืออะไร เขียนคอมโพเนนต์แรกของคุณ และเรียนรู้กฎพื้นฐานของ JSX
• Props: การส่งข้อมูลเข้าสู่คอมโพเนนต์เรียนรู้วิธีทำให้คอมโพเนนต์ของคุณนำกลับมาใช้ซ้ำได้ ด้วยการส่งข้อมูลเข้าไปผ่าน props
• สเตตภายในเครื่องด้วย useStateมอบความจำให้คอมโพเนนต์ของคุณด้วย useState เพื่อให้คุณแสดงค่าที่เปลี่ยนแปลงได้เมื่อผู้ใช้โต้ตอบ
• อีเวนต์และการเรนเดอร์แบบมีเงื่อนไขตอบสนองต่อการกระทำของผู้ใช้ และแสดงหรือซ่อนอิลิเมนต์ตามเงื่อนไข
• การเรนเดอร์ลิสต์และบทบาทของ keysเปลี่ยนอาร์เรย์ของข้อมูลให้เป็นลิสต์ของอิลิเมนต์บนหน้าจอด้วย map และระบุตัวตนของแต่ละอิลิเมนต์ด้วย keys

ก้าวหน้า

ระดับกลาง - สร้างโปรเจกต์จริง

• ฟอร์มแบบควบคุม (Controlled forms)เรียนรู้การขับเคลื่อนทุกฟิลด์ของฟอร์มจาก state ของ React เพื่อให้คุณตรวจสอบและส่งข้อมูลที่เชื่อถือได้
• useEffect: เอฟเฟกต์ dependencies และ cleanupซิงโครไนซ์คอมโพเนนต์ของคุณกับโลกภายนอกด้วย useEffect โดยเชี่ยวชาญเรื่อง dependencies และ cleanup
• การยก state ขึ้นและการแบ่งปันข้อมูลวาง state แต่ละส่วนไว้ที่บรรพบุรุษร่วมที่ใกล้ที่สุดเพื่อแบ่งปันข้อมูลระหว่างหลายคอมโพเนนต์โดยไม่ต้องทำสำเนาซ้ำ
• การประกอบ (Composition): children และการแบ่งเป็นคอมโพเนนต์สร้างคอมโพเนนต์คอนเทนเนอร์ที่นำกลับมาใช้ซ้ำได้ด้วย prop children และแบ่งหน้าจอของคุณตามความรับผิดชอบที่ชัดเจน
• การเรียก API: fetch สถานะโหลด และข้อผิดพลาดโหลดข้อมูลจากระยะไกลด้วย fetch ภายในเอฟเฟกต์ โดยจำลองสถานะการโหลดและข้อผิดพลาดอย่างเป็นระเบียบ

ขั้นสูง

ชำนาญ - แพตเทิร์นขั้นสูงและประสิทธิภาพ

• useReducer สำหรับ state ที่ซับซ้อนจัดโครงสร้าง state ที่ซับซ้อนด้วย reducer แบบ pure ที่รวมศูนย์การเปลี่ยนแปลงและตัดคอมบิเนชันที่เป็นไปไม่ได้ออกไป
• Context: การแบ่งปันโดยไม่ต้อง prop drillingย้ายข้อมูลไปมาโดยไม่ต้อง prop drilling ด้วย context พร้อมทั้งควบคุมการ re-render และข้อจำกัดของมันให้อยู่ในมือ
• Custom hooks: การแยกและนำ logic กลับมาใช้ซ้ำแยก logic ที่มี state ออกมาเป็น hook ที่นำกลับมาใช้ซ้ำได้ ประกอบกันได้ และทดสอบได้
• Memoization: memo, useMemo, useCallbackเรียนรู้ว่าเมื่อไหร่ React.memo, useMemo และ useCallback จะเร่งความเร็วแอปของคุณได้จริง และเมื่อไหร่ที่มันทำให้ซับซ้อนขึ้นโดยเปล่าประโยชน์
• useRef และการจัดการ DOMจัดการ DOM และเก็บค่าประจำ instance ด้วย useRef โดยไม่ทำลายความ pure ของการ render

เชี่ยวชาญ

ผู้เชี่ยวชาญ - สถาปัตยกรรม กลไกภายใน และกรณีขอบ

• เบื้องหลัง: การกระทบยอด (reconciliation), การรวมกลุ่มอัปเดต (batching), และการเรนเดอร์แบบพร้อมกัน (concurrent rendering)ค้นพบว่า Fiber กระทบยอดต้นไม้ (tree) อย่างไร รวมกลุ่มการอัปเดตอย่างไร และทำให้งานเรนเดอร์สามารถถูกขัดจังหวะได้อย่างไร
• Suspense, lazy, และ code splittingเชี่ยวชาญกลไกการพักการเรนเดอร์ (suspension) การโหลดคอมโพเนนต์แบบ lazy และการแบ่งบันเดิล (bundle splitting)
• แพตเทิร์นระดับผู้เชี่ยวชาญ: compound components, การกลับด้านการควบคุม (inversion of control)ออกแบบ API ของคอมโพเนนต์ที่ยืดหยุ่นด้วย compound components, state reducer, และการเลือกที่ถูกต้องระหว่าง render props กับ hooks
• React สมัยใหม่: Server Components, use, useTransition, useOptimisticสำรวจ server components, การอ่าน promise ด้วย use, และการอัปเดตแบบมองโลกในแง่ดี (optimistic updates) ของ React 19
• คุณภาพ: Testing Library, StrictMode, Profilerทดสอบพฤติกรรมแทนที่จะเป็นการนำไปใช้งาน (implementation) ใช้ประโยชน์จากการเรียกซ้ำสองครั้งของ StrictMode และวัดการเรนเดอร์ด้วย Profiler