Modern Web Frontend with React (Next.js - App Router - Typescript)

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

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

• เอกสารคู่มือการอบรม
• อาหารกลางวันและอาหารว่าง
• ใบรับรองผ่านการอบรมหลักสูตร 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 หรือช่องทางอื่น ๆ เพื่อสำรองที่นั่ง)
• หากท่านไม่สะดวกเข้าร่วมการอบรมในครั้งนี้ ท่านสามารถเลื่อนการเข้าร่วมอบรมได้ตามตารางการอบรม

ตารางการจัดอบรม

ชื่อการอบรม	วันที่จัดการอบรม
👉 Modern Web Frontend with React (Next.js - App Router - Typescript) ครั้งที่ 1/2024	วันเสาร์ที่ 25 - 26 พฤษภาคม 2567
Modern Web Frontend with React (Next.js - App Router - Typescript) ครั้งที่ 2/2024	Coming Soon
Modern Web Frontend with React (Next.js - App Router - Typescript) ครั้งที่ 3/2024	Coming Soon

ท่านสามาถติดตามตารางการอบรมได้ที่ www.dkscenter.com

รับเพียง 20 ที่นั่งเท่านั้น!

หลักสูตรนี้เหมาะกับใคร?

• นักพัฒนาซอฟต์แวร์ที่ต้องการเรียนรู้เกี่ยวกับ 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
• ความกระตือรือร้นในการเรียนรู้และการทำงานร่วมกับผู้อื่นในระหว่างการศึกษา การทำงานร่วมกับสมาชิกในทีมช่วยให้ผู้เรียนได้รับประสบการณ์ที่มีประโยชน์จากการแลกเปลี่ยนความรู้และประสบการณ์

เนื้อหาการอบรม

History of web frontend - ประวัติศาสตร์ของการพัฒนาเว็บแอปพลิเคชันก่อนจะมีการพัฒนาแบบแยกระหว่าง Backend และ Frontend

Pros and Cons - ข้อดี ข้อเสีย ของการพัฒนาเว็บแอปพลิเคชันแบบแยก Backend และ Frontend

System Architecture Overview - ภาพรวมของการออกแบบเว็บแอปพลิเคชันแบบแยก Backend และ Frontend ในปัจจุบัน พร้อมกรณีศึกษา

ECMAScript and Typescript - การเขียนจาวาสคริปต์สมัยใหม่ และพื้นฐานการเขียน Typescript

What is React? And why Next.js? - ทำความรู้จักกับ React และ React-powered frameworks

Workshop 1 - create-next-app

Project Structure - แนะนำโครงสร้างของ Next.js เบื้องต้น

HTML and JSX - JSX คืออะไร? ความแตกต่างและข้อควรระวังระหว่าง Html tag และ JSX

Component concept - อธิบายฟังก์ชันและหน้าที่ต่าง ๆ ที่จำเป็นต่อการพัฒนาเว็บแอปพลิเคชันด้วย React, การสร้าง Component เพื่อแยกส่วนประกอบที่ใช้งานบ่อย ๆ, การ Export และ Import ส่วนประกอบเข้ามาใช้งาน, การส่งค่าไปยังส่วนประกอบ (Component Pops)

Workshop 2 - My First Component

Tailwind CSS - แนะนำการใช้งาน Tailwind CSS เบื้องต้น

Workshop 3 - My Home Page

State: A Component's Memory - อธิบายฟังก์ชัน useState และวิธีการใช้งานเบื้องต้น

Workshop 4 - Carousel banner

Reacting to Input with State - การใช้งาน State ร่วมกับ Input

Workshop 5 - Search box

Sharing State Between Components - อธิบายการใช้ State ร่วมกับ Component อื่นๆ

Workshop 6 - Search results

Next.js Routing - อธิบายการสร้าง Route Path ในรูปแบบต่าง ๆ, โครงสร้างของ Page และ Layouts, การเปลี่ยนหน้า (Linking and Navigating)

Workshop 7 - New search page

Workshop 8 - Products and Details

Server Components and Client Components - อธิบายข้อแตกต่างและการใช้งาน Server Components และ Client Components พร้อมกรณีศึกษา

Next.js Data Fetching - อธิบายการเรียกใช้ API, การสร้างและเรียกใช้งาน Server Actions and Mutations, การใช้งาน formData และ useFormStatus

Workshop 9 - Register

Authentication Flow - อธิบายการวางโครงสร้างและหลักการของระบบยืนยันตัวตน (Authentication)

Workshop 10 - Login

Passing Data Deeply with Context - อธิบายหลักการ ความจำเป็น และวิธิการบริหารจัดการข้อมูลที่มีความซับซ้อน พร้อมกรณีศึกษา

Workshop 11 - My Profile

Error Handling and Middleware - อธิการหลักการทำ Error Handling ในแบบฉบับของ Next.js และ การทำงานของ Middleware พร้อมกรณีศึกษา

Workshop 12 - Redirect when not logged in

Scaling Up with Reducer and Context - อธิบายการใช้ Reducer และ State Action ร่วมกับ Context พร้อมกรณีศึกษา

Workshop 13 - Add products to cart

Synchronizing with Effects - อธิบายการทำงานของฟังก์ชัน useEffect และวิธีการใช้งานในรูปแบบต่าง ๆ

Workshop 14 - Checkout!

Workshop 15 - Order History

Environment Variables and Deploying - อธิบายการใช้งาน Environment Variables และการ Deploy ในรูปแบบต่าง ๆ

Workshop 16 - Hello World!

ภาพบรรยากาศครั้งที่ผ่านมา

การขอใบเสนอราคา

พันธมิตรส่งเสริมการขาย

ข้อมูลในการออกใบหัก ณ ที่จ่าย

ช่องทางการติดต่อ

สนับสนุนโดย