ໂທ. 02-570-8449 ມືຖື 088-807-9770 ຊຳລະເງິນ
ຈ–ສ 9:00–17:00 ໂມງ @itgenius
ສະຖາບັນໄອທີຈີເນຍສ໌IT Genius Institute
ສະຖາບັນໄອທີຈີເນຍສ໌IT Genius Institute
ຫຼັກສູດເວີກຊັອບຕາຕະລາງຝຶກອົບຮົມ
ສຳລັບອົງກອນ
ຝຶກອົບຮົມພາຍໃນອົງກອນ (In-house)AI Transformationຝຶກອົບຮົມໜ່ວຍງານລັດບໍລິການພັດທະນາລະບົບເຊົ່າຫ້ອງຝຶກອົບຮົມ
ບົດຄວາມ
ກ່ຽວກັບພວກເຮົາ
ຮູ້ຈັກສະຖາບັນໄອທີຈີເນຍສ໌ວິທະຍາກອນຜົນງານລູກຄ້າຂອງພວກເຮົາຊ່ອງທາງຊຳລະເງິນ
ຕິດຕໍ່ພວກເຮົາຄອສອອນລາຍ
ຮູບແບບສີ
ພາສາ
THENLA
ສອບຖາມຫຼັກສູດເລືອກຊ່ອງທາງທີ່ສະດວກ ທີມງານຕອບເອງທຸກຊ່ອງທາງ
LINE @itgeniusຕອບໄວທີ່ສຸດ · ຈ–ສ 9:00–17:00 ໂມງ
ໂທລະສັບ
02-570-8449ຫ້ອງການ088-807-9770ມືຖື
ອີເມວ ແລະ ໂຊຊຽວ
contact@itgenius.co.thສຳລັບໃບສະເໜີລາຄາ ແລະ ເອກະສານFacebookitgeniusonlineYouTubeitgeniusengຂໍຄຳປຶກສາຈັດຝຶກອົບຮົມໃຫ້ທີມ
ໜ້າຫຼັກ / ຫຼັກສູດ / ພັດທະນາເວັບໄຊ / ລາຍລະອຽດ
ພັດທະນາເວັບໄຊ · WDC-54

Basic React.js

หลักสูตร Basic React.js เป็นการอบรมเขียน React 19 สำหรับผู้เริ่มต้น ตั้งแต่สร้างโปรเจกต์ด้วย Vite เขียน JSX แบ่ง Component ใช้ Props และ State ไปจนถึงดึงข้อมูลจาก REST API ทำเว็บหลายหน้าด้วย React Router และสร้างฟอร์ม เหมาะกับนักศึกษาและ Web Developer ที่รู้ JavaScript พื้นฐาน จบแล้ว Deploy แอปของตัวเองได้

ອັບເດດລ່າສຸດ
Basic React.js
ລາຄາເລີ່ມຕົ້ນ 4,950 ບາດ / ທ່ານ 5,500 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ
ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ ເບິ່ງຮອບຝຶກອົບຮົມ
PDFດາວໂຫຼດ Course Outline
  • ໄລຍະເວລາ12 ຊົ່ວໂມງ · 2 ມື້
  • ຮູບແບບຢູ່ສະຖາບັນ / ອອນລາຍສົດ
  • ຮອບຕໍ່ໄປ8–9 ທ.ວ. 26
  • ໃບຢັ້ງຢືນມີໃບຢັ້ງຢືນ

ພາບລວມຫຼັກສູດ

เว็บแอปพลิเคชันทุกวันนี้ต้องตอบสนองเร็ว ใช้งานลื่นเหมือนแอปบนมือถือ และแก้ไขเพิ่มเติมได้ง่ายเมื่อระบบโตขึ้น React เป็นไลบรารีสร้าง User Interface ที่นิยมมากที่สุดตัวหนึ่ง เพราะแบ่งหน้าเว็บออกเป็น Component ที่นำกลับมาใช้ซ้ำได้ และเป็นพื้นฐานของเครื่องมืออีกมาก เช่น Next.js และ React Native

หลักสูตรนี้เป็นก้าวแรกของการเขียน React รุ่นปัจจุบันอย่างถูกแนวทาง เริ่มจากสร้างโปรเจกต์ React 19 ด้วย Vite เขียน JSX แบ่ง Component ส่งค่าด้วย Props จัดการ State และ Event ตกแต่งด้วย CSS Modules และ Bootstrap จากนั้นดึงข้อมูลจาก API ด้วย useEffect และ Custom Hook ทำเว็บหลายหน้าด้วย React Router สร้างฟอร์มด้วย Form Actions และ React Hook Form ทำ CRUD กับ REST API แล้วปิดท้ายด้วยการ Build และ Deploy แอปขึ้นเว็บจริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

