0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

เชื่อมั่นในการใช้ ReactJS เพื่อสร้างส่วนติดต่อผู้ใช้ที่ไดนามิกกับ ReactJS Academy

🤖 ขับเคลื่อนด้วย AI📚 คอร์ส 88👥 ผู้เรียน 100,000+ คน⭐ คะแนน 4.9
ภาพรวมคอร์ส

สร้างส่วนติดต่อที่แท้จริงด้วย React

React คือไลบรารี JavaScript ที่กำหนดวิธีการสร้างส่วนติดต่อในการผลิตส่วนใหญ่ในปัจจุบัน — จากแอปแบบเพจเดียวและไซต์ Next.js ไปจนถึงแอปพลิเคชันมือถือและเดสก์ทอปข้ามแพลตฟอร์ม เส้นทางนี้ครอบคลุมสาขาวิชาที่สมบูรณ์: สถาปัตยกรรมคอมโพเนนต์ การจัดการสถานะ การดึงข้อมูล ประสิทธิภาพ การทดสอบ และการปรับใช้ มันตั้งอยู่บนพื้นฐานของวิธีการทำงานของ React — reconciler ​​โมเดล fiber ​​語义 hooks — ไม่ใช่แค่ API ระดับพื้นผิว

สิ่งที่คุณจะเรียนรู้

คุณจะเริ่มต้นด้วย JSX props สถานะ และคอมโพเนนต์ที่ควบคุมได้ จากนั้นย้ายไปยัง useEffect useRef และ useReducer หลักสูตรเชิงปฏิบัติครอบคลุมการจัดเส้นทางด้วย React Router v6 การจัดการแบบฟอร์มด้วย React Hook Form สถานะเซิร์ฟเวอร์ด้วย React Query และ SWR สถานะโลกด้วย Redux Toolkit Zustand และ Jotai คุณจะทำงานกับ TypeScript ใน React เขียนการทดสอบการรวมและ E2E สร้างระบบออกแบบด้วย Storybook จัดการส่วนติดต่อแบบเรียลไทม์ผ่าน WebSockets และส่งมอบ API ที่ปลอดภัยประเภทด้วย tRPC เส้นทางนี้รวมถึง Next.js App Router คอมโพเนนต์เซิร์ฟเวอร์ การกระทำของเซิร์ฟเวอร์ และการพิสูจน์ตัวตนด้วย NextAuth.js

เส้นทางการเรียนรู้

หลักสูตรเก้าสิบห้าหลักสูตรดำเนินการจาก A1 ถึง C1 หลักสูตร A1 และ A2 สร้างหลักพื้นฐาน React การเรนเดอร์ JSX แอนิเมชัน CSS ความเพียงพอของที่เก็บในพื้นที่ และโหมดมืด หลักสูตร B1 สร้างความมั่นใจด้วยรูปแบบบริบท i18n React Spring Framer Motion ลากและวาง dnd-kit และตารางข้อมูลที่ซับซ้อนด้วย TanStack Table หลักสูตร B2 แก้ไขการเรนเดอร์และการจำทรงสัณฐาน Suspense การแยกโค้ด React Native สำหรับนักพัฒนา React การปรับใช้ไปยัง Vercel และ AWS และ Electron สำหรับแอปเดสก์ทอป ระดับ C1 จบลงด้วยหัวข้อขั้นสูง: สถาปัตยกรรมไมโครฟรอนต์เอนด์ SSR และการวิเคราะห์เชิงลึกของ Hydration Module Federation Islands Architecture with Astro การรวม WebAssembly Edge Rendering with Cloudflare Workers และ OpenTelemetry สำหรับการสังเกตการณ์ส่วนหน้า

วิธีการทำงาน

แต่ละหลักสูตรแบ่งออกเป็นบทเรียนที่สั้นและมีจุดมุ่งหมายที่คุณสมบูรณ์ในตัวแก้ไขโค้ดในตัวพร้อมความเห็นเชิงสดใส AI tutor มีให้ใช้ได้เมื่อใดก็ตามที่คุณติดขัดในแนวคิดหรือการทดสอบที่ล้มเหลว คุณสามารถทำงานผ่านเส้นทางตามลำดับหรือข้ามไปยังระดับที่ตรงกับประสบการณ์ปัจจุบันของคุณ

เริ่มเรียนรู้ →

วิธีการเรียนรู้ของคุณ

🎯
บทเรียนแบบโต้ตอบ
แบบฝึกหัดการเขียนโค้ดโดยตรงพร้อมข้อเสนอแนะแบบเรียลไทม์
🤖
ติวเตอร์ AI
ได้รับความช่วยเหลือแบบทันทีจาก AI ของเราเมื่อคุณติดขัด
💻
ตัวแก้ไขในตัว
เขียนและรันโค้ดโดยตรงในเบราว์เซอร์ของคุณ
🏆
ใบรับรอง
ได้รับใบรับรองเมื่อคุณเสร็จสิ้นหลักสูตร
หลักสูตร

88 หลักสูตร

