Web Development · WDC-93

React and NodeJS with Docker Workshop

18 hours 3 days

Last updated 25 Sep 2026

React and NodeJS with Docker Workshop is a 18-hour training course by IT Genius Institute. หลักสูตรนี้เป็นการเรียนรู้ผ่านการทำ Workshop จริงโดยใช้ React V.18 เป็นส่วนหน้าบ้าน (Frontend) ร่วมกับ NodeJS Strapi V.4 CMS เป็นระบบหลังบ้าน (Backend)…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

หลักสูตรนี้เป็นการเรียนรู้ผ่านการทำ Workshop จริงโดยใช้ React V.18 เป็นส่วนหน้าบ้าน (Frontend) ร่วมกับ NodeJS Strapi V.4 CMS เป็นระบบหลังบ้าน (Backend) และเซ็ตอัพสภาพแวดล้อมทั้งหมดให้ทำงานอยู่บน Docker Container เพื่อให้ผู้เรียนเห็นภาพรวมและประยุกต์นำไปต่อยอดใช้งานได้เองในอนาคต

Objectives

สามารถพัฒนาโปรเจ็กต์ด้วย JavaScript ได้

Who this course is for

ผู้ที่ต้องการ พัฒนาเว็บแอปพลิเคชันแบบ "Full Stack"
IT Managers
Developers

Prerequisites

พื้นฐาน HTML 5 & CSS 3
พื้นฐาน JavaScript ES 6
พื้นฐาน Docker

Curriculum

Section 1: ติดตั้งเครื่องมือ เช่น Docker Desktop, Node.JS, VSCode, Git

แนะนำการดาวน์โหลดและติดตั้ง Docker Desktop ทั้งหมด Windows & MacOS
ดาวน์โหลดและติดตั้ง Node.JS พร้อมทดสอบการทำงาน
ติดตั้งเครื่องเขียนโปรแกรมด้วย Visual Studio Code พร้อมส่วนเสริม (Extension) ที่จำเป็น
ติดตั้ง Git และตั้งค่าการใช้งานเบื้องต้น
ติดตั้ง Extension บน Google Chrome

Section 2: สร้าง Workshop โปรเจ็กต์ React 18 ด้วย Vite ทำงานบน Docker Container

แนะนำการสร้างโปรเจ็กต์ React V.18 ใหม่แบบ TypeScript ด้วย Vite V.4
เซ็ตอัพโปรเจ็กต์บน Docker โดยเขียนสคริปต์ Dockerfile และ docker-compose.yml
ทำการตั้งค่า Vite ให้รองรับการทำ Hot Reload บน Docker
แนวทางการ Build / Run โปรเจ็กต์บน Docker
ติดตั้ง NPM Package ต่างๆ ลงโปรเจ็กต์ผ่านคำสั่งของ Docker
ปรับโครงสร้างโปรเจ็กต์สำหรับทำ Workshop ระบบคงคลังสินค้าอย่างง่าย
ติดตั้ง React Router Dom V.6 พร้อมใช้งาน
ทดสอบ Run และ Build Project ใช้งาน

Section 3: ใช้ React ออกแบบ UI ด้วย Material UI (MUI) ล่าสุด

ติดตั้ง Library Material UI (MUI) V.5 ลงในโปรเจ็กต์
Config และปรับแต่ง MUI พื้นฐานในโปรเจ็กต์ที่ติดตั้ง
การออกแบบโครงสร้างด้วย Components พื้นฐาน เช่น Grid,Box,Contaniner, Tabs,List, Menu, MenuItem, Sidebar, AppBar, Toolbar
การใช้รูป Icons ต่างๆ ผ่าน Components Icon
การรับข้อมูลจากฟอร์มด้วย Components ต่างๆ เช่น Text Field, Checkbox, Radio, Select, Slider, Button เป็นต้น
การใช้และปรับแต่ง Theme ใน Material

Section 4: สร้าง Workshop Rest API ด้วย Strapi CMS V.4

สร้างโปรเจ็กต์ API NodeJS ด้วย Strapi CMS Version 4
เพิ่ม Collections และกำหนดสิทธิ์ใน Strapi
ติดตั้ง Authentication ใน Strapi ด้วย JWT
ทดสอบเรียกใช้ API ก่อนนำไปใช้งานกับ ReactJS

Section 5: ใช้ React เชื่อมต่อ Web API พร้อมทำ Authentication

ติดตั้ง Node Package Libray สำหรับการเชื่อมต่อ Web API ใน React Project
เขียน Service ใน React เพื่อทำระบบ Login / Register ไปยัง API
แนวทางการเก็บ Token ที่ได้จาก API ลงใน localStorage และ Cookie ที่ฝั่ง React
การเขียน Private Route (Protected Route) สำหรับป้องกันการเข้าถึงโดยตรง ด้วย React Router Dom V.6

Section 6: Workshop React เรียกข้อมูล/เพิ่ม/แก้ไข/ลบ (CRUD) ผ่าน API

เขียน Service สำหรับเรียกข้อมูล/เพิ่ม/แก้ไข/ลบ (CRUD) ผ่าน API
ดึงข้อมูลจาก API แสดงผลในตารางด้วย Material UI (MUI)
จัดรูปแบบการแสดงผล สกุลเงิน วันที่ เวลาใน React
ทดสอบ Run / Build โปรเจ็กต์ที่ทำเสร็จแล้ว

Section 7: การ Build และ Deployed project ไปใช้งานจริง

ปรับแต่งโปรเจ็กต์ React TypeScript ก่อนทำการ Build
แนวทางการ Build เพื่อนำไปใช้งานบน Web Server ต่างๆ
แนวทางการ Deployed ผ่าน Docker Container
การแก้ปัญหาต่างๆ ที่อาจพบจากการนำไปขึ้นระบบจริง

Frequently asked questions

Who is React and NodeJS with Docker Workshop for, and what background is needed?

Built for ผู้ที่ต้องการ พัฒนาเว็บแอปพลิเคชันแบบ "Full Stack" · IT Managers · Developers Background you should have: พื้นฐาน HTML 5 & CSS 3 · พื้นฐาน JavaScript ES 6 Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does React and NodeJS with Docker Workshop cost and how long does it run?

THB 9,500 (currently THB 8,550 on promotion). The course runs 18 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.