ສິ່ງທີ່ທ່ານຈະໄດ້ຮັບ

  • เข้าใจแนวคิดของ React แบบ Component และสร้างโปรเจกต์ด้วย Vite ได้
  • เขียน JSX แสดงข้อมูล เงื่อนไข และรายการได้ถูกต้อง
  • สร้าง Function Component และส่งค่าระหว่าง Component ด้วย Props ได้
  • จัดการ State และ Event ด้วย Hooks พื้นฐานได้
  • ดึงข้อมูลจาก REST API และจัดการสถานะกำลังโหลดกับ Error ได้
  • ทำเว็บหลายหน้าด้วย React Router ได้
  • สร้างฟอร์มพร้อมตรวจข้อมูลด้วย Form Actions และ React Hook Form ได้
  • Build และ Deploy แอป React ขึ้นเว็บจริงได้

ຫຼັກສູດນີ້ເໝາະສຳລັບ

  • นักเรียน นักศึกษา และผู้เริ่มต้นที่ต้องการก้าวสู่งาน Front-end Developer
  • Web Developer ที่เขียน HTML, CSS และ JavaScript แล้วอยากเริ่มใช้ React
  • ครู อาจารย์ และวิทยากรที่ต้องการสอนการพัฒนาเว็บสมัยใหม่
  • นักไอทีและผู้ดูแลระบบที่ต้องการสร้างหน้าเว็บสำหรับระบบภายในองค์กร

ພື້ນຖານຂອງຜູ້ເຂົ້າຝຶກອົບຮົມ

  • เขียน HTML และ CSS ได้ และเข้าใจการทำงานของเว็บเบื้องต้น
  • เขียน JavaScript พื้นฐานได้ ทั้งตัวแปร ฟังก์ชัน Array และ Object
  • ถ้ารู้จัก Arrow Function, Destructuring และ import กับ export จะเรียนได้เร็วขึ้น
  • โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS, VS Code และเบราว์เซอร์รุ่นล่าสุดได้

ຫົວຂໍ້ການຝຶກອົບຮົມ

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic React JS สำหรับผู้เริ่มต้น อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner ฉบับนี้ย้ายมาใช้ React 19 สอนเฉพาะ Function Component และ Hooks โดยตัด Class Component ออก สร้างโปรเจกต์ด้วย Vite แทน Create React App ที่เลิกใช้แล้ว ใช้ React Router รุ่นปัจจุบัน เพิ่ม Form

Actions ของ React 19 คู่กับ React Hook Form และ Zod และใช้ Mock API บนเครื่องผู้เรียนแทนการติดตั้ง Strapi ทุก Lab ใช้เครื่องมือโอเพนซอร์สหรือใช้ฟรี ผู้เรียนได้ Lab Guide โค้ดตั้งต้นและโค้ดเฉลยครบทุก Lab และโปรเจกต์ระบบจัดการสินค้าแบบ CRUD กลับไปใช้งานต่อ ผู้ที่ต้องการต่อยอดสามารถเรียนหลักสูตร React and NodeJS with Docker Workshop ต่อได้

Day 1 พื้นฐาน React, Component และ State

Section 1: Lab: รู้จัก React และเตรียมโปรเจกต์

  • React คืออะไร แนวคิด Component และ Single Page Application
  • ภาพรวม React 19 และเครื่องมือในระบบนิเวศ เช่น Next.js และ React Native
  • ติดตั้ง Node.js รุ่น LTS และสร้างโปรเจกต์ด้วย Vite
  • โครงสร้างโปรเจกต์ createRoot และ React Developer Tools
  • Lab: แอป React แรกที่รันบนเครื่องของตัวเอง

Section 2: เขียน JSX

  • ทำไมต้องใช้ JSX และกฎพื้นฐาน เช่น className และการปิด Tag
  • แสดงค่าตัวแปรและ Expression ใน JSX
  • แสดงหรือซ่อนเนื้อหาตามเงื่อนไข
  • แสดงรายการด้วย map และกำหนด key ให้ถูกต้อง
  • Lab: หน้าแสดงรายการสินค้าจากข้อมูล Array

Section 3: Component และ Props

  • สร้าง Function Component และแยกไฟล์ด้วย import และ export
  • ส่งค่าหลายแบบผ่าน Props และกำหนดค่าเริ่มต้น
  • รับเนื้อหาผ่าน children และประกอบ Component เข้าด้วยกัน
  • หลักการแบ่ง Component ให้นำกลับมาใช้ซ้ำได้
  • Lab: Card สินค้าที่ใช้ซ้ำได้ทั้งหน้า

