Advanced React
หลักสูตร Advanced React เป็นการอบรมต่อยอดจาก Basic React.js ด้วย React 19 ครอบคลุม TypeScript, Tailwind CSS 4, Routing ขั้นสูง, TanStack Query, Redux Toolkit, Headless CMS ระบบ Login ด้วย JWT และ Firebase การทดสอบและการ Deploy เหมาะกับ Frontend Developer และนักไอทีที่ผ่านพื้นฐาน React มาแล้ว
- ระยะเวลา18 ชั่วโมง · 3 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
เมื่อแอป React ใหญ่ขึ้น การเขียน Component ให้ทำงานได้อย่างเดียวไม่พออีกต่อไป ทีมต้องมี Type ที่ช่วยจับข้อผิดพลาดก่อนรัน วิธีจัดการ State ที่ชัดเจน ระบบ Login ที่ปลอดภัย และชุดทดสอบที่ทำให้แก้โค้ดได้อย่างมั่นใจ React 19 กับเครื่องมือรุ่นปัจจุบันช่วยให้ทำเรื่องเหล่านี้ได้ง่ายขึ้นมาก
หลักสูตรนี้ต่อยอดจาก Basic React.js สอนการเขียน React 19 ด้วย TypeScript การตกแต่งด้วย Tailwind CSS 4 Routing ขั้นสูง การจัดการ Server State ด้วย TanStack Query และ Global State ด้วย Redux Toolkit ฟอร์มขั้นสูง การเชื่อม Headless CMS ระบบ Authentication ด้วย JWT และ Firebase การปรับประสิทธิภาพ การทดสอบ และปิดท้ายด้วย Workshop และการ Deploy (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Advanced)
สิ่งที่คุณจะได้รับ
- พัฒนาโปรเจกต์ React 19 ด้วย TypeScript ได้อย่างถูกแนวทาง
- ตกแต่งหน้าเว็บด้วย Tailwind CSS 4 และออกแบบ Component ที่นำกลับมาใช้ซ้ำได้
- เลือกและใช้ TanStack Query กับ Redux Toolkit จัดการ State ได้เหมาะกับงาน
- ใช้ Headless CMS เป็น Backend และทำ CRUD ผ่าน REST API ได้
- ทำระบบ Authentication ด้วย JWT และ Firebase ได้
- ทดสอบ ปรับประสิทธิภาพ และ Deploy แอป React ขึ้นใช้งานจริงได้
หลักสูตรนี้เหมาะสำหรับ
- Frontend Developer ที่เขียน React พื้นฐานได้และต้องการทำงานระดับโปรเจกต์จริง
- ผู้ที่ผ่านหลักสูตร Basic React.js หรือมีประสบการณ์ใกล้เคียง
- ทีมที่ดูแลแอป React รุ่นเดิมและต้องการปรับมาใช้แนวทางปัจจุบัน
- นักศึกษา ครู อาจารย์ และนักไอทีที่ต้องการยกระดับทักษะ React
พื้นฐานของผู้เข้าอบรม
- เขียน HTML, CSS และ JavaScript สมัยใหม่ได้คล่อง
- เขียน React แบบ Function Component และ Hooks พื้นฐานได้ เช่น useState และ useEffect
- เคยใช้ React Router และเรียก REST API จาก React มาบ้าง
- ไม่จำเป็นต้องมีพื้นฐาน TypeScript มาก่อน
- โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS และ VS Code ได้
หัวข้อการฝึกอบรม
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Advanced React JS อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Advanced ต่อยอดจากหลักสูตร Basic React.js ฉบับนี้ใช้ React 19 กับ TypeScript บน Vite เปิดใช้ React Compiler ใช้ Tailwind CSS 4 เป็นหลักและแสดงวิธีอ่านโค้ด Styled-Components
เดิม เปลี่ยน Redux แบบเดิมเป็น Redux Toolkit เพิ่ม TanStack Query, Data Router ของ React Router, Form Actions ของ React 19 และการทดสอบด้วย Vitest โดยยังคงแกนเดิมคือ TypeScript, Tailwind CSS, Headless CMS ด้วย Strapi, CRUD ผ่าน REST API, Redux, JWT Authentication, Firebase และการ Deploy ผู้เรียนได้ Lab Guide และซอร์สโค้ดแอปบล็อกพร้อมระบบ Login กลับไปใช้งานต่อ
Day 1 React 19 กับ TypeScript และ Component ขั้นสูง
Section 1: Lab: โปรเจกต์ React 19 ด้วย TypeScript
- สร้างโปรเจกต์ด้วย Vite แบบ react-ts และโครงสร้างไฟล์ที่ได้
- tsconfig แบบ Strict, ESLint และ Path Alias
- จัดโฟลเดอร์ตาม Feature สำหรับแอปขนาดใหญ่
- เปิดใช้ React Compiler และสิ่งที่ Compiler ทำให้
- Lab: ย้ายโปรเจกต์ JavaScript เดิมมาเป็น TypeScript
Section 2: Lab: TypeScript กับ Props และ State
- กำหนด Type ให้ Props, children และ Event Handler
- Type Inference และ Union Type กับ useState
- Discriminated Union สำหรับสถานะโหลด สำเร็จ และ Error
- Generic Component เช่น List<T> ที่ใช้ได้กับข้อมูลหลายแบบ
- Lab: ตารางข้อมูลแบบ Generic ที่เรียงและกรองได้
Section 3: Lab: Hooks ขั้นสูงและ Custom Hook
- useReducer สำหรับ State ที่มีหลายขั้นตอน
- Context แบบมี Type และการแยก Provider
- useRef, useEffectEvent และการเขียน Effect ให้น้อยที่สุด
- Custom Hook ที่มี Type ชัดเจนและนำกลับมาใช้ซ้ำได้
- Lab: Hook ดึงข้อมูลและ Hook จัดการตะกร้าสินค้า
Section 4: Lab: ตกแต่งด้วย Tailwind CSS 4
- ติดตั้งผ่าน @tailwindcss/vite และตั้งค่าธีมด้วย @theme
- Responsive, State Variant และ Dark Mode
- Component ที่มีหลายรูปแบบด้วย clsx และ tailwind-merge
- อ่านและย้ายโค้ด Styled-Components เดิม
- Lab: Template หน้า Dashboard ด้วย Tailwind CSS
Section 5: Component Pattern และความสามารถของ React 19
- Composition และ Compound Component
- Suspense และการอ่าน Promise ด้วย use()
- Error Boundary สำหรับส่วนที่อาจล้มเหลว
- Activity สำหรับซ่อนหน้าโดยเก็บ State ไว้
- Lab: Tabs และ Modal แบบ Compound Component
Day 2 Routing, State, ฟอร์ม และ Backend
Section 6: Lab: Routing ขั้นสูงด้วย React Router
- createBrowserRouter และ RouterProvider แบบ Data Mode
- Loader สำหรับโหลดข้อมูลก่อนแสดงหน้า และ Action สำหรับฟอร์ม
- Nested Layout, Lazy Route และหน้า Error ของแต่ละ Route
- สถานะระหว่างเปลี่ยนหน้าด้วย useNavigation
- Lab: แอปจัดการบทความหลายหน้าแบบ Data Router
Section 7: Lab: Server State ด้วย TanStack Query
- Server State กับ Client State ต่างกันอย่างไร
- useQuery, Query Key และการ Cache ข้อมูล
- useMutation และ invalidateQueries หลังบันทึกข้อมูล
- Optimistic Update และการย้อนกลับเมื่อผิดพลาด
- Lab: รายการบทความที่อัปเดตทันทีหลังแก้ไข
Section 8: Lab: Global State ด้วย Redux Toolkit
- ทำความเข้าใจ Redux Flow และเมื่อไรควรใช้
- configureStore, createSlice และ Typed Hook ด้วย withTypes
- งาน Asynchronous ด้วย createAsyncThunk
- ตรวจ State ด้วย Redux DevTools และเทียบกับ Context
- Lab: Store ของผู้ใช้ ตะกร้า และการตั้งค่าแอป
Section 9: Lab: ฟอร์มขั้นสูง
- Form Actions ของ React 19 กับ useActionState และ useFormStatus
- useOptimistic สำหรับแสดงผลก่อน Server ตอบกลับ
- React Hook Form ร่วมกับ Zod สำหรับฟอร์มหลายช่อง
- อัปโหลดรูปภาพพร้อมแสดงตัวอย่างก่อนส่ง
- Lab: ฟอร์มสร้างบทความพร้อม Validation ทั้งสองฝั่ง
Section 10: Lab: CRUD กับ Headless CMS
- ติดตั้ง Strapi 5 และสร้าง Content Type
- ตั้งสิทธิ์การเข้าถึงและเปิด REST API
- อ่าน เพิ่ม แก้ไข และลบข้อมูลจาก React
- แสดง Error จาก Backend ให้ผู้ใช้เข้าใจ
- Lab: ระบบบล็อกที่จัดการเนื้อหาผ่าน Strapi
Day 3 Authentication, คุณภาพ และ Deploy
Section 11: Lab: Authentication ด้วย JWT
- Auth Service สำหรับ Register, Login และดึงข้อมูลผู้ใช้
- เก็บ Token อย่างระมัดระวัง: httpOnly Cookie หรือ Memory
- แนบ Token กับคำขอและจัดการ Token หมดอายุ
- Protected Route และหน้าตามบทบาทผู้ใช้
- Lab: หน้า Login, Register และ Profile
Section 12: Lab: Firebase Authentication และ Firestore
- สร้างโปรเจกต์ Firebase และติดตั้ง SDK แบบ Modular
- Login ด้วย Google และติดตามสถานะด้วย onAuthStateChanged
- CRUD กับ Firestore และอัปเดตแบบ Realtime ด้วย onSnapshot
- Security Rules ที่จำกัดข้อมูลตามผู้ใช้
- Lab: ระบบจัดการผู้ใช้แบบ Realtime
Section 13: Performance ของแอป React
- React Compiler และกรณีที่ยังต้องใช้ useMemo กับ useCallback
- หาจุดช้าด้วย Profiler ใน React Developer Tools
- Code Splitting ด้วย lazy และ Suspense
- แสดงรายการยาวด้วย Virtualization
- Lab: วัดและปรับหน้า Dashboard ให้เร็วขึ้น
Section 14: Lab: ทดสอบแอป React
- ตั้งค่า Vitest และ React Testing Library
- ทดสอบจากมุมผู้ใช้ด้วย user-event
- จำลอง API ด้วย Mock Service Worker
- ทดสอบ Custom Hook และ Redux Slice
- Lab: ชุดทดสอบฟอร์ม Login และรายการบทความ
Section 15: Workshop: Build, CI และ Deploy
- Environment Variable ของ Vite และการแยกค่าตามสภาพแวดล้อม
- Build แบบ Production และตรวจขนาด Bundle
- รัน Test อัตโนมัติด้วย GitHub Actions
- Deploy ขึ้น Vercel, Netlify หรือ Firebase Hosting
- Workshop: แอปบล็อกพร้อม Login ที่ใช้งานได้จริง
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
ใช้ TypeScript กับ React ช่วยอะไร กำหนดชนิดของ Props อย่างไร
TypeScript ช่วยจับข้อผิดพลาดตั้งแต่ตอนเขียนโค้ด เช่น ส่ง Props ผิดชนิดหรือลืมส่งค่าที่จำเป็น และทำให้ Editor แนะนำโค้ดได้แม่นยำ การกำหนดชนิดของ Props ทำได้โดยประกาศ type หรือ interface แล้วใช้เป็นชนิดของพารามิเตอร์ใน Function Component ค่าที่ไม่บังคับใส่เครื่องหมาย ? ส่วน State ส่วนใหญ่ TypeScript อนุมานชนิดให้เองจากค่าเริ่มต้น และใช้ Union Type เมื่อค่ามีได้หลายแบบ
Redux ทำงานอย่างไร และควรใช้คู่กับ TanStack Query อย่างไร
Redux เก็บ State ของทั้งแอปไว้ใน Store เดียว Component ส่ง Action ผ่าน dispatch แล้ว Reducer คำนวณ State ใหม่ ปัจจุบันควรเขียนด้วย Redux Toolkit ที่ใช้ createSlice ลดโค้ดซ้ำและรองรับ TypeScript ได้ดี แนวทางที่นิยมคือใช้ TanStack Query ดูแลข้อมูลจาก Server เช่น รายการสินค้าและการ Cache ส่วน Redux Toolkit ใช้กับ State ฝั่ง Client ที่ใช้ร่วมกันหลายหน้า เช่น ตะกร้าสินค้าหรือการตั้งค่า
ทำระบบ Login ด้วย JWT ใน React มีขั้นตอนอย่างไร
สร้างฟอร์ม Login ส่งข้อมูลไปยัง API ซึ่งตรวจรหัสผ่านแล้วคืน JWT กลับมา เก็บ Token อย่างระมัดระวัง ทางที่ปลอดภัยกว่าคือให้ Server ตั้งเป็น httpOnly Cookie หรือเก็บไว้ใน Memory แทน localStorage จากนั้นแนบ Token กับทุกคำขอ จัดการกรณี Token หมดอายุ ป้องกันหน้าที่ต้อง Login ด้วย Protected Route และแสดงเมนูตามบทบาทผู้ใช้ โดยต้องตรวจสิทธิ์ซ้ำที่ฝั่ง Server เสมอ
React Compiler คืออะไร ยังต้องใช้ useMemo และ useCallback อยู่ไหม
React Compiler เป็นเครื่องมือที่วิเคราะห์โค้ดตอน Build แล้ว Memo ค่าและฟังก์ชันให้อัตโนมัติ ช่วยลดการ Render ซ้ำโดยไม่ต้องเขียน useMemo, useCallback หรือ React.memo เองในโค้ดใหม่ส่วนใหญ่ แต่ทั้งสอง Hook ยังใช้ได้เมื่อต้องการควบคุมเอง เช่น ค่าที่ใช้เป็น Dependency ของ Effect สำหรับโค้ดเดิมที่ Memo ไว้แล้ว แนะนำให้คงไว้หรือทดสอบให้ดีก่อนลบ
หลักสูตร Advanced React เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับ Frontend Developer ที่เขียน React พื้นฐานได้แล้วและต้องการทำงานระดับโปรเจกต์จริง ผู้ที่ผ่านหลักสูตร Basic React.js ทีมที่ดูแลแอป React รุ่นเดิม รวมถึงนักศึกษา ครู อาจารย์ และนักไอที ควรเขียน Function Component กับ Hooks พื้นฐานได้ และเคยใช้ React Router กับเรียก API มาบ้าง ไม่จำเป็นต้องรู้ TypeScript มาก่อน
เรียนจบหลักสูตร Advanced React แล้วทำอะไรได้บ้าง
เขียนแอป React 19 ด้วย TypeScript ได้อย่างมั่นใจ ออกแบบ Component ที่ใช้ซ้ำได้ด้วย Tailwind CSS 4 เลือกเครื่องมือจัดการ State ให้เหมาะกับงาน เชื่อม Headless CMS และ Firebase ทำระบบ Login ด้วย JWT หรือ Firebase เขียนชุดทดสอบ ปรับประสิทธิภาพ และ Deploy พร้อม CI ได้เอง และพร้อมต่อยอดสู่ Next.js สำหรับงานที่ต้องการ SSR