คอร์ส Modern Web Frontend with React (Next.js - App Router - Typescript) เป็นการเรียนรู้เกี่ยวกับพื้นฐานของการพัฒนาเว็บแอปพลิเคชันด้วย ReactJS ซึ่งเป็นไลบรารี JavaScript ที่ใช้สำหรับสร้าง UI และอินเทอร์เฟซผู้ใช้ ผู้เรียนจะได้เรียนรู้เกี่ยวกับโครงสร้างของ React, การสร้างคอมโพเนนต์, การจัดการสถานะ, การเรียกใช้ API, และการทำ routing ในเว็บแอปพลิเคชัน

วัตถุประสงค์

• เพื่อให้ผู้เรียนมีความเข้าใจเกี่ยวกับพื้นฐานของ ReactJS และการพัฒนาเว็บแอปพลิเคชันด้วย React
• เพื่อให้ผู้เรียนสามารถสร้างและจัดการกับคอมโพเนนต์ต่าง ๆ ในเว็บแอปพลิเคชันด้วย React
• เพื่อให้ผู้เรียนสามารถเรียกใช้งานข้อมูลจาก API และจัดการกับสถานะของแอปพลิเคชันในรูปแบบของ React

ใครควรเข้าร่วมคอร์ส

• นักพัฒนาซอฟต์แวร์ที่ต้องการเรียนรู้เกี่ยวกับ ReactJS และการพัฒนาเว็บแอปพลิเคชัน
• นักพัฒนาที่มีประสบการณ์ในการพัฒนาเว็บไซต์และต้องการทำความเข้าใจในการใช้ ReactJS
• ผู้ที่สนใจเรียนรู้เกี่ยวกับการสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพด้วย ReactJS

สิ่งที่ผู้เรียนต้องมี

• ผู้เข้าร่วมคอร์สควรมีความรู้พื้นฐานเกี่ยวกับการเขียนโปรแกรมด้วยภาษา JavaScript
• ผู้เข้าร่วมคอร์สควรความรู้พื้นฐานเกี่ยวกับการพัฒนาเว็บแอปพลิเคชัน
• ผู้เข้าร่วมคอร์สควรมีความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript เพื่อให้เข้าใจเนื้อหาได้ดียิ่งขึ้น
• การเตรียมโปรแกรมพัฒนาที่จำเป็น เช่น Node.js และ npm (Node Package Manager) เพื่อใช้ในการสร้างและจัดการโปรเจค React
• การมีความสามารถในการใช้งาน Command Line Interface (CLI) เพื่อการสร้างโปรเจค React และการจัดการกับ dependencies ต่าง ๆ โดยใช้ npm
• คอมพิวเตอร์ที่มีเครื่องมือสำหรับการเขียนโปรแกรมเช่นโปรแกรม Text Editor หรือ Integrated Development Environment (IDE) ที่เหมาะสมสำหรับการพัฒนา React
• ความกระตือรือร้นในการเรียนรู้และการทำงานร่วมกับผู้อื่นในระหว่างการศึกษา การทำงานร่วมกับสมาชิกในทีมช่วยให้ผู้เรียนได้รับประสบการณ์ที่มีประโยชน์จากการแลกเปลี่ยนความรู้และประสบการณ์

ผู้เข้าร่วมทุกท่านจะได้รับ

• เอกสารคู่มือการอบรม
• อาหารกลางวันและอาหารว่าง
• ใบรับรองผ่านการอบรมหลักสูตร Modern Web Frontend with React (Next.js - App Router - Typescript)
• การดูแลเอาใจใส่เป็นอย่างดีจากวิทยากรและทีมงาน Staff
• สามารถเข้าร่วม Modern Web Frontend with React (Next.js - App Router - Typescript) ซ้ำได้ไม่จำกัดจำนวนครั้ง (จำกัดสิทธิ์เข้าร่วมซ้ำ 5 ท่านต่อรอบการอบรม หากท่านต้องการเข้าร่วม Workshop ซ้ำ กรุณาติดต่อ Facebook Page, Line, Email หรือช่องทางอื่น ๆ เพื่อสำรองที่นั่ง)
• หากท่านไม่สะดวกเข้าร่วมการอบรมในครั้งนี้ ท่านสามารถเลื่อนการเข้าร่วมอบรมได้ตามตารางการอบรม