Section 4: Lab: State และ Event

  • จัดการ Event เช่น onClick และ onChange
  • useState และการอัปเดต State ที่เป็น Object และ Array โดยไม่แก้ของเดิม
  • ส่งฟังก์ชันผ่าน Props และยก State ขึ้นไปไว้ที่ Component แม่
  • useRef สำหรับอ้างถึง Element และเก็บค่าที่ไม่ต้อง Render ใหม่
  • Lab: ตะกร้าสินค้าที่เพิ่ม ลด และรวมยอดได้

Section 5: ตกแต่ง Component

  • แนวทางใช้ CSS กับ React ทั้ง Inline Style และไฟล์ CSS
  • CSS Modules เพื่อไม่ให้สไตล์ชนกันระหว่าง Component
  • ใช้ Bootstrap 5.3 กับ React ทั้ง Grid และ Component
  • กำหนด className ตามเงื่อนไขสำหรับสถานะต่าง ๆ
  • Lab: หน้าร้านค้าแบบ Responsive
Day 2 ข้อมูล หลายหน้า ฟอร์ม และ Deploy

Section 6: ดึงข้อมูลด้วย useEffect และ Custom Hook

  • useEffect ใช้เมื่อไร และเมื่อไรไม่จำเป็นต้องใช้
  • เรียก REST API ด้วย Fetch API หรือ Axios
  • แสดงสถานะกำลังโหลดและ Error ให้ผู้ใช้เห็น
  • แยกโค้ดดึงข้อมูลเป็น Custom Hook เพื่อใช้ซ้ำ
  • Lab: หน้ารายการสินค้าที่โหลดข้อมูลจาก API

Section 7: Lab: เว็บหลายหน้าด้วย React Router

  • ติดตั้ง React Router และกำหนดเส้นทางด้วย BrowserRouter, Routes และ Route
  • Link และ NavLink พร้อมแสดงสถานะลิงก์ปัจจุบัน
  • รับค่าจาก URL ด้วย useParams และ Query String ด้วย useSearchParams
  • Layout ร่วมด้วย Nested Route และ Outlet
  • เปลี่ยนหน้าด้วย useNavigate, ป้องกันหน้าที่ต้องล็อกอิน และหน้า 404

Section 8: ฟอร์มใน React

  • Controlled Input และการเก็บค่าฟอร์มใน State
  • Form Actions ของ React 19 กับ useActionState และ useFormStatus
  • React Hook Form สำหรับฟอร์มที่มีหลายช่อง
  • ตรวจความถูกต้องของข้อมูลด้วย Zod และแสดงข้อความ Error
  • Lab: ฟอร์มลงทะเบียนและเข้าสู่ระบบ

Section 9: Lab: CRUD กับ REST API

  • เตรียม Mock REST API บนเครื่องและทดสอบด้วย Postman หรือ Bruno
  • อ่าน เพิ่ม แก้ไข และลบข้อมูลจากหน้า React
  • อัปเดตหน้าจอหลังบันทึกข้อมูลและยืนยันก่อนลบ
  • เก็บ URL ของ API ในไฟล์ .env และเข้าใจปัญหา CORS
  • Lab: ระบบจัดการสินค้าแบบ CRUD ด้วย React และ Bootstrap

Section 10: Workshop: Build และ Deploy แอป React

  • ตรวจโปรเจกต์ก่อน Deploy และ Build แบบ Production ด้วย Vite
  • Deploy ขึ้น GitHub Pages, Netlify หรือ Vercel
  • แก้ปัญหา Fallback URL ของ Single Page Application
  • ใช้ AI Assistant ช่วยอธิบายและแก้โค้ด พร้อมตรวจผลเอง
  • แนวทางต่อยอดสู่ TypeScript, Next.js และ React Native

ຮອບຝຶກອົບຮົມ ແລະ ຮູບແບບການຝຶກອົບຮົມ

ສຳລັບບຸກຄົນ — ຮອບຝຶກອົບຮົມທົ່ວໄປ

8–9ທັນວາ
ໃນຫ້ອງຮຽນ8–9 ທ.ວ. 26
ເຫຼືອ 20 ບ່ອນນັ່ງ
9–10ກຸມພາ
ໃນຫ້ອງຮຽນ9–10 ກ.ພ. 27
ເຫຼືອ 20 ບ່ອນນັ່ງ
7–8ເມສາ
ໃນຫ້ອງຮຽນ7–8 ມ.ສ. 27
ເຫຼືອ 20 ບ່ອນນັ່ງ
22–23ມິຖຸນາ
ໃນຫ້ອງຮຽນ22–23 ມິ.ຖ. 27
ເຫຼືອ 20 ບ່ອນນັ່ງ
3–4ສິງຫາ
ໃນຫ້ອງຮຽນ3–4 ສ.ຫ. 27
ເຫຼືອ 20 ບ່ອນນັ່ງ
19–20ຕຸລາ
ໃນຫ້ອງຮຽນ19–20 ຕ.ລ. 27
ເຫຼືອ 20 ບ່ອນນັ່ງ
23–24ທັນວາ
ໃນຫ້ອງຮຽນ23–24 ທ.ວ. 27
ເຫຼືອ 20 ບ່ອນນັ່ງ