ทุกหลักสูตรในเส้นทางการเรียนรู้ React Academy

01

เริ่มต้น React: แนวคิดและการตั้งค่า

A13 บทเรียน

เริ่มต้นด้วยพื้นฐาน React: คอมโพเนนต์ UI แบบประกาศ และวิธีที่การเปรียบเทียบความแตกต่างอัปเดต DOM ได้อย่างมีประสิทธิภาพ จากนั้นตั้งค่าโปรเจก…

02

พื้นฐาน JSX และการแสดงผล

A13 บทเรียนPRO

เรียนรู้กฎของ JSX: นิพจน์และแอตทริบิวต์ การส่งคืน fragments การแสดงรายการด้วยคีย์ เงื่อนไขอย่างง่าย และตัวเลือกการกำหนดสไตล์ (โมดูล CSS, สไ…

03

React DevTools และการดีบัก

A24 บทเรียนPRO

เชี่ยวชาญส่วนขยายเบราว์เซอร์ React DevTools เพื่อตรวจสอบโครงสร้างต้นไม้ของคอมโพเนนต์ วิเคราะห์การเรนเดอร์ และดีบักสถานะกับ props อย่างมีประ…

04

แอนิเมชันและการเปลี่ยนผ่าน CSS ใน React

A24 บทเรียนPRO

สร้างแอนิเมชันขณะเข้า ออก และเปลี่ยนสถานะอย่างราบรื่นใน React ด้วยการเปลี่ยนผ่านและคีย์เฟรมของ CSS โดยไม่ต้องใช้ไลบรารีแอนิเมชัน

05

การยกสถานะขึ้นและวิธีแก้ปัญหาการส่งพร็อพผ่านหลายชั้น

A24 บทเรียนPRO

แชร์สถานะระหว่างคอมโพเนนต์พี่น้องด้วยการยกสถานะขึ้น และทำความเข้าใจว่าเมื่อใดการส่งพร็อพผ่านหลายชั้นกลายเป็นปัญหาที่ควรแก้

06

พื้นที่จัดเก็บในเครื่องและการคงอยู่ของสถานะ

A24 บทเรียนPRO

คงสถานะของ React ไว้แม้โหลดหน้าใหม่ด้วย localStorage จัดการการซิงโครไนซ์ระหว่างแท็บ และเลือก API จัดเก็บข้อมูลของเบราว์เซอร์ให้เหมาะกับแต่ล…

07

โหมดมืดด้วย React

A24 บทเรียนPRO

สร้างระบบโหมดมืดที่แข็งแกร่งด้วยคุณสมบัติกำหนดเองของ CSS บริบท React และคิวรีสื่อ prefers-color-scheme โดยป้องกันการแสดงธีมผิดชั่วขณะ

08

Props และการประกอบ

A23 บทเรียนPRO

ส่งข้อมูลด้วย พร็อพส์ กำหนด ค่าเริ่มต้น อย่างง่ายผ่านการแยกโครงสร้าง ประกอบ UI ด้วย คอมโพเนนต์ลูก และเลือกใช้การประกอบแทนการสืบทอดเพื่อสร้า…

09

พื้นฐานสำคัญของสถานะและเหตุการณ์

A23 บทเรียนPRO

เรียนรู้ useState และการจัดการเหตุการณ์อย่างเชี่ยวชาญ: อัปเดตสถานะให้ถูกต้อง จัดการ onClick/onChange และเตรียมพร้อมสำหรับอินพุตแบบควบคุม

10

ฟอร์มและการตรวจสอบข้อมูล (เบื้องต้น)

A23 บทเรียนPRO

เรียนรู้การสร้าง ฟอร์มแบบควบคุม ที่มีอินพุตหลายรายการ ใช้การตรวจสอบข้อมูลเบื้องต้น และจัดการการส่งฟอร์มใน React ได้อย่างราบรื่น

11

พื้นฐานการกำหนดเส้นทาง

A23 บทเรียนPRO

ทำความเข้าใจการกำหนดเส้นทางฝั่งไคลเอ็นต์: SPA เปลี่ยนมุมมองโดยไม่ต้องโหลดหน้าเว็บใหม่ทั้งหมดได้อย่างไร รวมถึงเส้นทางและพารามิเตอร์เบื้องต้น…

12

useRef และ DOM

A23 บทเรียนPRO

เรียนรู้ useRef อย่างเชี่ยวชาญ: เก็บค่าข้ามการเรนเดอร์โดยไม่ทำให้เกิดการเรนเดอร์ซ้ำ เข้าถึงโหนด DOM และจัดการตัวจับเวลาอย่างปลอดภัย

13

การตรวจโค้ดและแบบแผน

A23 บทเรียนPRO

ดูแลโค้ดให้สะอาดด้วยกฎของ ESLint + React และจัดรูปแบบอัตโนมัติด้วย Prettier เพิ่มสคริปต์และแก้ปัญหาได้อย่างรวดเร็ว

14

คอมโพเนนต์แบบควบคุมและไม่ควบคุม

A22 บทเรียนPRO

เรียนรู้การใช้อินพุตแบบควบคุมและไม่ควบคุมอย่างเชี่ยวชาญ: เลือกใช้แต่ละแบบเมื่อใด รูปแบบการใช้ ref อย่างง่าย และค่าเริ่มต้นที่ปลอดภัย

15

React Strict Mode และแนวทางปฏิบัติที่ดี

B14 บทเรียนPRO

เรียนรู้ว่า StrictMode ทำอะไร คำเตือนใดที่แสดงขึ้น และหลักเกณฑ์การเขียนโค้ดที่ทำให้ดูแลแอป React ได้ง่ายขึ้น

16

พอร์ทัลและโมดัลใน React

B14 บทเรียนPRO

เรนเดอร์เนื้อหานอกลำดับชั้น DOM ของคอมโพเนนต์แม่ด้วย React Portals เพื่อสร้างโมดัล คำแนะนำแบบป๊อปอัป และเลเยอร์ซ้อนทับ

17

Children API และรูปแบบช่องเสียบใน React

B14 บทเรียนPRO

ทำงานกับ props.children และยูทิลิตี React.Children พร้อมนำ API ของคอมโพเนนต์แบบใช้ช่องเสียบที่ยืดหยุ่นมาใช้

18

คอมโพเนนต์แบบควบคุมโดยผู้ใช้และการอัปโหลดไฟล์

B14 บทเรียนPRO

ใช้อินพุตที่ไม่ได้ควบคุมด้วย useRef อ่านค่าจากอินพุตไฟล์ และจัดการขั้นตอนการอัปโหลดไฟล์ใน React

19

รูปแบบ Context และประสิทธิภาพของ React

B14 บทเรียนPRO

ออกแบบผู้ให้บริการ Context ที่ลดการเรนเดอร์ซ้ำให้น้อยที่สุดด้วยการจดจำค่า การแยก Context และรูปแบบตัวเลือก

20

การทำให้ React รองรับหลายภาษา (i18n)

B14 บทเรียนPRO

เพิ่มการรองรับหลายภาษาให้แอป React ด้วย react-i18next จัดการไฟล์คำแปล และรองรับการสลับภาษา

21

API เบราว์เซอร์ใน React

B14 บทเรียนPRO

ผสาน API เบราว์เซอร์ทรงพลัง ได้แก่ Clipboard, Geolocation, Notifications และ IntersectionObserver เข้ากับคอมโพเนนต์ React พร้อมการล้างทรัพย…

22

การหน่วงและจำกัดความถี่ใน React

B14 บทเรียนPRO

ป้องกันการเรนเดอร์ซ้ำและการเรียก API มากเกินไปด้วยรูปแบบ debounce และ throttle ในรูปฮุก React ที่นำกลับมาใช้ใหม่ได้สำหรับเหตุการณ์ค้นหา เลื…

23

การเติมข้อความอัตโนมัติในฟอร์มและการค้นหาแบบพิมพ์ล่วงหน้า

B14 บทเรียนPRO

สร้างคอมโพเนนต์เติมข้อความอัตโนมัติและค้นหาแบบพิมพ์ล่วงหน้าที่เข้าถึงได้และใช้งานด้วยแป้นพิมพ์ได้ตั้งแต่ต้นด้วยสถานะและรีฟของ React โดยไม่ต…

24

การจัดการแบบฟอร์มด้วย React Hook Form

B14 บทเรียนPRO

สร้างแบบฟอร์ม React ที่มีประสิทธิภาพและยืดหยุ่นด้วย React Hook Form ได้แก่ การลงทะเบียน การตรวจสอบความถูกต้อง การแสดงข้อผิดพลาด และการผสานก…

25

การจัดการสถานะด้วย Zustand

B14 บทเรียนPRO

ใช้ Zustand จัดการสถานะส่วนกลางในแอป React ได้แก่ สโตร์ แอ็กชัน ตัวเลือก การคงอยู่ และการผสานกับเครื่องมือพัฒนา

26

รูปแบบขั้นสูงของ React Router v6

B14 บทเรียนPRO

ก้าวข้ามเส้นทางพื้นฐานด้วยเลย์เอาต์ซ้อนกัน ตัวโหลด แอ็กชัน เส้นทางที่มีการป้องกัน และการจัดการสถานะพารามิเตอร์การค้นหา

27

TypeScript กับ React: การกำหนดชนิดให้คอมโพเนนต์และฮุก

B14 บทเรียนPRO

เพิ่ม TypeScript ให้โครงการ React กำหนดชนิดให้ props อีเวนต์ ฮุก Context และคอมโพเนนต์แบบเจเนอริกได้อย่างมั่นใจ

28

TanStack Table: ตารางข้อมูลซับซ้อน

B14 บทเรียนPRO

สร้างตารางข้อมูลระดับพร้อมใช้งานจริงที่มีการเรียงลำดับ การกรอง การแบ่งหน้า และการเลือกแถวด้วยสถาปัตยกรรมแบบไร้ส่วนแสดงผลอันทรงพลังของ TanSt…

29

Jotai: การจัดการสถานะแบบอะตอม

B14 บทเรียนPRO

จัดการสถานะ React ด้วยโมเดลอะตอมแบบเรียบง่ายของ Jotai ซึ่งประกอบอะตอมได้ สร้างค่าที่ได้มา จัดการงานอะซิงก์ และทำงานร่วมกับ React Suspense ไ…

30

SWR: การดึงข้อมูลโดย Vercel

B14 บทเรียนPRO

ใช้กลยุทธ์ stale-while-revalidate ของ SWR เพื่อดึงข้อมูลได้รวดเร็วและเชื่อถือได้ พร้อมการตรวจสอบซ้ำ การกลายพันธุ์ และการรองรับออฟไลน์โดยอัต…

31

dnd-kit: การลากและวางที่เข้าถึงได้

B14 บทเรียนPRO

สร้างอินเทอร์เฟซลากและวางใน React ที่เข้าถึงได้และเหมาะกับการสัมผัสด้วย dnd-kit ทั้งรายการเรียงลำดับ บอร์ดคัมบัง และการลากระหว่างหลายคอนเทน…

32

React Spring: แอนิเมชันตามฟิสิกส์

B14 บทเรียนPRO

สร้างแอนิเมชันใน React ที่ลื่นไหลตามฟิสิกส์ของสปริงด้วย react-spring ตั้งแต่การเปลี่ยนค่าพื้นฐานจนถึงการโต้ตอบซับซ้อนที่ขับเคลื่อนด้วยท่าทาง

33

เหตุการณ์ที่เซิร์ฟเวอร์ส่งและการสำรวจใน React

B14 บทเรียนPRO

ใช้งานฟีดข้อมูลแบบเรียลไทม์ใน React ด้วยเหตุการณ์ที่เซิร์ฟเวอร์ส่งและกลยุทธ์การสำรวจ พร้อมทำความเข้าใจข้อแลกเปลี่ยนเมื่อเทียบกับ WebSockets…

34

เจาะลึก useEffect

B13 บทเรียนPRO

ทำความเข้าใจ useEffect : ทำงานเมื่อใดเมื่อเทียบกับการเรนเดอร์ อาร์เรย์ dependency ควบคุมการทำงานอย่างไร และวิธีเขียนการล้างทรัพยากรที่ปลอดภ…

35

รูปแบบการดึงข้อมูล

B13 บทเรียนPRO

ออกแบบส่วนติดต่อผู้ใช้ข้อมูลที่รับมือสถานการณ์ต่าง ๆ ได้ดี: จัดการสถานะ กำลังโหลด ข้อผิดพลาด ไม่มีข้อมูล และ สำเร็จ พร้อมการแจ้งผลที่ชัดเจน…

36

Context และ useReducer

B13 บทเรียนPRO

แชร์สถานะระหว่างคอมโพเนนต์ที่อยู่ห่างกันด้วย Context เพื่อหลีกเลี่ยงการส่งพร็อพผ่านคอมโพเนนต์หลายชั้น ตั้งค่า Provider และอ่านค่าผ่าน useCo…

37

ฮุกแบบกำหนดเอง

B13 บทเรียนPRO

แยกตรรกะที่นำกลับมาใช้ซ้ำได้เป็น ฮุกแบบกำหนดเอง : กำหนดพารามิเตอร์ให้ชัดเจน ส่งคืนค่าหรือการกระทำที่คงที่ และจัดการเอฟเฟกต์ให้สะอาด

38

พื้นฐานสำคัญด้านการเข้าถึง

B13 บทเรียนPRO

สร้างส่วนติดต่อผู้ใช้ที่ทุกคนใช้งานได้: ใช้ความหมายเชิงโครงสร้างที่ถูกต้อง ป้ายกำกับและบทบาทที่ชัดเจน และจัดการโฟกัสแป้นพิมพ์เพื่อการนำทางท…

39

แอนิเมชันด้วย Framer Motion

B14 บทเรียนPRO

เพิ่มแอนิเมชันและการเปลี่ยนผ่านที่ลื่นไหลให้แอป React ด้วย Framer Motion ได้แก่ คอมโพเนนต์ motion รูปแบบ ท่าทาง และแอนิเมชันเลย์เอาต์

40

ขอบเขตจัดการข้อผิดพลาดและความทนทาน

B13 บทเรียนPRO

ดักจับข้อผิดพลาดขณะเรนเดอร์ด้วยขอบเขตจัดการข้อผิดพลาด แสดงทางเลือกสำรองที่ปลอดภัย และทำให้ส่วนที่เหลือของแอปยังตอบสนองได้

41

TypeScript กับ React (ทางเลือก)

B13 บทเรียนPRO

เพิ่มชนิดข้อมูลน้ำหนักเบาให้คอมโพเนนต์ React เริ่มจากพร็อพ แล้วแยก generic ที่นำกลับมาใช้ซ้ำได้เพื่อให้โค้ดส่วนติดต่อผู้ใช้ปลอดภัยและชัดเจน

42

โครงสร้างโปรเจกต์และแบบแผน

B13 บทเรียนPRO

จัดระเบียบแอป React: โฟลเดอร์ที่จัดตามฟีเจอร์ พื้นฐานส่วนติดต่อผู้ใช้ขนาดเล็กเทียบกับคอมโพเนนต์แบบประกอบ ฮุกและการทดสอบที่วางอยู่ร่วมกัน แล…

43

รายการเสมือนด้วย react-window

B24 บทเรียนPRO

แสดงรายการนับพันโดยไม่ทำให้ประสิทธิภาพลดลง ด้วยการใช้ react-window จำลองผลลัพธ์ของ DOM โดยแสดงเฉพาะสิ่งที่มองเห็นในพื้นที่แสดงผล

44

รูปแบบอะซิงโครนัสใน React: Promise และการทำงานพร้อมกัน

B24 บทเรียนPRO

จัดการการดำเนินการแบบอะซิงโครนัสใน React อย่างเหมาะสมด้วย useEffect, useTransition, useDeferredValue และ Suspense

45

รูปแบบ React: Render Props และ HOC

B24 บทเรียนPRO

ทำความเข้าใจ render props และคอมโพเนนต์ลำดับสูงในฐานะรูปแบบการใช้โค้ดซ้ำแบบดั้งเดิม ก่อนที่ฮุกจะเข้ามาแทนที่

46

useLayoutEffect เทียบกับ useEffect

B24 บทเรียนPRO

ทำความเข้าใจความแตกต่างเล็กน้อยแต่สำคัญระหว่าง useEffect และ useLayoutEffect ว่าแต่ละตัวทำงานเมื่อใดเทียบกับการคอมมิต DOM และเลือกใช้ให้ถูก…

47

Redux Toolkit และ RTK Query

B24 บทเรียนPRO

จัดการสถานะแอปที่ซับซ้อนด้วย slice และ thunk ของ Redux Toolkit พร้อม RTK Query สำหรับแคชสถานะจากเซิร์ฟเวอร์และการทำข้อมูลให้ตรงกัน

48

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์และฟีเจอร์ React 19

B24 บทเรียนPRO

ทำความเข้าใจ React Server Components ฮุก use() แอ็กชัน และ API อื่น ๆ ของ React 19 ที่เปลี่ยนวิธีไหลของข้อมูลในแอป

49

React Query: การจัดการสถานะจากเซิร์ฟเวอร์

B24 บทเรียนPRO

จัดการสถานะจากเซิร์ฟเวอร์ด้วย TanStack Query ได้แก่ การดึงข้อมูล การแคช การดึงข้อมูลเบื้องหลังซ้ำ การกลายพันธุ์ข้อมูล และการแบ่งหน้า

50

การทดสอบ React: การผสานรวมและ E2E

B24 บทเรียนPRO

เขียนการทดสอบการผสานรวมด้วย React Testing Library และการทดสอบตั้งแต่ต้นจนจบด้วย Playwright เพื่อตรวจสอบลำดับการใช้งานจริงของผู้ใช้

51

ระบบออกแบบคอมโพเนนต์และ Storybook

B24 บทเรียนPRO

จัดทำเอกสาร พัฒนา และทดสอบคอมโพเนนต์ส่วนติดต่อผู้ใช้ของ React แบบแยกอิสระด้วย Storybook พร้อมเรื่องราว CSF3 และส่วนเสริม

52

ส่วนติดต่อผู้ใช้แบบเรียลไทม์ด้วย WebSockets และ React

B24 บทเรียนPRO

สร้างส่วนติดต่อ React ที่อัปเดตแบบสดด้วย WebSockets และไลบรารีอย่าง Socket.IO สำหรับแชต การแจ้งเตือน และแดชบอร์ด

53

tRPC: API ที่ปลอดภัยด้านชนิดข้อมูลตั้งแต่ต้นจนจบ

B24 บทเรียนPRO

สร้าง API ที่ปลอดภัยด้านชนิดข้อมูลอย่างสมบูรณ์โดยไม่ต้องใช้สคีมาหรือสร้างโค้ดด้วย tRPC ซึ่งแชร์ชนิดข้อมูลระหว่างฟรอนต์เอนด์ React และแบ็กเอ…

54

Apollo Client และ React

B24 บทเรียนPRO

ผสาน GraphQL เข้ากับแอป React ด้วย Apollo Client ทั้งการคิวรี การกลายพันธุ์ การแคช และการทำให้ UI สอดคล้องกับข้อมูลเซิร์ฟเวอร์

55

UI เชิงคาดการณ์และรูปแบบการกลายพันธุ์

B24 บทเรียนPRO

สร้าง UI ที่รวดเร็วและตอบสนองดี โดยแสดงผลลัพธ์ทันทีก่อนเซิร์ฟเวอร์ยืนยัน พร้อมย้อนคืนอย่างถูกต้องเมื่อเกิดความล้มเหลวและใช้กลยุทธ์แก้ไขข้อข…

56

การเผยแพร่ไลบรารีคอมโพเนนต์ React

B24 บทเรียนPRO

จัดแพ็กเกจและเผยแพร่ไลบรารีคอมโพเนนต์ React ที่นำกลับมาใช้ใหม่ได้ไปยัง npm พร้อมจัดการเอาต์พุตคู่ ESM/CJS การพึ่งพาแบบเพียร์ การตัดโค้ดที่ไ…

57

การเรนเดอร์และการจดจำผลลัพธ์

B23 บทเรียนPRO

ทำความเข้าใจระยะ render และ commit ของ React ว่าต่างกันอย่างไร คอมโพเนนต์อัปเดตเมื่อใด และการจดจำผลลัพธ์ช่วยได้เมื่อใด

58

การเปลี่ยนผ่านและ Suspense (พื้นฐาน)

B23 บทเรียนPRO

เรียนรู้พื้นฐานส่วนติดต่อผู้ใช้แบบทำงานพร้อมกันด้วย useTransition : ทำให้การพิมพ์ยังตอบสนอง แสดงสัญญาณว่ากำลังรอ และเลื่อนการอัปเดตที่ไม่เร…

59

การแยกโค้ดและกลยุทธ์จัดการทรัพยากร

B23 บทเรียนPRO

โหลดเฉพาะสิ่งที่จำเป็นด้วยการแยกโค้ดของหน้าจอและวิดเจ็ต ใช้ React.lazy และ Suspense เพื่อให้แอปพร้อมใช้งานได้รวดเร็วยิ่งขึ้น

60

การทดสอบคอมโพเนนต์ React

B23 บทเรียนPRO

ตั้งค่าการทดสอบด้วย Vitest/Jest และ React Testing Library เรนเดอร์คอมโพเนนต์ ค้นหาด้วยบทบาทหรือป้ายกำกับ และเรียกใช้ในสภาพแวดล้อม jsdom

61

พื้นฐาน App Router ของ Next.js

B24 บทเรียนPRO

สร้างเว็บแอปแบบครบวงจรด้วย App Router ของ Next.js 14+ ได้แก่ การกำหนดเส้นทางตามไฟล์ เลย์เอาต์ คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ และข้อมูลเมตา

62

การดึงข้อมูลและการแคชใน Next.js

B24 บทเรียนPRO

ดึงข้อมูล แคช และตรวจสอบข้อมูลใหม่ใน App Router ของ Next.js ด้วยตัวเลือก fetch, unstable_cache และการตรวจสอบใหม่ตามคำขอ

63

การยืนยันตัวตนใน Next.js ด้วย NextAuth.js

B24 บทเรียนPRO

เพิ่มการยืนยันตัวตนให้แอป Next.js ด้วย Auth.js (NextAuth v5) ได้แก่ ผู้ให้บริการ OAuth ข้อมูลรับรอง เซสชัน และการป้องกันเส้นทาง

64

พื้นฐาน React Native สำหรับนักพัฒนา React

B24 บทเรียนPRO

ต่อยอดความรู้ React ไปสู่อุปกรณ์เคลื่อนที่ด้วยการเรียนรู้ primitive การจัดรูปแบบ การนำทาง และ API อุปกรณ์แบบเนทีฟของ React Native

65

การนำแอป React ไปใช้งาน: Vercel, AWS และ Docker

B24 บทเรียนPRO

นำแอป React และ Next.js ขึ้นใช้งานจริงด้วย Vercel, AWS S3/CloudFront และคอนเทนเนอร์ Docker พร้อมสายงาน CI/CD

66

การทำงานฝั่งเซิร์ฟเวอร์ของ React: ฟอร์มและการกลายพันธุ์

B24 บทเรียนPRO

ใช้ Server Actions ของ React 19 และการทำงานฟอร์มของ Next.js เพื่อจัดการการกลายพันธุ์ฝั่งเซิร์ฟเวอร์ ลดความจำเป็นของเส้นทาง API สำหรับรูปแบบ…

67

ความปลอดภัยของแอปพลิเคชัน React

B24 บทเรียนPRO

เสริมความปลอดภัยให้แอป React จาก XSS, CSRF และช่องโหว่อื่น ๆ ด้วยคำแนะนำเชิงปฏิบัติเกี่ยวกับนโยบายความปลอดภัยเนื้อหา การจัดการข้อมูลลับ และ…

68

ระบบโทเค็นการออกแบบสำหรับ React

B24 บทเรียนPRO

สร้างระบบโทเค็นการออกแบบที่ขยายได้เพื่อขับเคลื่อนไลบรารีคอมโพเนนต์ React หลายธีม ตั้งแต่การกำหนดโทเค็น ตัวแปร CSS การผสาน Tailwind จนถึง St…

69

Electron.js: แอปเดสก์ท็อปด้วย React

B24 บทเรียนPRO

สร้างแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์มด้วย Electron และฟรอนต์เอนด์ React ครอบคลุมการสื่อสาร IPC, API เนทีฟ และการจัดแพ็กเกจเพื่อแจกจ่าย

70

คอมโพเนนต์แบบประกอบ

B23 บทเรียนPRO

สร้างคอมโพเนนต์แบบประกอบ: คอมโพเนนต์แม่จัดเตรียม context และคอมโพเนนต์ลูกนำไปใช้เพื่อสร้าง API ที่ยืดหยุ่น

71

ฟอร์มขนาดใหญ่ (แบบพื้นฐานหรือใช้ตัวช่วยน้ำหนักเบา)

B23 บทเรียนPRO

สร้างฟอร์มขนาดใหญ่ด้วยส่วนประกอบเล็ก ๆ ที่แข็งแกร่ง: อาร์เรย์ฟิลด์ ส่วนแบบไดนามิก และขั้นตอนการตรวจสอบข้อมูลอย่างง่าย

72

การกำหนดเส้นทางขั้นสูง

B23 บทเรียนPRO

ก้าวข้ามพื้นฐาน: เลย์เอาต์ซ้อนกัน ตัวโหลดเส้นทางในเชิงแนวคิด และแนวคิดการดึงข้อมูลล่วงหน้าอย่างง่ายเพื่อการนำทางที่ราบรื่นยิ่งขึ้น

73

สถานะฝั่งเซิร์ฟเวอร์เทียบกับสถานะส่วนติดต่อผู้ใช้

B23 บทเรียนPRO

ทำความเข้าใจว่าสิ่งใดควรอยู่ในแคชของเซิร์ฟเวอร์ และสิ่งใดเป็นสถานะภายในของส่วนติดต่อผู้ใช้ ดึงข้อมูล รีเฟรช และหลีกเลี่ยงการปะปนของหน้าที่

74

รูปแบบสำหรับโมดัล/การแจ้งเตือน/ชั้นซ้อน

B23 บทเรียนPRO

สร้างชั้นซ้อนที่เข้าถึงได้: เรนเดอร์ผ่านพอร์ทัล คงโฟกัสไว้ภายใน และรองรับการปิดอย่างรวดเร็วด้วย Escape หรือพื้นหลัง

75

สร้าง วิเคราะห์ และเผยแพร่

B23 บทเรียนPRO

เตรียมแอปสำหรับใช้งานจริง: บิลด์สำหรับการพัฒนาเทียบกับการใช้งานจริง แผนผังต้นฉบับ ตัวแปรสภาพแวดล้อมอย่างง่าย และการตรวจสอบเล็ก ๆ เพื่อเผยแพ…

76

useImperativeHandle และ forwardRef

C14 บทเรียนPRO

เรียนรู้ API ของ React แบบ命令การ เปิดเผยค่าของอินสแตนซ์คอมโพเนนต์ที่กำหนดเองให้คอมโพเนนต์แม่ด้วย forwardRef และ useImperativeHandle สำหรับกร…

77

useSyncExternalStore: การสมัครรับข้อมูลจากแหล่งเก็บข้อมูลภายนอก

C14 บทเรียนPRO

เรียนรู้ฮุก useSyncExternalStore ของ React 18 ซึ่งเป็นวิธีที่ถูกต้องในการซิงโครไนซ์คอมโพเนนต์ React กับแหล่งสถานะภายนอก เช่น API ของเบราว์เ…

78

สถาปัตยกรรมไมโครฟรอนต์เอนด์ด้วย React

C14 บทเรียนPRO

แยกฟรอนต์เอนด์ React ขนาดใหญ่เป็นไมโครฟรอนต์เอนด์ที่นำไปใช้งานแยกกันได้ด้วย Module Federation และ single-spa

79

เจาะลึก React SSR และการไฮเดรต

C14 บทเรียนPRO

ทำความเข้าใจกระบวนการเรนเดอร์ฝั่งเซิร์ฟเวอร์ การไฮเดรต การไฮเดรตแบบเลือกส่วน และการสตรีม HTML ด้วย renderToPipeableStream ของ React

80

รูปแบบ TypeScript ขั้นสูงสำหรับ React

C14 บทเรียนPRO

ยกระดับทักษะ React TypeScript ด้วยยูเนียนแบบจำแนกชนิด ชนิดแบบแมป ชนิดแบบมีเงื่อนไข และ API คอมโพเนนต์ที่ปลอดภัยด้านชนิด

81

ประสิทธิภาพเว็บ: Core Web Vitals และ React

C14 บทเรียนPRO

วัดและปรับปรุง Core Web Vitals (LCP, INP, CLS) ในแอป React ด้วยเครื่องมือวิเคราะห์ประสิทธิภาพ การวิเคราะห์ชุดรวมโค้ด และการปรับแต่งอย่างตรง…

82

Monorepo และ Nx สำหรับโครงการ React

C14 บทเรียนPRO

จัดระเบียบแอป React หลายแอปและไลบรารีที่ใช้ร่วมกันใน monorepo ด้วย Nx พร้อมการจัดตารางงานอัจฉริยะและ CI ตามส่วนที่ได้รับผลกระทบ

83

สถาปัตยกรรม Islands ด้วย Astro และ React

C14 บทเรียนPRO

หลีกเลี่ยงการไฮเดรตทั้งหน้าโดยใช้สถาปัตยกรรม Islands ซึ่งไฮเดรตเฉพาะคอมโพเนนต์ React แบบโต้ตอบที่จำเป็นผ่าน Astro

84

การผสาน React และ WebAssembly

C14 บทเรียนPRO

ผสานโมดูล WebAssembly เข้ากับแอป React สำหรับงานที่ใช้การคำนวณสูง ตั้งแต่โมดูล Rust WASM จนถึงหน่วยความจำร่วมและเธรดผู้ปฏิบัติงาน

85

การเรนเดอร์ที่ขอบเครือข่าย: Cloudflare Workers และ React

C14 บทเรียนPRO

ให้บริการแอป React จากขอบเครือข่ายด้วยเวลาแฝงต่ำกว่าหนึ่งมิลลิวินาที โดยใช้ Cloudflare Workers, SSR แบบสตรีม และกลยุทธ์แคชเนทีฟสำหรับขอบเคร…

86

OpenTelemetry สำหรับการสังเกตฟรอนต์เอนด์ React

C14 บทเรียนPRO

เพิ่มเครื่องมือให้แอป React ด้วย OpenTelemetry เพื่อเก็บการติดตาม วัดประสิทธิภาพที่ผู้ใช้สัมผัสจริง และเชื่อมโยงเหตุการณ์ฟรอนต์เอนด์กับช่วง…

87

การสตรีม React และการโหลดแบบค่อยเป็นค่อยไป

C14 บทเรียนPRO

ใช้ SSR แบบสตรีมของ React 18 และ Suspense เพื่อส่ง HTML ไปยังเบราว์เซอร์ทีละส่วน ช่วยปรับปรุงประสิทธิภาพที่ผู้ใช้รับรู้โดยไม่ต้องรอให้ข้อมู…

88

Module Federation ด้วย React

C14 บทเรียนPRO

ใช้งาน Webpack Module Federation เพื่อสร้างและติดตั้งไมโครฟรอนต์เอนด์ React อย่างอิสระ พร้อมแชร์การพึ่งพา สถานะ และการกำหนดเส้นทางระหว่างแอ…

คำถามที่พบบ่อย

คำถามที่พบบ่อย

หลักสูตร React Academy ฟรีหรือไม่

ใช่ คุณสามารถเริ่มหลักสูตร React Academy ได้ฟรีและเสร็จสิ้นบทเรียนแบบโต้ตอบโดยไม่มีค่าใช้จ่าย การสมัครสมาชิก PRO ที่เป็นทางเลือกจะปลดล็อกเครื่องมือ AI ขั้นสูงและใบรับรองที่แชร์ได้

ฉันต้องมีประสบการณ์มาก่อนหรือไม่ในการเรียนรู้ JSX

ไม่ หลักสูตรเริ่มต้นด้วยพื้นฐานและค่อยๆ ไปสู่หัวข้อที่ซับซ้อนมากขึ้น ดังนั้นคุณสามารถเริ่มได้แม้ว่าจะไม่มีประสบการณ์ JSX มาก่อน

ฉันจะเรียนรู้ JSX บน CoddyKit ได้อย่างไร

คุณเรียนรู้โดยการลงมือทำ บทเรียนสั้น ๆ แบบโต้ตอบจับคู่คำอธิบายที่ชัดเจนกับแบบฝึกหัดการเขียนโค้ดที่ทำงานในเวลาจริง และติวเตอร์ AI ที่ทำงาน 24/7 ให้ความช่วยเหลือแบบบุคคลเมื่อคุณติดขัด

ฉันได้รับใบรับรองสำหรับการเสร็จสิ้น React Academy หรือไม่

ใช่ ผู้เรียน PRO สามารถสอบและได้รับใบรับรองการเสร็จสิ้นที่แชร์ได้พร้อมรหัสที่สามารถตรวจสอบได้สำหรับหลักสูตร React Academy

ฉันสามารถเรียนรู้ JSX บนโทรศัพท์ของฉันได้หรือไม่

ใช่ CoddyKit พร้อมใช้งานบนเว็บและเป็นแอปพลิเคชันแบบเนทีฟ iOS และ Android ดังนั้นคุณสามารถเรียนรู้ JSX บนอุปกรณ์ใดก็ได้และความคืบหน้าของคุณจะซิงค์ในทุกอุปกรณ์

เริ่มเรียน React Academy ตอนนี้

เข้าร่วมกับผู้เรียนนับพันคนที่กำลังเรียนรู้การเขียนโปรแกรมผ่านบทเรียนที่ขับเคลื่อนด้วย AI

เริ่มฟรี →ดูคอร์สทั้งหมด