CODE SASS

คอร์สออนไลน์บทความ

คอร์สสอนการพัฒนาเว็บด้วย React สำหรับ Front End ยุคใหม่

เรียนรู้การพัฒนาเว็บสมัยใหม่ตั้งแต่เริ่มต้นด้วย React, Bootstrap, React Router, React Hook Form และ Redux Toolkit พร้อมสร้าง Real World โปรเจคไปกับระบบขายสินค้า

1,590 บาท฿2,950

วิดีโอยาวกว่า

7 ชั่วโมง 50 นาที

บทเรียนกว่า

59 บทเรียน

เข้าชมได้ทุกเมื่อ

ไม่จำกัดเวลา

มีใบ Certificate

พร้อมแบบทดสอบ

ทำไมต้องคอร์สนี้?

ผู้เรียนจะได้ใช้งาน React กับไลบรารี่ยอดนิยมทั้ง Redux Toolkit, React Router, React Hook Form เป็นต้นผ่านการลงมือปฏิบัติจริงผ่านการรังสรรค์ผลงานออกมาเป็น Workshop ระบบ POS เพื่อการขายสินค้าออนไลน์

Workshop

เรียนรู้ด้วยโปรเจคที่ใช้งานได้จริง

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

Bootstrap

สร้าง UI สวยงามด้วย Bootstrap

Bootstrap เป็นชุดของ CSS ยอดนิยมที่ใช้สร้าง UI อย่างสวยงาม คอร์สของเราจะนำ Bootstrap มาใช้ควบคู่กับ React เช่นกัน

Redux Toolkit

Redux Toolkit

ผู้เรียนจะได้เรียนรู้วิธีการแชร์ข้อมูลข้ามเพจและคอมโพแนนท์ผ่าน Redux และ Redux Toolkit

React Hook Form

ทำงานกับฟอร์มอย่างมีประสิทธิภาพ

เราสอนใช้ React Hook Form ไลบรารี่ยอดนิยมในการจัดการฟอร์มและการตรวจสอบข้อมูลในฟอร์ม

React Router

เปลี่ยนหน้าเพจด้วย React Router

ผู้เรียนจะได้เรียนรู้การใช้งาน React Router เพื่อควบคุมการเปลี่ยนหน้าเพจและการกำหนด path บน UI

RESTful API

เชื่อมต่อ RESTful API ด้วย Axios

Workshop ของเราจะดึงข้อมูลจากเว็บเซอร์วิสแบบ RESTful API มาใช้งาน ผู้เรียนจะได้เห็นวิธีใช้ React เพื่อเชื่อมต่อกับ API

ทำไมต้องเรียนกับโค้ดศาสตร์?

เนื้อหาที่ครอบคลุม สั้น กระชับ จากผู้สอนมืออาชีพ พร้อมแบบฝึกหัดที่จะช่วยยกระดับการเรียนรู้ของคุณ เมื่อผู้เรียนผ่านการทดสอบท้ายคอร์ส รับทันทีใบ Certification เพื่อนำไปอัพเกรดโปรไฟล์

เนื้อหาครอบคลุม
เนื้อหาครอบคลุม

ไม่ใช่เพียงพื้นฐาน แต่เราสอนเนื้อหาหลากหลายให้ครอบคลุมทั้งการใช้ React และหลักการปฏิบัติที่ดีในการออกแบบคอมโพแนนท์

มีแบบฝึกหัดให้ทำ
มีแบบฝึกหัดให้ทำ

เราเชื่อว่าการเรียนรู้ที่ดีต้องหมั่นฝึกฝน เราจึงเตรียมแบบทดสอบไว้ให้ผู้เรียนทดลองทำด้วยตนเอง

ใบรับรองหลักสูตร
ใบรับรองหลักสูตร

เมื่อผู้เรียนผ่านการทดสอบท้ายคอร์ส รับใบ Certificate เพื่ออัพโปรไฟล์ได้ทันที

คอร์สนี้เหมาะกับใคร?

ผู้สนใจในการพัฒนาเว็บสมัยใหม่ด้วย React โดยมีพื้นฐานการเขียนโปรแกรมในภาษา JavaScript, HTML และ CSS
ผู้เรียนที่ต้องการปรับพื้นฐานการใช้งาน React ให้เป็นปัจจุบัน
ผู้ที่ต้องการเข้าใจหลักการพัฒนาตามสถาปัตยกรรมแบบ Client/Server
ผู้ต้องการ Workshop เพื่อเห็นการพัฒนา React อย่างเป็นรูปแบบ
ผู้ที่ต้องการใบ Certification เพื่อรับรองการผ่านการพัฒนาเว็บสมัยใหม่ด้วย React

