React.js Development with AI Code Assist
- TTDG41
- Classroom
- Fundamental
- Thai | 0
หลักสูตรนี้มุ่งเน้นการพัฒนา Modern Web Application ด้วย React.js และ TypeScript โดยนำ AI Code Assistเช่น GitHub Copilot, Claude Code หรือ Codex มาช่วยตลอดกระบวนการพัฒนาซอฟต์แวร์ ตั้งแต่การวิเคราะห์ความต้องการการออกแบบ Component การเขียนโปรแกรม การเชื่อมต่อ REST API การทดสอบ ไปจนถึงการ Deploy Application
Course description
Time
Instructor
Venue
React.js Development with AI Code Assist
Modern Frontend Development with React, TypeScript & AI-Assisted Coding
หลักสูตรนี้มุ่งเน้นการพัฒนา Modern Web Application ด้วย React.js และ TypeScript โดยนำ AI Code Assist เช่น GitHub Copilot, Claude Code หรือ Codex มาช่วยตลอดกระบวนการพัฒนาซอฟต์แวร์ ตั้งแต่การวิเคราะห์ความต้องการการออกแบบ Component การเขียนโปรแกรม การเชื่อมต่อ REST API การทดสอบ ไปจนถึงการ Deploy Application
เน้นแนวทาง AI-Assisted Development + Specification-Driven Development (SDD) เพื่อให้ผู้เรียนไม่เพียงใช้ AI ช่วยสร้างโค้ดได้รวดเร็วขึ้น แต่ยังสามารถตรวจสอบ ควบคุมคุณภาพ และดูแลรักษาโค้ดได้อย่างมีประสิทธิภาพ
- นักพัฒนาซอฟต์แวร์และวิศวกร: ที่ต้องการเพิ่มทักษะด้าน AI และพัฒนาโปรแกรมที่สามารถโต้ตอบกับผู้ใช้ได้อย่างชาญฉลาด
- นักวิทยาศาสตร์ข้อมูล (Data Scientists): ที่ต้องการนำ AI Agent ไปประยุกต์ใช้ในการประมวลผลข้อมูลและสร้างรายงานอัตโนมัติ
- นักวิจัยและนักศึกษา: ที่ต้องการนำความรู้ไปใช้ในการสร้างสรรค์โครงการด้าน AI และ Autonomous Systems
- ผู้จัดการผลิตภัณฑ์และผู้บริหาร: ที่ต้องการเข้าใจศักยภาพของ AI Agent เพื่อนำมาวางแผนและกำหนดกลยุทธ์ทางธุรกิจ
คุณสมบัติของผู้เข้าอบรม
- มีพื้นฐานความรู้และประสบการณ์ในการเขียนโปรแกรมด้วย Node.js
- มีความเข้าใจในแนวคิดการเขียนโปรแกรมเชิงวัตถุ (Object-Oriented Programming) มีความคุ้นเคยกับการใช้งาน Git และ GitHub
- มีความสนใจและต้องการเรียนรู้เกี่ยวกับเทคโนโลยี AI และ Generative AI
- เข้าใจหลักการพัฒนาเว็บแอปพลิเคชันด้วย React.js และ TypeScript
- สามารถออกแบบและพัฒนา Component ที่นำกลับมาใช้ซํ้าได้
- ประยุกต์ใช้ AI Code Assist ในการวิเคราะห์ ออกแบบ และพัฒนา Web Application
- สามารถใช้ React Hooks จัดการ State และเชื่อมต่อ REST API
- สามารถพัฒนา Responsive UI ด้วย Tailwind CSS
- ประยุกต์ใช้ AI ช่วย Debug, Refactor, Generate Unit Tests และ Review Code
- สามารถ Build และ Deploy React Application ด้วย Docker
Day 1 React Fundamentals & AI-Assisted UI Development
Module 1: Introduction to Modern React Development
- Modern Frontend Development และ React Architecture
- JavaScript ES6+ และ TypeScript Essentials
- React Components, JSX, Props และ Component Composition
- การติดตั้ง Node.js, Vite และ VS Code
- การสร้าง React Project ด้วย Vite และ TypeScript
Module 2: AI Code Assist for React Developers
- แนวคิด AI-Assisted Development และ Vibe Coding
- รู้จัก GitHub Copilot, Claude Code และ Codex
- Effective Prompt Engineering สำหรับ React Development
- การใช้ AI อ่าน วิเคราะห์ และอธิบาย Source Code
- การสร้าง Project Instructions และ Coding Standards
- Specification-Driven Development ด้วย Markdown
Module 3: React Components & State Management
- Functional Components และ Reusable Components
- Props, Events และ Conditional Rendering
- Lists, Keys และ Dynamic Rendering
- React Hooks: useState, useEffect และ useRef
- Component Lifecycle และ State Management Fundamentals
- การใช้ AI ช่วยสร้างและ Refactor Components
Module 4: Responsive UI Development with Tailwind CSS
- Tailwind CSS Fundamentals
- Flexbox, Grid และ Responsive Design
- Form Controls และ Reusable UI Components
- การใช้ AI สร้าง UI จาก Requirement
- การปรับแต่ง UI และแก้ไข Styling ด้วย AI
Day 2 Building Data-Driven React Applications
Module 5: React Router & Application Architecture
- React Router และ Client-Side Routing
- Nested Routes และ Layout Components
- การจัดโครงสร้าง Project แบบ Feature-Based
- Custom Hooks และ Separation of Concerns
- การใช้ AI ช่วยออกแบบ Project Structure
Module 6: Forms & State Management
- Controlled Components และ Form Handling
- Form Validation และ Error Messages
- การจัดการ Local State และ Shared State
- Context API และ useReducer เบื้องต้น
- การใช้ AI สร้าง Dynamic Forms
Module 7: REST API Integration
- HTTP Methods และ REST API Fundamentals
- Fetch API / Axios
- CRUD Operations
- Loading, Error และ Empty States
- API Service Layer และ TypeScript Interfaces
- การจัดการ Authentication ด้วย JWT
- Protected Routes และ Authorization Concepts
- การใช้ AI ช่วยสร้าง API Integration Code
Module 8: AI-Assisted Feature Development
- การเขียน Feature Specification ด้วย Markdown
- การให้ AI วิเคราะห์ Requirement และวางแผนพัฒนา
- การสร้าง Components, Hooks และ Services จาก Specification
- การใช้ AI Debug ปัญหาการเชื่อมต่อ API
- การ Review และ Refactor Code ที่ AI สร้าง
Day 3 AI-Driven Testing, Optimization & Deployment
Module 9: Advanced React Development
- Custom Hooks และ Reusable Logic
- Performance Optimization Fundamentals
- useMemo, useCallback และ React Memoization
- Lazy Loading และ Code Splitting
- Error Boundaries
- การใช้ AI วิเคราะห์และปรับปรุง Performance
Module 10: AI-Assisted Testing & Code Quality
- Introduction to Unit Testing
- Vitest และ React Testing Library
- การสร้าง Component Tests ด้วย AI
- Mock API และทดสอบ User Interactions
- ESLint และ TypeScript Type Checking
- AI-Assisted Debugging, Code Review และ Refactoring
- Security Practices สำหรับ AI-Generated Code
Module 11: Build & Deployment
- Environment Variables และ Build Configuration
- Production Build ด้วย Vite
- Docker Multi-Stage Build
- Deploy React Application ด้วย Nginx
- Introduction to CI/CD สำหรับ React
- การใช้ AI สร้าง Dockerfile และ Deployment Configuration
Payment can be made by:
- Cash or Credit Card or Bank Cheque payable to
สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ or National Science and Technology Development Agency
(a post-dated cheque is not accepted) on the first day of the service or within the last day of the service. - Account transfer and send the proof of the payment (the deposit slip) via email xxx@swpark.or.th
- ธนาคารกรุงเทพ สาขาอุทยานวิทยาศาสตร์
Saving Account Number: 080-0-00001-0
Account Name: สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ - ธนาคารกรุงไทย สาขาตลาดไท
Saving Account Number: 152-1-32668-1
Account Name: สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
- ธนาคารกรุงเทพ สาขาอุทยานวิทยาศาสตร์
Notes:
- Withholding tax (3%) is exempt.
- Should you need to withdraw, you must send the notice of the withdrawal in writing no later than 7 working days before the commencement date. The cancellation less than 7 days will be subject to a fine of 40% of the fee.
- Software Park Thailand reserves the rights to cancel courses due to unforeseen circumstances.
Contact Person
For more information, contact our course coordinator on:
คุณภัสสร พรทิพย์
Ms. Patsorn Pornthip
Tel: +66-2583-9992 Ext. 81422
Email: patsorn@swpark.or.th
You are encouraged to use the course schedule as a guide to plan your training.
The schedule is accessible at www.swpark.or.th for more information.
12,000 THB .
สำคัญ!!! กรุณารอการยืนยันเปิดการอบรมจากเจ้าหน้าที่ก่อนการชำระค่าลงทะเบียน
สำคัญ!!! กรุณารอการยืนยันเปิดการอบรมจากเจ้าหน้าที่ก่อนการชำระค่าลงทะเบียน
Course Detail :
Instructor info