เนื้อหาคอร์ส

1. History of Web Frontend Development
   • ประวัติศาสตร์ของการพัฒนาเว็บแอปพลิเคชันก่อนจะมีการพัฒนาแบบแยกระหว่าง Backend และ Frontend
2. Pros and Cons
   • ข้อดี ข้อเสีย ของการพัฒนาเว็บแอปพลิเคชันแบบแยก Backend และ Frontend
3. System Architecture Overview
   • ภาพรวมของการออกแบบเว็บแอปพลิเคชันแบบแยก Backend และ Frontend ในปัจจุบัน พร้อมกรณีศึกษา
4. ECMAScript and TypeScript
   • การเขียนจาวาสคริปต์สมัยใหม่ และพื้นฐานการเขียน Typescript
5. What is React? And why Next.js?
   • ทำความรู้จักกับ React และ React-powered frameworks
6. Workshop 1
   • Creating a Next.js app.
7. Project Structure
   • แนะนำโครงสร้างของ Next.js
8. HTML and JSX
   • JSX คืออะไร?
   • ความแตกต่างและข้อควรระวังระหว่าง Html tag และ JSX
9. Component Concept
   • อธิบายฟังก์ชันและหน้าที่ต่าง ๆ ที่จำเป็นต่อการพัฒนาเว็บแอปพลิเคชันด้วย React
   • การสร้าง Component เพื่อแยกส่วนประกอบที่ใช้งานบ่อย ๆ
   • การ Export และ Import ส่วนประกอบเข้ามาใช้งาน
   • การส่งค่าไปยังส่วนประกอบ (Component Pops)
10. Workshop 2
    • My First Component.
11. Tailwind CSS
    • แนะนำการใช้งาน Tailwind CSS เบื้องต้น
12. Workshop 3
    • My Home Page.
13. State: A Component's Memory
    • อธิบายฟังก์ชัน useState และวิธีการใช้งานเบื้องต้น
14. Workshop 4
    • Carousel banner.
15. Reacting to Input with State
    • การใช้งาน State ร่วมกับ Input
16. Workshop 5
    • Search box.
17. Sharing State Between Components
    • อธิบายการใช้ State ร่วมกับ Component อื่นๆ
18. Workshop 6
    • Search results.
19. Next.js Routing
    • อธิบายการสร้าง Route Path ในรูปแบบต่าง ๆ
    • โครงสร้างของ Page และ Layouts
    • การเปลี่ยนหน้า (Linking and Navigating)
20. Workshop 7
    • New search page.
21. Workshop 8
    • Products and Details.
22. Server Components and Client Components
    • อธิบายข้อแตกต่างและการใช้งาน Server Components และ Client Components
    • กรณีศึกษา
23. Next.js Data Fetching
    • อธิบายการเรียกใช้ API
    • การสร้างและเรียกใช้งาน Server Actions and Mutations
    • การใช้งาน formData และ useFormStatus
24. Workshop 9
    • Register.
25. Authentication Flow
    • อธิบายการวางโครงสร้างและหลักการของระบบยืนยันตัวตน (Authentication)
26. Workshop 10
    • Login.
27. Passing Data Deeply with Context
    • อธิบายหลักการ ความจำเป็น และวิธิการบริหารจัดการข้อมูลที่มีความซับซ้อน
    • กรณีศึกษา
28. Workshop 11
    • My Profile.
29. Error Handling and Middleware
    • อธิการหลักการทำ Error Handling ในแบบฉบับของ Next.js และ การทำงานของ Middleware
    • กรณีศึกษา
30. Workshop 12
    • Redirect when not logged in.
31. Scaling Up with Reducer and Context
    • อธิบายการใช้ Reducer และ State Action ร่วมกับ Context
    • กรณีศึกษา
32. Workshop 13
    • Add products to cart.
33. Synchronizing with Effects
    • อธิบายการทำงานของฟังก์ชัน useEffect และวิธีการใช้งานในรูปแบบต่าง ๆ
34. Workshop 14
    • Checkout!
35. Workshop 15
    • Order History.
36. Environment Variables and Deploying
    • อธิบายการใช้งาน Environment Variables และการ Deploy ในรูปแบบต่าง ๆ
37. Workshop 16
    • Hello World!