ສຳລັບອົງກອນ — In-house / Private Training

  • ປັບເນື້ອໃນໃຫ້ກົງກັບເຄື່ອງມື ແລະ ວຽກຈິງຂອງທີມ
  • ເລືອກວັນເອງ ຝຶກອົບຮົມທີ່ບໍລິສັດ ຫຼື ອອນລາຍສົດ
  • ອອກໃບສະເໜີລາຄາໃນນາມນິຕິບຸກຄົນໃຫ້ຝ່າຍຈັດຊື້
ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ

ວິທະຍາກອນຜູ້ສອນ

ຄຳຖາມທີ່ພົບເລື້ອຍ

JSX คืออะไร ต่างจาก HTML อย่างไร

JSX คือไวยากรณ์ที่ให้เขียนโครงหน้าจอคล้าย HTML ไว้ในโค้ด JavaScript แล้วเครื่องมืออย่าง Vite แปลงเป็นการเรียกฟังก์ชันของ React ข้อต่างจาก HTML เช่น ใช้ className แทน class ใช้ htmlFor แทน for ชื่อแอตทริบิวต์เป็นแบบ camelCase อย่าง onClick ทุกแท็กต้องปิด และคอมโพเนนต์ต้องคืนองค์ประกอบหลักเดียวหรือครอบด้วย Fragment ส่วนค่าหรือ expression ของ JavaScript ใส่ในวงเล็บปีกกา

Props กับ State ใน React ต่างกันอย่างไร

Props คือค่าที่คอมโพเนนต์แม่ส่งให้คอมโพเนนต์ลูก ลูกอ่านได้อย่างเดียวและไม่ควรแก้เอง ส่วน State คือข้อมูลที่คอมโพเนนต์ถือและเปลี่ยนเองได้ เช่น ค่าที่พิมพ์ในฟอร์ม สร้างด้วย useState และเมื่อเรียกฟังก์ชันอัปเดต React จะ render ใหม่ ถ้า State เป็น Object หรือ Array ให้สร้างค่าใหม่แทนการแก้ของเดิม และถ้าลูกต้องเปลี่ยนข้อมูลของแม่ ให้แม่ส่งฟังก์ชันลงมาทาง props

ทำเว็บหลายหน้าด้วย React Router มีขั้นตอนอย่างไร

ติดตั้งแพ็กเกจ react-router ซึ่งรุ่นปัจจุบันใช้แทน react-router-dom แล้วครอบแอปด้วย BrowserRouter จากนั้นกำหนดเส้นทางด้วย Routes และ Route โดยจับคู่ path กับคอมโพเนนต์ของแต่ละหน้า ใช้ Link หรือ NavLink แทนแท็ก a เพื่อเปลี่ยนหน้าโดยไม่โหลดใหม่ อ่านพารามิเตอร์ใน URL ด้วย useParams ใช้ Outlet ทำ Layout ร่วม เปลี่ยนหน้าจากโค้ดด้วย useNavigate และใส่ Route ที่ path เป็นเครื่องหมายดอกจันไว้ท้ายสุดเพื่อแสดงหน้า 404

หลักสูตร Basic React.js เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักเรียน นักศึกษา และผู้เริ่มต้นที่ต้องการเป็น Front-end Developer, Web Developer ที่อยากเริ่มใช้ React, ครูอาจารย์ที่ต้องการสอนการพัฒนาเว็บสมัยใหม่ และนักไอทีที่ต้องสร้างหน้าเว็บสำหรับระบบภายใน ควรเขียน HTML, CSS และ JavaScript พื้นฐานได้ ทั้งตัวแปร ฟังก์ชัน Array และ Object และควรนำโน้ตบุ๊กที่ติดตั้ง Node.js และ VS Code ได้มาด้วย

เรียนจบหลักสูตร Basic React.js แล้วทำอะไรได้บ้าง

สร้างโปรเจกต์ React 19 ด้วย Vite แบ่งหน้าเว็บเป็น Component ส่งค่าด้วย Props จัดการ State และ Event ดึงข้อมูลจาก REST API ทำเว็บหลายหน้าด้วย React Router สร้างฟอร์มพร้อมตรวจข้อมูล ทำระบบ CRUD และ Deploy แอปขึ้นเว็บจริงได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Basic React.js ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น สร้างหน้าเว็บที่เชื่อมกับ API ของระบบที่องค์กรใช้อยู่ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449