หลักสูตร Basic React.js เป็นการอบรมเขียน React 19 สำหรับผู้เริ่มต้น ตั้งแต่สร้างโปรเจกต์ด้วย Vite เขียน JSX แบ่ง Component ใช้ Props และ State ไปจนถึงดึงข้อมูลจาก REST API ทำเว็บหลายหน้าด้วย React Router และสร้างฟอร์ม เหมาะกับนักศึกษาและ Web Developer ที่รู้ JavaScript พื้นฐาน จบแล้ว Deploy แอปของตัวเองได้
เว็บแอปพลิเคชันทุกวันนี้ต้องตอบสนองเร็ว ใช้งานลื่นเหมือนแอปบนมือถือ และแก้ไขเพิ่มเติมได้ง่ายเมื่อระบบโตขึ้น 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)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 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 ต่อได้
Section 1: Lab: รู้จัก React และเตรียมโปรเจกต์
Section 2: เขียน JSX
Section 3: Component และ Props
Section 4: Lab: State และ Event
Section 5: ตกแต่ง Component
Section 6: ดึงข้อมูลด้วย useEffect และ Custom Hook
Section 7: Lab: เว็บหลายหน้าด้วย React Router
Section 8: ฟอร์มใน React
Section 9: Lab: CRUD กับ REST API
Section 10: Workshop: Build และ Deploy แอป React
JSX คือไวยากรณ์ที่ให้เขียนโครงหน้าจอคล้าย HTML ไว้ในโค้ด JavaScript แล้วเครื่องมืออย่าง Vite แปลงเป็นการเรียกฟังก์ชันของ React ข้อต่างจาก HTML เช่น ใช้ className แทน class ใช้ htmlFor แทน for ชื่อแอตทริบิวต์เป็นแบบ camelCase อย่าง onClick ทุกแท็กต้องปิด และคอมโพเนนต์ต้องคืนองค์ประกอบหลักเดียวหรือครอบด้วย Fragment ส่วนค่าหรือ expression ของ JavaScript ใส่ในวงเล็บปีกกา
Props คือค่าที่คอมโพเนนต์แม่ส่งให้คอมโพเนนต์ลูก ลูกอ่านได้อย่างเดียวและไม่ควรแก้เอง ส่วน State คือข้อมูลที่คอมโพเนนต์ถือและเปลี่ยนเองได้ เช่น ค่าที่พิมพ์ในฟอร์ม สร้างด้วย useState และเมื่อเรียกฟังก์ชันอัปเดต React จะ render ใหม่ ถ้า State เป็น Object หรือ Array ให้สร้างค่าใหม่แทนการแก้ของเดิม และถ้าลูกต้องเปลี่ยนข้อมูลของแม่ ให้แม่ส่งฟังก์ชันลงมาทาง props
ติดตั้งแพ็กเกจ react-router ซึ่งรุ่นปัจจุบันใช้แทน react-router-dom แล้วครอบแอปด้วย BrowserRouter จากนั้นกำหนดเส้นทางด้วย Routes และ Route โดยจับคู่ path กับคอมโพเนนต์ของแต่ละหน้า ใช้ Link หรือ NavLink แทนแท็ก a เพื่อเปลี่ยนหน้าโดยไม่โหลดใหม่ อ่านพารามิเตอร์ใน URL ด้วย useParams ใช้ Outlet ทำ Layout ร่วม เปลี่ยนหน้าจากโค้ดด้วย useNavigate และใส่ Route ที่ path เป็นเครื่องหมายดอกจันไว้ท้ายสุดเพื่อแสดงหน้า 404
เหมาะกับนักเรียน นักศึกษา และผู้เริ่มต้นที่ต้องการเป็น Front-end Developer, Web Developer ที่อยากเริ่มใช้ React, ครูอาจารย์ที่ต้องการสอนการพัฒนาเว็บสมัยใหม่ และนักไอทีที่ต้องสร้างหน้าเว็บสำหรับระบบภายใน ควรเขียน HTML, CSS และ JavaScript พื้นฐานได้ ทั้งตัวแปร ฟังก์ชัน Array และ Object และควรนำโน้ตบุ๊กที่ติดตั้ง Node.js และ VS Code ได้มาด้วย
สร้างโปรเจกต์ React 19 ด้วย Vite แบ่งหน้าเว็บเป็น Component ส่งค่าด้วย Props จัดการ State และ Event ดึงข้อมูลจาก REST API ทำเว็บหลายหน้าด้วย React Router สร้างฟอร์มพร้อมตรวจข้อมูล ทำระบบ CRUD และ Deploy แอปขึ้นเว็บจริงได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น สร้างหน้าเว็บที่เชื่อมกับ API ของระบบที่องค์กรใช้อยู่ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449
JavaScript เป็นภาษาเดียวที่เบราว์เซอร์ทุกตัวเข้าใจ จึงอยู่เบื้องหลังเกือบทุกปุ่ม เมนู ฟอร์ม และหน้าจอที่โต้ตอบได้บนเว็บ และยังเป็นพื้นฐานของ React, Vue, Node.js และเครื่องมือสมัยใหม่อีกมาก แต่ผู้เริ่มต้นจำนวนมากเรียนจากตัวอย่างรุ่นเก่าที่ยังใช้ var, jQuery…
jQuery ยังอยู่ในเว็บไซต์ ระบบหลังบ้าน และปลั๊กอินขององค์กรจำนวนมาก และ jQuery 4 ที่ออกในปี 2026 ได้ตัด API เก่าหลายตัวและเลิกรองรับเบราว์เซอร์รุ่นเก่า งานที่เคยพึ่งปลั๊กอินรุ่นเก่า เช่น jQuery Templates หรือการอัปโหลดไฟล์ผ่าน Flash ก็ไม่ควรใช้อีกแล้ว…
Ajax ทำให้หน้าเว็บส่งและรับข้อมูลกับเซิร์ฟเวอร์ได้โดยไม่ต้องโหลดทั้งหน้าใหม่ จึงเป็นพื้นฐานของฟอร์มที่ตอบสนองทันที ช่องค้นหาที่แนะนำคำ ตะกร้าสินค้า และหน้าระบบหลังบ้านแทบทุกระบบ ปัจจุบันเบราว์เซอร์มี Fetch API ให้ใช้เป็นมาตรฐาน ขณะที่ระบบ PHP จำนวนมากยังใช้…