คำถามพบบ่อย (FAQ)

คอร์สนี้มีใบ Certificate แจกให้กับผู้เรียนครับ ภายหลังที่ผู้เรียนทำแบบทดสอบหลังเรียน และผ่านการทดสอบด้วยคะแนนสอบ 70% ขึ้นไป ทางเว็บจะดำเนินการออกใบรับรองให้ภายใน 24 ชั่วโมงครับ

คอร์สนี้ผู้เรียนสามารถเข้าชมได้ตลอดเวลา ไม่จำกัดเวลาเข้าชมครับ ยกเว้นกรณีสั่งซื้อในนามบริษัท/องค์กร/หน่วยงาน ระยะเวลาการเข้าชมคอร์สจะเป็น 1 ปี ครับ

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

เนื้อหาบทเรียน

  • บทที่ 1: แนะนำคอร์สเรียน

    แนะนำคอร์สเรียนและ Workshop ที่จะได้ลงมือปฏิบัติในคอร์สเรียนนี้

    • ภาพรวมของคอร์สนี้
      ตัวอย่าง
    • Code และไฟล์อื่น ๆ สำหรับโปรเจคนี้
    • การเชื่อมต่อ UI กับ API ในคอร์สนี้
  • บทที่ 2: ทบทวน JavaScript ที่สำคัญ

    เรียนรู้ JavaScript สมัยใหม่ที่สำคัญสำหรับการเขียนโค้ดในคอร์สนี้

    • Nodemon
    • let และ const
    • Or, Optional Chaining และ Nullish Coaleasing
    • Destructuring
    • Arrow Functions
    • Methods
    • Map และ Filter
  • บทที่ 3: การใช้งาน React

    React คืออะไร เรียนรู้การใช้งาน React กับหลักการที่สำคัญ

    • การติดตั้งและใช้งาน React
    • Component-Based Design
    • JSX
    • Dynamic List
    • ฟอร์แมตโค้ดด้วย Prettier
    • Fragment
    • การใช้งาน Props
    • useState
    • useEffect
    • การดึงข้อมูลจาก API ด้วย axios
    • การสร้าง React Hooks
  • บทที่ 4: การใช้ React กับ Bootstrap

    เรียนรู้การจัด UI ด้วยการใช้ Bootstrap ผ่าน React

    • การใช้งาน React Bootstrap
    • Utilities Classes
    • Container
    • Grid System
    • Cards
  • บทที่ 5: Form Management

    เรียนรู้การจัดการฟอร์มด้วย React Hook Form

    • Form Component
    • React Hook Form
    • การตรวจสอบความถูกต้องของฟอร์ม
    • Form Default Value
  • บทที่ 6: React Router

    เรียนรู้การจัดการการเปลี่ยนหน้าเพจด้วย React Router

    • การติดตั้งและใช้งาน React Router
    • Outlet
    • Link
    • Navigate
    • useParams
    • useNavigate
  • บทที่ 7: Redux และ Redux Toolkit

    เรียนรู้การจัดการ Global State ด้วย Redux Toolkit

    • หลักการของ Redux Toolkit
    • createSlice
    • configureStore
    • useSelector
    • useDispatch
    • Redux DevTools
  • บทที่ 8: [Workshop] ระบบ POS ขายสินค้าออนไลน์

    ประมวลผลความรู้ด้วยการสร้าง Workshop ระบบขายสินค้าออนไลน์

    • ภาพรวมของ workshop
    • โครงสร้างโปรเจค
    • Layout Component
    • หน้าแสดงผล Products ทั้งหมด
    • การตั้งค่า Env ใน .env
    • การแสดงผล Product Item
    • cartSlice
    • หน้าจัดการตะกร้าสินค้า
    • ส่วนแสดงผล Orders
    • Product Form
    • Product Details Component
    • หน้าจัดการการ Edit Form
    • uiSlice
  • บทที่ 9: Deployment

    เรียนรู้การ deploy โค้ดสู่ Production บนบริการฟรีของ Vercel

    • แนะนำ Vercel
    • Git
    • Deploy
  • บทที่ 10: Certificate Exam

    แบบทดสอบท้ายคอร์ส

    • แบบทดสอบ