เรียน React & ฝึกฝน
เรียน React & ฝึกฝน — เรียนรู้การเขียนโปรแกรม React ด้วยการเขียน JSX และรันโค้ดบนโทรศัพท์ของคุณ
เรียน React & ฝึกฝน เป็นแอป iOS และ Android ที่เริ่มต้นใช้งานได้ฟรี สอน การเขียนโปรแกรม React สำหรับผู้เริ่มต้นที่มีพื้นฐาน HTML, CSS หรือ JavaScript เพียงเล็กน้อย รวมถึงนักพัฒนาที่เปลี่ยนมาจาก framework อื่น เขียน JSX ในเครื่องมือแก้ไขโค้ด แตะ Run แล้ว ดูคอมโพเนนต์ของคุณแสดงผลในตัวอย่างแบบสด ภายในแอป หลักสูตร 88 คอร์สและบทเรียน 324 บทจะพาคุณตั้งแต่คอมโพเนนต์แรก ผ่าน hooks และการจัดการ state ไปจนถึง Next.js พร้อมโปรเจกต์แนะนำ 20 โปรเจกต์ตลอดเส้นทาง
- ราคา
- ฟรี อัปเกรดเป็น Pro
- แพลตฟอร์ม
- iOS และ Android
- ภาษา
- 22
- การจัดระดับอายุ
- 4+
- เวอร์ชัน
- 82.6.1
- ต้องใช้
- iOS 15.1 หรือใหม่กว่า
- App Store
- 3.8 ★ (4)
คอมโพเนนต์ของคุณจะแสดงผลบนโทรศัพท์ ไม่ใช่บนเซิร์ฟเวอร์
runtime, ReactDOM และ Babel รวมอยู่ในแอปแล้ว ดังนั้น JSX ที่คุณเขียนจะถูกคอมไพล์และแสดงผลบนอุปกรณ์ คุณสามารถแตะปุ่มที่เพิ่งสร้าง พิมพ์ลงในฟอร์ม และดู UI ตอบสนองได้ทันที นี่คือวงจรป้อนกลับที่ช่วยให้เข้าใจ hooks ได้อย่างแท้จริง
คืออะไร
เรียน React & ฝึกฝน คือคอร์ส React ที่เริ่มเรียนได้ฟรีสำหรับ iOS และ Android มี 88 คอร์สและบทเรียนแบบโต้ตอบ 324 บท ตั้งแต่ JSX บรรทัดแรกไปจนถึง hooks, การจัดการ state, React 19 และ Next.js App Router เครื่องมือแก้ไขในตัวจะคอมไพล์โค้ดบนอุปกรณ์และแสดงผลคอมโพเนนต์ในตัวอย่างแบบสด ส่วนโปรเจกต์แนะนำ 20 โปรเจกต์จะตรวจสอบแต่ละขั้นก่อนให้คุณไปต่อ แอปนี้เป็นแอปเรียนรู้แบบอิสระ และไม่มีส่วนเกี่ยวข้องกับ Meta หรือ Vercel
ภายในแอป
หน้าตาเป็นอย่างไร
คอร์ส
คอร์ส React ครอบคลุมอะไรบ้าง
88 คอร์สจากรายการคอร์สของแอปเอง เรียงลำดับตามแนวทางที่ผู้เริ่มต้นมักใช้เรียน React
React Kickoff, JSX และ Props & Composition
คอมโพเนนต์, UI แบบประกาศโครงสร้าง และวิธีที่ React อัปเดต DOM จากนั้นเรียนกฎของ JSX การเรนเดอร์รายการ และการส่งข้อมูลลงไปด้วย props
State, Events, Forms และ useRef
useState และการจัดการอีเวนต์ ฟอร์มแบบควบคุมพร้อมการตรวจสอบข้อมูล และ useRef สำหรับค่าหรือการเข้าถึง DOM ที่ไม่ทำให้เกิดการเรนเดอร์
useEffect, Data Fetching และ Custom Hooks
เรียนว่าเอฟเฟกต์ทำงานเมื่อใด อาร์เรย์ dependency สถานะกำลังโหลดและข้อผิดพลาดสำหรับการเรียก API รวมถึงการแยกตรรกะที่นำกลับมาใช้ซ้ำได้เป็น hooks ของคุณเอง
Context, Redux Toolkit และ Zustand
แชร์ state โดยไม่ต้องส่งต่อ props หลายทอดด้วย Context และ useReducer จากนั้นเรียน Redux Toolkit พร้อม RTK Query, Zustand และ Jotai สำหรับแอปขนาดใหญ่ขึ้น
Routing, React Query และ Forms at Scale
การกำหนดเส้นทางฝั่งไคลเอนต์และรูปแบบการใช้งาน React Router, server state ด้วย TanStack Query และ SWR, React Hook Form และ UI แบบ optimistic
ประสิทธิภาพ การทดสอบ และ TypeScript
การเรนเดอร์และ memoisation, การแบ่งโค้ด, รายการแบบ virtualised, การทดสอบด้วย React Testing Library และการกำหนดชนิดให้คอมโพเนนต์และ hooks
React 19, Server Components และ Next.js
Server Components และ Actions, SSR และ hydration จากนั้นเรียน Next.js App Router พร้อมการดึงข้อมูล การแคช และการยืนยันตัวตน
ทำงานอย่างไร
บทเรียนทำงานอย่างไร
บทเรียนจะเริ่มจากแนวคิดสั้น ๆ แล้วต่อด้วยโค้ดที่คุณเขียนและรันทันที ทำให้แนวคิดและผลลัพธ์อยู่บนหน้าจอเดียวกัน
อ่านแนวคิดหนึ่งเรื่อง
เปิดคอร์สจากเส้นทางการเรียนรู้แล้วอ่านบทเรียนสั้น ๆ เช่น วิธีอัปเดต state หรือเหตุผลที่ list ต้องมี keys ภาพรวมของคอร์สจะแสดงว่าบทเรียนใดเรียนฟรี เพื่อให้คุณเห็นรูปแบบการเรียนก่อนตัดสินใจ
เขียน JSX แล้วแตะ Run
พิมพ์คอมโพเนนต์ในเครื่องมือแก้ไขโค้ดแล้วรัน ตัวอย่างแบบสดจะแสดงผลคอมโพเนนต์ของคุณภายในแอป คุณจึงคลิกปุ่ม พิมพ์ลงในช่องกรอกข้อมูล และดูได้ว่าโค้ดทำงานอย่างไร
ตรวจสอบ แล้วต่อยอด
แบบทดสอบ ภารกิจเขียนโค้ด และโปรเจกต์แนะนำจะยืนยันว่าคุณเข้าใจแนวคิดแล้ว ส่วน AI mentor จะอธิบาย hook หรือข้อผิดพลาดที่คุณอ่านไม่ออก Bug Hunt และ UI Match จะช่วยให้คุณฝึกฝนแนวคิดนั้นอีกครั้ง
มีอะไรอยู่ข้างใน
สิ่งที่มาพร้อมกับแอป
88
คอร์ส, บทเรียน 324 บท
ตั้งแต่ JSX, props และ state ผ่าน custom hooks, forms, Context และ Redux Toolkit ไปจนถึง Server Components, SSR และ Next.js App Router โดยจัดกลุ่มตั้งแต่ A1 ถึง C1
Live
เครื่องมือแก้ไขพร้อมตัวอย่างแบบสด
เครื่องมือแก้ไขโค้ดที่สร้างมาเพื่อ JSX โดยแสดงผลคอมโพเนนต์ภายในแอป โปรเจกต์แบบหลายไฟล์ช่วยให้คุณ import คอมโพเนนต์หนึ่งไปใช้อีกคอมโพเนนต์ได้ เช่นเดียวกับการสร้างแอปจริง
20
โปรเจกต์แนะนำ
สร้างปุ่มถูกใจ การ์ดโปรไฟล์ เครื่องคำนวณทิป เกมตอบคำถาม ตะกร้าสินค้า และอื่น ๆ ทีละขั้นตอนเล็ก ๆ แต่ละขั้นจะตรวจสอบว่าคอมโพเนนต์ทำงานได้จริง
Lab
Hooks Lab และปุ่มปรับ props
ดูการเปลี่ยนแปลงของ state และการ render ใหม่ทุกครั้งที่เกิดขึ้น พร้อมปรับ prop ด้วยแถบเลื่อนเพื่อดูคอมโพเนนต์อัปเดต ตัววิเคราะห์ประสิทธิภาพการ render และไทม์ไลน์ state เป็นส่วนหนึ่งของ Pro
30
ภารกิจเขียนโค้ด
ภารกิจระดับง่าย ปานกลาง และยากเกี่ยวกับ hooks, rendering, forms, context และ performance รวมถึง UI Match, Bug Hunt และ Component Recall ที่ใช้การทบทวนแบบเว้นระยะ
AI
AI mentor
ขอคำอธิบาย ให้ AI ตรวจสอบโค้ดและเสนอวิธีแก้ หรือสร้างบทเรียนแบบกำหนดเองในหัวข้อใดก็ได้ AI mentor และการสอบรับใบรับรองเป็นส่วนหนึ่งของ Pro
ที่มา
จริง ๆ แล้วคุณต้องเข้าใจอะไรบ้างจึงจะเขียน React ได้ และควรเรียนรู้ตามลำดับใด
React คือไลบรารี JavaScript สำหรับสร้างอินเทอร์เฟซผู้ใช้จากคอมโพเนนต์ขนาดเล็กที่นำกลับมาใช้ซ้ำได้ และจะวาดใหม่เมื่อข้อมูลเปลี่ยน ผู้เริ่มต้นส่วนใหญ่มักติดขัดไม่ใช่ที่ไวยากรณ์ แต่เป็นแนวคิดเบื้องหลัง เช่น render คืออะไร อะไรนับเป็น state และ effects ทำงานเมื่อใด การเรียนรู้แนวคิดเหล่านี้ตามลำดับ พร้อมมีสิ่งที่แสดงบนหน้าจอให้ทดสอบแต่ละแนวคิด จะเร็วกว่าการอ่านทั้งหมดพร้อมกัน
คอมโพเนนต์และ propsหน่วยสำหรับนำกลับมาใช้ซ้ำ
คอมโพเนนต์คือฟังก์ชันที่ส่งคืนส่วนหนึ่งของอินเทอร์เฟซ ส่วน props คืออินพุตที่ได้รับจาก parent เนื่องจากข้อมูลไหลลงผ่าน props คุณจึงอ่านคอมโพเนนต์และคาดเดาได้ว่าคอมโพเนนต์จะแสดงอะไร
Stateสิ่งที่เปลี่ยนแปลงไปตามเวลา
State คือข้อมูลที่คอมโพเนนต์จดจำไว้ระหว่างการ render เช่น ข้อความในช่องกรอกข้อมูล หรือสถานะว่าเมนูเปิดอยู่หรือไม่ การอัปเดต state จะกำหนดให้เกิดการ render ใหม่ ซึ่งเป็นกลไกเดียวที่อยู่เบื้องหลังหน้าจอแบบโต้ตอบแทบทุกหน้าจอ
Hooks และ effectsจุดที่ผู้เริ่มต้นมักติดขัด
Hooks อย่าง useState, useRef และ useReducer ช่วยให้คอมโพเนนต์เก็บ state และเข้าถึง DOM ได้ useEffect จะรันโค้ดหลังการ render และ dependency array ที่ไม่ถูกต้องคือสาเหตุที่พบบ่อยที่สุดของลูปและค่าที่ล้าสมัย
การ render และการ render ใหม่เหตุผลที่ทำให้แอปดูช้า
คอมโพเนนต์จะ render ใหม่เมื่อ state หรือ props เปลี่ยน และคอมโพเนนต์ที่อยู่ภายในก็เช่นกัน การรู้ว่าอะไรเป็นตัวกระตุ้นให้เกิดการ render คือจุดเริ่มต้นของการแก้ปัญหาด้านประสิทธิภาพทุกประเภท ตั้งแต่ memoisation ไปจนถึง code splitting
เหมาะกับคุณไหม
เหมาะกับใคร — และไม่เหมาะกับใคร
เหมาะกับคุณหากคุณ
- รู้จัก HTML, CSS หรือ JavaScript มาบ้าง และอยากเริ่มเรียน React อย่างถูกต้อง
- เป็นนักพัฒนาจากเฟรมเวิร์กอื่นที่ต้องการย้ายมาใช้ React อย่างรวดเร็ว
- เรียนรู้ได้ดีที่สุดเมื่อผลลัพธ์ปรากฏบนหน้าจอทันทีที่โค้ดทำงาน
- กำลังสร้างพอร์ตโฟลิโอจากโปรเจกต์ขนาดเล็กและต้องการขั้นตอนที่มีแนวทางกำกับ
- กำลังเตรียมตัวสัมภาษณ์งาน frontend และต้องการคำถามไว้ฝึกซ้อม
ไม่ใช่เครื่องมือที่เหมาะ หากคุณ
- ไม่เคยใช้ JavaScript มาก่อน เพราะคอร์สนี้ต้องมีพื้นฐานเล็กน้อย
- ต้องการสร้างและดีพลอยโปรเจกต์เต็มรูปแบบ ซึ่งยังคงต้องใช้แล็ปท็อป
- คาดหวังว่าทุกอย่างจะฟรี เพราะคอร์สแรกเรียนฟรี และ Pro จะปลดล็อกเนื้อหาที่เหลือ
- ต้องการคอร์สอย่างเป็นทางการจากทีม React เนื่องจากแอปนี้เป็นแอปอิสระ
คำถาม
คำถามที่พบบ่อย
เรียนการเขียนโปรแกรม React บนโทรศัพท์ได้ไหม
แนวคิดพื้นฐาน คอมโพเนนต์ props state และ hooks สามารถเรียนบนโทรศัพท์ได้ หากคุณรันสิ่งที่เขียนได้ เรียน React & ฝึกฝน รวม ReactDOM และ Babel มาให้ จึงเรนเดอร์ JSX เป็นพรีวิวแบบเรียลไทม์บนอุปกรณ์ได้ แล็ปท็อปจะมีประโยชน์เมื่อคุณเริ่มสร้างและดีพลอยโปรเจกต์ขนาดใหญ่ขึ้น
ต้องรู้ JavaScript มาก่อนหรือไม่จึงจะเรียน React ได้
มีพื้นฐานเล็กน้อยจะช่วยได้ เรียน React & ฝึกฝน เหมาะสำหรับผู้ที่รู้จัก HTML, CSS หรือ JavaScript มาบ้าง เช่น ตัวแปร ฟังก์ชัน และอาร์เรย์ หากคุณไม่เคยเขียน JavaScript มาก่อน ควรเรียน JavaScript ก่อน เพราะบทเรียน React สมมติว่าคุณอ่านโค้ดเหล่านี้ได้
props และ state แตกต่างกันอย่างไร
props คือข้อมูลนำเข้าที่คอมโพเนนต์ได้รับจาก parent และไม่ควรเปลี่ยนแปลง ส่วน state คือข้อมูลที่คอมโพเนนต์เป็นเจ้าของและอัปเดตไปตามเวลา ใน เรียน React & ฝึกฝน คุณจะเห็นเรื่องนี้ได้ใน Hooks Lab ซึ่งแสดงการเปลี่ยนแปลงของ state และการเรนเดอร์ใหม่แต่ละครั้ง รวมถึงปุ่มปรับค่า props ที่ให้คุณเปลี่ยน prop ด้วยแถบเลื่อน
แอปสอน hooks อย่าง useEffect หรือไม่
สอน เรียน React & ฝึกฝน ครอบคลุม useState, useEffect, useRef, useReducer, custom hooks และ useLayoutEffect บทเรียนแยกจะอธิบายว่าเอฟเฟกต์ทำงานเมื่อใด อาร์เรย์ dependency และข้อผิดพลาดที่พบบ่อย พร้อมโหมด Bug Hunt สำหรับค้นหาบั๊กในคอมโพเนนต์ที่ทำงานผิดพลาด
React เหมือนกับ React Native หรือไม่ และแอปสอนทั้งสองอย่างหรือเปล่า
ไม่เหมือนกัน React คือไลบรารีสำหรับสร้าง user interfaces ส่วน React Native ใช้แนวคิดเดียวกันเพื่อสร้างแอปมือถือ เรียน React & ฝึกฝน สอน React สำหรับเว็บเป็นหลัก และคอร์สพื้นฐาน React Native ช่วยให้นักพัฒนาเว็บนำทักษะเหล่านี้ไปใช้กับอุปกรณ์มือถือได้
เรียน React & ฝึกฝน ครอบคลุม Next.js และ React 19 หรือไม่
ครอบคลุม คอร์สต่าง ๆ สอนฟีเจอร์ของ React 19 และ Server Components, SSR และ hydration, streaming รวมถึง Next.js App Router พร้อมการดึงข้อมูล การแคช และการยืนยันตัวตน นอกจากนี้ยังมีคอร์สพื้นฐาน React Native สำหรับนักพัฒนาเว็บด้วย
สร้างโปรเจกต์ประเภทใดได้บ้าง
มีโปรเจกต์แบบมีแนวทางกำกับ 20 โปรเจกต์ โดยสร้างทีละขั้นตอนเล็ก ๆ ได้แก่ ปุ่มกดไลก์ การ์ดโปรไฟล์ เครื่องคำนวณทิป เกมตอบคำถาม นาฬิกาจับเวลา ฟอร์มสมัครสมาชิก ตะกร้าสินค้า image carousel รายการแบบแบ่งหน้า และแอป todo แต่ละขั้นตอนจะตรวจสอบว่าคอมโพเนนต์ทำงานได้ก่อนให้คุณไปต่อ
เรียน React & ฝึกฝน เรียนฟรีหรือไม่
ดาวน์โหลดฟรี เวอร์ชันฟรีประกอบด้วยคอร์สแรก โปรเจกต์แบบมีแนวทางกำกับหนึ่งโปรเจกต์ coding missions สองรายการ โปรแกรมแก้ไขโค้ดพร้อมพรีวิวแบบเรียลไทม์ Hooks Lab ปุ่มปรับค่า props Bug Hunt และการตรวจสอบ UI Match วันละสามครั้ง พร้อมโฆษณา Pro จะปลดล็อกคอร์ส โปรเจกต์ และ missions ทั้งหมด ผู้ช่วย AI, render profiler, การสอบรับประกาศนียบัตร และลบโฆษณา
มีใบรับรองหรือการเตรียมตัวสัมภาษณ์หรือไม่
เมื่อสอบปลายคอร์สผ่าน คุณจะได้รับใบรับรองที่แชร์ได้ ซึ่งเป็นส่วนหนึ่งของ Pro สำหรับการสัมภาษณ์ มีคำถามสัมภาษณ์ 50 ข้อ แบบทดสอบ 50 ข้อ และ cheat sheet สำหรับทบทวนแนวคิดสำคัญ
โค้ดทำงานบนเซิร์ฟเวอร์หรือไม่
ไม่ รันไทม์ถูกรวมไว้ในแอปแล้ว โค้ดของคุณจึงถูกคอมไพล์และเรนเดอร์บนอุปกรณ์ นั่นทำให้คุณแตะปุ่มที่สร้างขึ้นและเห็น UI ตอบสนองได้ภายในพรีวิว
รองรับภาษาและแพลตฟอร์มใดบ้าง
เรียน React & ฝึกฝน ใช้งานได้บน iOS และ Android และรองรับ 22 ภาษา แอปนี้จัดอยู่ในระดับ 4+ และต้องใช้ iOS 15.1 ขึ้นไปบน iPhone
เริ่มต้นใช้งาน
เรนเดอร์คอมโพเนนต์แรกของคุณวันนี้
เริ่มต้นใช้งานได้ฟรีบน iOS และ Android พร้อมรองรับ 22 ภาษา
เพิ่มเติมจาก CoddyKit
ใช้งานได้บน iOS และ Android