DKS
ตอบกลับเร็วเวิร์กชอปเรือธงอัปเดตล่าสุดเมื่อ: 19 ก.พ. 2567, 09:00

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 ในเว็บแอปพลิเคชัน

จองที่นั่ง / สอบถามผ่าน LINE

ขณะนี้ยังไม่มีรอบอบรมที่เปิดรับสมัคร โดยข้อมูลด้านล่างอ้างอิงจากรอบล่าสุดที่เคยเปิดอบรม

หากสนใจหลักสูตรนี้ กรุณาติดต่อทีมงานหรือกลับมาตรวจสอบอีกครั้งในภายหลัง

จุดเด่นของคอร์ส
จุดเด่น 01

อาหารกลางวันและอาหารว่าง

จุดเด่น 02

หากท่านไม่สะดวกเข้าร่วมการอบรมในครั้งนี้ ท่านสามารถเลื่อนการเข้าร่วมอบรมได้ตามตารางการอบรม

จุดเด่นของคอร์ส

คอร์สนี้ออกแบบมาเพื่อให้เรียนแล้วนำไปใช้ต่อได้จริง

สรุปเหตุผลสำคัญที่ทำให้คอร์สนี้เหมาะกับคนที่ต้องการอัปสกิลอย่างจริงจังและต่อยอดงานได้ทันที

เหตุผล 01

เรียนแบบลงมือทำจริง

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

เหตุผล 02

เนื้อหาจัดลำดับเพื่อคนทำงานจริง

จัดลำดับหัวข้อให้เข้าใจง่ายขึ้น ลดความล้าจากเนื้อหาหนัก และช่วยให้จับประเด็นสำคัญได้ไว

เหตุผล 03

ตัดสินใจก่อนซื้อได้อย่างมั่นใจ

มีทั้งช่องทางสอบถามและลงทะเบียนที่ชัดเจนในจังหวะสำคัญของหน้า เพื่อช่วยให้ตัดสินใจได้ง่ายขึ้น

Learning Outcomes

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

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

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

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

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

เหมาะกับใคร และควรเตรียมตัวอย่างไรก่อนเข้าร่วม

ดูได้ชัดเจนว่าคอร์สนี้เหมาะกับใคร และควรมีพื้นฐานอะไรบ้างก่อนเข้าเรียน

Who Should Join

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

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

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

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

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

โครงสร้างเนื้อหาถูกแบ่งเป็นโมดูล เพื่อให้ดูภาพรวมได้ง่ายและเลือกเปิดอ่านรายละเอียดในส่วนที่สนใจ

37 โมดูลการเรียน
01

History of Web Frontend Development

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • ประวัติศาสตร์ของการพัฒนาเว็บแอปพลิเคชันก่อนจะมีการพัฒนาแบบแยกระหว่าง Backend และ Frontend
02

Pros and Cons

1 หัวข้อย่อยในโมดูลนี้

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

System Architecture Overview

1 หัวข้อย่อยในโมดูลนี้

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

ECMAScript and TypeScript

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • การเขียนจาวาสคริปต์สมัยใหม่ และพื้นฐานการเขียน Typescript
05

What is React? And why Next.js?

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • ทำความรู้จักกับ React และ React-powered frameworks
06

Workshop 1

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Creating a Next.js app.
07

Project Structure

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • แนะนำโครงสร้างของ Next.js
08

HTML and JSX

2 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • JSX คืออะไร?
  • ความแตกต่างและข้อควรระวังระหว่าง Html tag และ JSX
09

Component Concept

4 หัวข้อย่อยในโมดูลนี้

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

Workshop 2

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • My First Component.
11

Tailwind CSS

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • แนะนำการใช้งาน Tailwind CSS เบื้องต้น
12

Workshop 3

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • My Home Page.
13

State: A Component's Memory

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายฟังก์ชัน useState และวิธีการใช้งานเบื้องต้น
14

Workshop 4

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Carousel banner.
15

Reacting to Input with State

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • การใช้งาน State ร่วมกับ Input
16

Workshop 5

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Search box.
17

Sharing State Between Components

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายการใช้ State ร่วมกับ Component อื่นๆ
18

Workshop 6

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Search results.
19

Next.js Routing

3 หัวข้อย่อยในโมดูลนี้

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

Workshop 7

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • New search page.
21

Workshop 8

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Products and Details.
22

Server Components and Client Components

2 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายข้อแตกต่างและการใช้งาน Server Components และ Client Components
  • กรณีศึกษา
23

Next.js Data Fetching

3 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายการเรียกใช้ API
  • การสร้างและเรียกใช้งาน Server Actions and Mutations
  • การใช้งาน formData และ useFormStatus
24

Workshop 9

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Register.
25

Authentication Flow

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายการวางโครงสร้างและหลักการของระบบยืนยันตัวตน (Authentication)
26

Workshop 10

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Login.
27

Passing Data Deeply with Context

2 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายหลักการ ความจำเป็น และวิธิการบริหารจัดการข้อมูลที่มีความซับซ้อน
  • กรณีศึกษา
28

Workshop 11

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • My Profile.
29

Error Handling and Middleware

2 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิการหลักการทำ Error Handling ในแบบฉบับของ Next.js และ การทำงานของ Middleware
  • กรณีศึกษา
30

Workshop 12

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Redirect when not logged in.
31

Scaling Up with Reducer and Context

2 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายการใช้ Reducer และ State Action ร่วมกับ Context
  • กรณีศึกษา
32

Workshop 13

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Add products to cart.
33

Synchronizing with Effects

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายการทำงานของฟังก์ชัน useEffect และวิธีการใช้งานในรูปแบบต่าง ๆ
34

Workshop 14

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Checkout!
35

Workshop 15

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Order History.
36

Environment Variables and Deploying

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • อธิบายการใช้งาน Environment Variables และการ Deploy ในรูปแบบต่าง ๆ
37

Workshop 16

1 หัวข้อย่อยในโมดูลนี้

ดูรายละเอียด
  • Hello World!
รอบอบรมและการลงทะเบียน

กำหนดการอบรม

ตรวจสอบรอบอบรม วันที่ เวลา สถานที่ และรายละเอียดการลงทะเบียนได้ในส่วนเดียว

ประวัติรอบที่ผ่านมา

ขณะนี้ยังไม่มีรอบอบรมที่เปิดรับสมัคร โดยข้อมูลด้านล่างอ้างอิงจากรอบล่าสุดที่เคยเปิดอบรม

หากสนใจหลักสูตรนี้ กรุณาติดต่อทีมงานหรือกลับมาตรวจสอบอีกครั้งในภายหลัง

จบแล้วรอบที่ผ่านมา 1Onsite
ผู้จัดรอบนี้: DKS Center

Modern Web Frontend with React - 3/2024

วันที่
14 ก.ย. 2567 - 15 ก.ย. 2567
เวลา
09:00 - 17:00
สถานที่
BTS Phaya Thai
จบแล้วรอบที่ผ่านมา 2Onsite
ผู้จัดรอบนี้: DKS Center

Modern Web Frontend with React - 2/2024

วันที่
16 ก.ค. 2567 - 17 ก.ค. 2567
เวลา
09:00 - 17:00
สถานที่
BTS Phaya Thai
จบแล้วรอบที่ผ่านมา 3Onsite
ผู้จัดรอบนี้: DKS Center

Modern Web Frontend with React - 1/2024

วันที่
25 พ.ค. 2567 - 26 พ.ค. 2567
เวลา
09:00 - 17:00
สถานที่
BTS Phaya Thai
Documents

เอกสารที่เกี่ยวข้อง

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