โหมดมืด
React
ส่วนหนึ่งของ Beginner Book
🟢 มือใหม่เริ่มอ่านที่นี่
คลิก บท 0 ได้เลย — แล้ว ข้ามกล่อง "รุ่นและศัพท์" ด้านล่างไปก่อน
กล่องนั้นเต็มไปด้วยศัพท์ขั้นสูง (RSC, PPR, INP, Server Actions ฯลฯ) สำหรับคนที่เคยใช้ React มาก่อนเท่านั้น ถ้าเปิดมาแล้วงงเป็นเรื่องปกติ — ไม่ต้องอ่าน ค่อยกลับมาดูตอนจบเล่ม
หนังสือเล่มนี้พาคุณไปถึงไหน
อ่านจบ + ทำ checkpoint หมด คุณจะ:
- เข้าใจ "ทำไม React มี" — ปัญหาก่อน React คืออะไร
- เข้าใจ component, JSX, props, state อย่างเห็นภาพ
- เข้าใจ Virtual DOM + reconciliation
- ใช้ hook ครบ (useState, useEffect, useMemo, useCallback, useRef, useContext, useReducer + custom hook) — ไม่ต้องตกใจกับชื่อ ทุกตัวจะอธิบายในบท 0 และบท 2
- จัดการ form ด้วย React Hook Form + Zod
- Fetch data + cache ด้วย TanStack Query (optimistic update, pagination, infinite scroll)
- ทำ multi-page SPA ด้วย React Router (protected route, nested layout, lazy load)
- ต่อ frontend กับ Spring Boot backend ได้
ก่อนเริ่ม — ต้องรู้อะไรก่อน
✅ JavaScript พื้นฐาน — variable, function, array, object, arrow function, destructuring, spread/rest, template literal, async/await, promise ✅ HTML/CSS พื้นฐาน — tag, class, flexbox/grid พื้นฐาน ✅ TypeScript — รู้ก็ดี ไม่รู้บทที่ 0 จะ recap ให้ (บทระดับสูง 13–16 ต้องใช้ TypeScript ระดับกลาง–สูง — ถ้า TypeScript ยังไม่แน่น แนะนำอ่านบทที่ 13 ก่อนค่อยไปต่อ)
❌ ไม่ต้องรู้: jQuery, Angular, Vue, Redux (= UI library / framework อื่น ๆ — รู้ไม่รู้ไม่ส่งผลต่อการเริ่ม React)
ถ้ายังไม่มีพื้นฐาน JavaScript เลย → ไปเรียน JS basics ก่อน 1-2 สัปดาห์ แล้วค่อยกลับมา
บทเรียน
ป้ายระดับความยาก — 🟢 มือใหม่ (เริ่มที่นี่ได้เลย) · 🟡 ระดับกลาง (ควรผ่านบทมือใหม่ก่อน) · 🔴 ระดับสูง (อ่านทีหลังได้ ไม่ต้องรีบ)
เล่มนี้ชื่อ "beginner book" ก็จริง แต่ครอบคลุมไปถึงระดับกลาง-สูงด้วย ถ้าเป็นมือใหม่จริง ๆ แนะนำให้เก็บบท 0–5 (และ 6–8 ตามต้องการ) ให้แน่นก่อน ส่วน บท 13–16 อ่านทีหลังได้ เมื่อเริ่มทำโปรเจกต์จริงแล้วค่อยย้อนกลับมา
| # | ระดับ | บท | สอนอะไร |
|---|---|---|---|
| 0 | 🟢 มือใหม่ | React คืออะไร + JS/TS recap | ปัญหาก่อน React, Virtual DOM, ทบทวน JS modern, TypeScript essentials |
| 1 | 🟢 มือใหม่ | First React App | สร้าง project (Vite), JSX, component, props, state, event, Todo list |
| 2 | 🟢 มือใหม่ | Hooks เชิงลึก | useEffect, useMemo, useCallback, useRef, useContext, useReducer, custom hook |
| 3 | 🟡 กลาง | Form + Validation | React Hook Form + Zod, useFieldArray, multi-step, file upload |
| 4 | 🟡 กลาง | Data Fetching | TanStack Query — query, mutation, cache, optimistic update, pagination, infinite scroll |
| 5 | 🟡 กลาง | Routing | React Router v7 — nested route, protected route, lazy load |
| 6 | 🟡 กลาง | Styling + UI Libraries | Tailwind CSS, CSS Modules, shadcn/ui, Radix, MUI, Chakra |
| 7 | 🟡 กลาง | State Management | Zustand, Jotai, Redux Toolkit, server vs client state |
| 8 | 🟡 กลาง | Testing | Vitest, React Testing Library, MSW, Playwright |
| 9 | 🔴 สูง | Advanced Patterns | HOC, Render Props, Portals, ErrorBoundary, Suspense, Compound |
| 10 | 🔴 สูง | Animation + Performance | Motion (Framer Motion), virtualization, code splitting, Web Vitals |
| 11 | 🔴 สูง | Next.js | App Router, Server Components, Server Actions, SSR/SSG/ISR |
| 12 | 🔴 สูง | React Native | Expo, Expo Router, NativeWind, EAS Build, mobile basics |
| 13 | 🔴 สูง (อ่านทีหลังได้) | TypeScript Deep for React | type vs interface, satisfies, discriminated union, generic component, polymorphic component, Zod, exhaustive check |
| 14 | 🔴 สูง (อ่านทีหลังได้) | React Internals (Fiber) | Virtual DOM, Fiber architecture, reconciliation, hooks linked list, concurrent rendering (useTransition, Suspense), React 19 Compiler, RSC |
| 15 | 🔴 สูง (อ่านทีหลังได้) | Accessibility + i18n + SEO | WCAG, semantic HTML, ARIA, focus management, react-i18next, Intl API, RTL, SSR/SSG SEO, Core Web Vitals |
| 16 | 🔴 สูง (อ่านทีหลังได้) | Authentication + Authorization | Password auth + bcrypt, JWT vs session, httpOnly cookie, OAuth/OIDC, refresh token, protected route + RBAC, Auth.js / Clerk / Supabase |
📋 รุ่นและศัพท์ที่ใช้ในเล่มนี้ (กดเพื่อขยาย — สำหรับคนเคย React มาก่อน · มือใหม่ข้ามได้)
🎯 เล่มนี้เขียนสำหรับ React 19 stable (ปลาย 2024) + ecosystem ปี 2026
- React 19.x — Server Actions (ฟังก์ชันที่รันบน server แต่ form เรียกได้เหมือนเขียน JS ปกติ),
use()hook, ref-as-prop,<Context>direct (ไม่ต้อง.Provider)- React Compiler — stable (1.0 ออก 2025) → สำหรับ Vite project ใช้ผ่าน
@vitejs/plugin-reactv4+ ที่มีbabel.pluginsoption รองรับ compiler โดยตรง (ไม่จำเป็นต้องลงbabel-plugin-react-compilerแยกแล้ว) · สำหรับ setup อื่น ๆ ดู react.dev/learn/react-compiler (last reviewed: 2026-06)- Next.js 15+ — App Router default, Server Components (component ที่ render บน server ไม่ส่ง JS), Partial Prerendering (PPR — ผสม static + dynamic ในหน้าเดียว),
'use cache'directive- React Router v7 — Remix (full-stack framework เดิม) รวมกับ React Router เป็น project เดียวกัน (ประกาศปี 2024) และถูก rebrand เป็น React Router v7 package:
react-router(ไม่ใช่react-router-domแล้ว) (เช็ค reactrouter.com/changelog +react-routerrelease notes ก่อนอ้างใน migration plan — last reviewed: 2026-06)- Vite 7+ — Rolldown เป็น default bundler แล้ว (bundler ใหม่เขียนด้วย Rust เร็วกว่า esbuild — เปลี่ยนจาก opt-in ตั้งแต่ Vite 7), React plugin official (last reviewed: 2026-06)
- TanStack Query v5+, Vitest เป็น default test runner (ตัวรัน test ที่มากับ Vite)
คำย่อ:
- RSC = React Server Components — component ที่รันบน server, ส่ง HTML สำเร็จมาให้ browser (ดูบท 11)
- BFF = Backend for Frontend — backend ของเราเองที่คั่นระหว่าง frontend กับบริการอื่น (ดูบท 16)
- INP = Interaction to Next Paint — เวลาที่ใช้ตั้งแต่ user กดปุ่ม จนเห็น UI ตอบสนอง (Google ใช้แทน FID ตั้งแต่ มี.ค. 2024)
- LCP / CLS = Largest Contentful Paint / Cumulative Layout Shift — ตัววัดของ Google Web Vitals
- PPR = Partial Prerendering — render หน้าบางส่วนล่วงหน้า (static) อีกส่วนรอ runtime (dynamic)
- directive = string พิเศษบนบรรทัดแรกของไฟล์/function (
'use client','use server','use cache') บอก compiler/bundler ให้ทำพิเศษ⚠️ Tutorial / blog ที่ > 2 ปี = ตกรุ่นมาก — เช็คเวอร์ชันก่อน copy ตัวอย่างคำที่เลิกใช้:
forwardRef= วิธีส่งrefผ่าน component แบบเก่า (React 19 ส่ง ref เป็น prop ปกติได้แล้ว)Context.Provider= วิธีใช้ Context แบบเก่า (React 19 ใช้<Context>ตรง ๆ ได้)react-router-dom= ชื่อ package เก่าของ React Router (v7 ใช้react-router)Lucia= auth library ที่ผู้พัฒนา deprecate ปี 2025
Roadmap หลังจบ Book นี้
ครอบใน book นี้แล้ว (บทที่ 6-16):
- State management (ch.7) — Zustand, Redux Toolkit, Jotai, XState
- Testing (ch.8) — Vitest + RTL + Playwright + MSW
- Animation + Performance (ch.10) — Motion, virtualization, Web Vitals
- Next.js (ch.11) — App Router, Server Components, Server Actions, PPR
- React Native (ch.12) — Expo, NativeWind, EAS, New Architecture
- TypeScript deep (ch.13) — generic, polymorphic, satisfies
- React Internals (ch.14) — Fiber, hooks linked list, concurrent
- a11y + i18n + SEO (ch.15)
- Authentication + Authorization (ch.16) — JWT, session, OAuth/OIDC, RBAC, Auth.js / Clerk / Supabase
หัวข้อต่อยอด นอก book:
- Storybook 8 — component-driven dev + visual regression (Chromatic)
- TanStack Start / Router — type-safe full-stack
- GraphQL (Apollo / urql / Relay)
- Three.js + React Three Fiber — 3D ใน React
- WebAssembly + React — high-perf code in browser
- Vercel AI SDK + LangChain — AI integration (รวม AI เข้ากับแอป)
- Solid.js / Qwik — alternative frameworks (framework ทางเลือกอื่นนอกจาก React) ที่น่าศึกษา (อาจ migrate ในอนาคต)
- TanStack DB — client-side database (offline-first, collaborative) (โปรเจกต์ใหม่ — เช็ค maturity/repo ก่อนใช้ production, last reviewed: 2026-06)
🔤 Glossary · 📋 Style guide · 📅 last_verified: 2026-06-12