เรียน React & ฝึกฝน

เรียนรู้ React ด้วยการลงมือเขียนจริง บทเรียน React JavaScript นี้จะพาคุณตั้งแต่ JSX บรรทัดแรก ไปจนถึง Hooks การจัดการสถานะ และแอปที่เสร็จสมบูรณ์ โดยทุกคอมโพเนนต์ที่คุณเขียนจะแสดงผลบนโทรศัพท์ของคุณทันทีในการพรีวิวแบบสด

88 คอร์สและ 324 บทเรียนแบบโต้ตอบ ระดับ A1 ถึง C1 อ่านแนวคิดสั้น ๆ พิมพ์โค้ดจริง แตะ Run แล้วดูผลลัพธ์ได้เลย ไม่ต้องใช้แล็ปท็อปและไม่ต้องตั้งค่าใด ๆ

เขียนโค้ดบนโทรศัพท์

• โปรแกรมแก้ไขโค้ดที่สร้างมาเพื่อ JSX พร้อมพรีวิวแบบสดที่แสดงผลคอมโพเนนต์ของคุณภายในแอป

• รันไทม์ (ReactDOM และ Babel) รวมอยู่ในแอป จึงรันโค้ดบนอุปกรณ์ ไม่ใช่บนเซิร์ฟเวอร์

• โปรเจกต์หลายไฟล์: นำเข้าคอมโพเนนต์หนึ่งไปใช้ในอีกคอมโพเนนต์หนึ่ง เช่นเดียวกับการสร้างแอปจริง

• แตะปุ่มที่แสดงผล พิมพ์ในฟอร์ม แล้วดู UI ตอบสนอง

ห้องทดลอง

• Hooks Lab: ดูการเปลี่ยนแปลงของสถานะและการเรนเดอร์ใหม่แต่ละครั้งขณะเกิดขึ้น

• ปุ่มปรับ Props: เปลี่ยน prop ด้วยแถบเลื่อน แล้วดูคอมโพเนนต์อัปเดต

• ตัววิเคราะห์การเรนเดอร์และไทม์ไลน์สถานะ (Pro): ค้นหาว่าคอมโพเนนต์ใดเรนเดอร์ใหม่และเพราะอะไร จากนั้นเลื่อนย้อนดูสถานะของคุณ

ทีละขั้น จากผู้เริ่มต้นสู่ขั้นสูง

• พื้นฐาน: JSX, คอมโพเนนต์, props, สถานะ, อีเวนต์, ลิสต์และคีย์, การเรนเดอร์แบบมีเงื่อนไข

• Hooks: useState, useEffect, useRef, useReducer, custom hooks, useLayoutEffect และอื่น ๆ

• ฟอร์มและการตรวจสอบความถูกต้อง, React Hook Form, อินพุตแบบควบคุมและไม่ควบคุม

• การจัดการสถานะ: Context, Redux Toolkit และ RTK Query, Zustand และ Jotai

• React Router, การดึงข้อมูล, TanStack Query, SWR และ UI แบบ optimistic

• TypeScript, การทดสอบ, Storybook, การช่วยการเข้าถึง และความปลอดภัย

• ประสิทธิภาพ: memoization, การแยกโค้ด, Suspense, transitions, ลิสต์แบบ virtualized

• React 19 และ Server Components, SSR และ hydration, streaming

• Next.js App Router, การดึงข้อมูล และการยืนยันตัวตน

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

• การนำไปใช้งาน, micro-frontends และ module federation

สร้างโปรเจกต์จริง

20 โปรเจกต์แบบมีคำแนะนำ ทีละขั้นเล็ก ๆ: ปุ่มไลก์ การ์ดโปรไฟล์ เครื่องคำนวณทิป เกมตอบคำถาม นาฬิกาจับเวลา ฟอร์มสมัครสมาชิก ตะกร้าสินค้า แกลเลอรีรูปภาพ ลิสต์แบบแบ่งหน้า แอป todo และอื่น ๆ แต่ละขั้นจะตรวจสอบว่าคอมโพเนนต์ของคุณทำงานจริงก่อนให้ไปต่อ

ฝึกฝนจนจำได้

• ภารกิจเขียนโค้ด 30 ภารกิจ (ง่าย ปานกลาง และยาก) เกี่ยวกับ hooks, การเรนเดอร์, ฟอร์ม, context และประสิทธิภาพ

• UI Match: สร้างคอมโพเนนต์เป้าหมายขึ้นใหม่ แล้วรับคะแนนด้านโครงสร้าง สไตล์ และข้อความ

• Bug Hunt: ค้นหาและแก้บั๊กในคอมโพเนนต์ที่ทำงานผิดพลาด

• Component Recall: พิมพ์ส่วนที่หายไปกลับเข้าไปในโค้ดที่คุณทำงานจนสำเร็จแล้ว ด้วยการทบทวนแบบเว้นระยะ

• แบบทดสอบ 50 คำถาม คำถามสัมภาษณ์ 50 ข้อ และชีตสรุป

• โจทย์ประจำวัน สถิติการต่อเนื่อง XP และกระดานจัดอันดับ

เมนเทอร์ AI (Pro)

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

ใบรับรอง (Pro)

สอบปลายภาคให้ผ่านและรับใบรับรองที่คุณแชร์ได้

ฟรีและ Pro

ฟรี: คอร์สแรก โปรเจกต์แบบมีคำแนะนำ 1 โปรเจกต์ ภารกิจเขียนโค้ด 2 ภารกิจ โปรแกรมแก้ไขโค้ดพร้อมพรีวิวแบบสด Hooks Lab ปุ่มปรับ props, Bug Hunt และการตรวจสอบ UI Match 3 ครั้งต่อวัน เวอร์ชันฟรีจะแสดงโฆษณา

Pro: ทั้ง 88 คอร์ส โปรเจกต์และภารกิจทั้งหมด เมนเทอร์ AI ตัววิเคราะห์การเรนเดอร์และไทม์ไลน์สถานะ การสอบเพื่อรับใบรับรอง และไม่มีโฆษณา

แอปนี้ให้บริการใน 22 ภาษา

React เป็นเครื่องหมายการค้าของ Meta Platforms, Inc. Next.js เป็นเครื่องหมายการค้าของ Vercel, Inc. แอปเรียนรู้นี้เป็นแอปอิสระ ไม่ได้มีส่วนเกี่ยวข้องกับหรือได้รับการรับรองจาก Meta หรือ Vercel

นโยบายความเป็นส่วนตัว: https://www.coddykit.com/terms/privacy-policy