พัฒนาเว็บไซต์ · WDC-54

Basic React JS สำหรับผู้เริ่มต้น

12 ชั่วโมง 2 วัน

อัปเดตล่าสุด 25 ก.ย. 2569

หลักสูตร Basic React JS สำหรับผู้เริ่มต้น คือการอบรม 12 ชั่วโมงของสถาบันไอทีจีเนียส เว็บแอพปัจจุบันมีแนวโน้ม และเทรนด์ไปในทิศทางของ SPA (Single Page Application) กันโดยมากแล้ว ด้วยข้อดีเรื่องประสบการณ์ (experience) ที่ดีกว่าของผู้ใช้…

รอบการอบรม

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร — ลงชื่อจองไว้ได้เลย แล้วเราจะติดต่อกลับเมื่อเปิดรอบถัดไป หรือขอจัดอบรมแบบ in-house สำหรับทีมของคุณ

ขอใบเสนอราคาอบรมองค์กร

Basic React JS สำหรับผู้เริ่มต้น เว็บแอพปัจจุบันมีแนวโน้ม และเทรนด์ไปในทิศทางของ SPA (Single Page Application) กันโดยมากแล้ว ด้วยข้อดีเรื่องประสบการณ์ (experience) ที่ดีกว่าของผู้ใช้ ประสิทธิภาพ (performance) ที่ดีกว่าทั้งเรื่องความเร็ว ความเบา ความคล่องตัวในการใช้งาน นับเป็นข้อดีทั้งฝั่งผู้ใช้และนักพัฒนาเองด้วย

React.js เป็น Javascript Library หรือจะเรียกว่าเป็น Javascript Framework ก็ได้ ที่เราใช้สำหรับสร้างหน้าเว็บ พร้อมด้วย action ต่างๆ ที่ทำให้เว็บของเราดูน่าสนใจ

จุดเด่นของ React ที่ทำให้มันน่านำมาใช้งานนั้นก็คือ มันมีระบบแคชในตัวทำให้หน้าเว็บของเรามีการตอบสนองที่เร็ว เหมาะแก่การนำไปทำ SPA เป็นอย่างยิ่ง

การเขียน React เรายังสามารถแยกองค์ประกอบของหน้าเว็บเรา ออกเป็นส่วนๆ เรียกว่าเป็น component แล้วนำมาประกอบกันเป็นหน้าเว็บได้ ซึ่งทำให้เราสามารถ นำ component ของเราไปใช้ซ้ำที่อื่นได้ ไม่ต้องเสียเวลาเขียนใหม่

ด้วยจุดเด่นเหล่านี้เว็บระดับโลกมากมาย อาทิ Facebook , Instagram, WhatApp, Netflix ,Yahoo, Airbnb , Dropbox เลือกนำมาใช้งานและพัฒนาโปรดักส์และบริการของตัวเอง

ในหลักสูตรนี้จะถือเป็นก้าวแรกสำหรับผู้เริ่มต้นเรียนรู้ React ด้วยแนวทางที่ถูกต้อง จากผู้สอนที่มีประสบการณ์ใช้งาน React บน Production มาหลากหลายโครงการแล้ว จะช่วยให้ผู้เริ่มต้นทุกคนเรียนรู้อย่างเข้าใจ พร้อมก้าวสู่การนำไปประยุกต์พัฒนาเว็บแอพของตัวเองได้ในอนาคต

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

เรียนรู้เรื่องเกี่ยวกับหลักและแนวทางในการพัฒนางานด้วย React
เรียนรู้เรื่องเกี่ยวกับการใช้งาน React
เรียนรู้การเขียน JSX
เรียนรู้การทำงานกับ Bable
เรียนรู้การสร้าง Component
เรียนรู้การกำหนดคุณสมบัติให้กับ Component ที่นร้าง
เรียนรู้การทำงานกับ Props และ State
เรียนรู้การ Setting routes
เรียนรู้การทำงานกับแบบฟอร์ม
เข้าใจ life cycle ของ component

หลักสูตรนี้เหมาะสำหรับ

นักเรียนนักศึกษา
ครู อาจารย์ วิทยากรที่สนใจ
นักวิชาการ นักไอที หรือผู้ดูและระบบ
ตลอดจนผู้สนใจทั่วไป

พื้นฐานของผู้เข้าอบรม

มีความรู้ความเข้าใจในเรื่องเกี่ยวกับ Internet และสามารถใช้งานภาษา HTML ได้
มีพื้นฐานการเขียนโปรแกรม
มีความรู้เกี่ยวกับ Software Development
มีความรู้เกี่ยวกับการเขียน Web Application
มีความรู้เกี่ยวกับระบบฐานข้อมูล

หัวข้อการฝึกอบรม

ภาพรวมหัวข้อการอบรม

Module 1: รู้จัก React.js
Module 2: แนะนำ JSX
Module 3: แนะนำ React Component
Module 4: การใช้งาน css และ Bootstrap 5 framework ใน React
Module 5: การทำงานกับ Props
Module 6: State ใน React
Module 7: การใช้งาน React Router
Module 8: การทำงานกับแบบฟอร์มใน React
Module 9: การใช้ React กับ REST API
Module 10: Deployment

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

Day 1

Module 1: รู้จัก React.js

React.js คืออะไร
ติดตั้งเครื่องมือบน Google Chrome สำหรับใช้พัฒนา React
สำรวจเว็บไซต์ที่พัฒนาด้วย React
การ Render ด้วย React อย่างมีประสิทธิภาพ
อัพเดท React เป็นรุ่นล่าสุด
ติดตั้งเครื่องมือสำหรับการพัฒนา React.js

Module 2: แนะนำ JSX

ทำไมต้องใช้ JSX
ข้อกำหนดพื้นฐานของ JSX
การแสดงค่าของตัวแปรใน JSX
การคำนวณค่าในและแสดงผล (Expression) ใน JSX
การแสดงหรือซ่อนเนื้อหาใน JSX

Module 3: แนะนำ React Component

คุณสมบัติพื้นฐานของคอมโพเนนต์
วิธีสร้างคอมโพเนนต์ใช้เอง
ยกตัวอย่างคลาสคอมโพเนนต์และฟังก์ชันคอมโพเนนต์และความแตกต่าง
อธิบายโครงสร้างของคอมโพเนนต์ใน React อย่างละเอียด
การนำคอมโพเนนต์ไปใช้งาน
เทคนิคการ reuse (ใช้ซ้ำ) ที่ดีในคอมโพเนนต์

Module 4: การใช้งาน css และ Bootstrap 5 framework ใน React

แนวทางการใช้ css ปรับแต่งหน้าตาคอมโพเนนต์
วิธีกำหนด css แบบ inline
การกำหนด css แบบ Link Style
การใช้ Bootstrap 5 ปรับแต่งหน้าตาของคอมโพเนนต์

Day 2

Module 5: การทำงานกับ Props

รู้จักกับ props ใน React
วิธีส่งค่าผ่าน props ไปยังคอมโพเนนต์ลูก (child)
การส่งค่าหลายๆ ค่าไปยังคอมโพเนนต์ลูก (child)
การนำเอาค่า props มาใช้ในคอมโพเนนต์ทั้งในแบบ คลาสและฟังก์ชันคอมโพเนนต์
การับค่า children ที่มาจาก props

Module 6: State ใน React

รู้จัก State ใน React
การกำหนดค่าเริ่มต้นให้กับ State
วิธีการใช้งาน State ในคลาสและฟังก์ชันคอมโพเนนต์
การอัพเดทค่า state ในฟังก์ชันและคลาสคอมโพเนนต์
การส่งค่าฟังก์ชัน (method) ไปกับ props
การอ่านค่าพารามิเตอร์ที่ส่งไปพร้อมกับ props

Module 7: การใช้งาน React Router

รู้จัก React Router
การติดตั้ง React Router
แนะนำภาพรวมของการใช้งาน React Router
การกำหนด url ที่จะต้องใช้ในแอพพลิเคชั่น
การกำหนด Link
การแสดงสถานะปัจจุบันของลิ้งก์
การส่งค่าไปพร้อมกับลิงก์บน url
การส่งค่าคิวรี่สตริงไปพร้อม url
การใช้งาน switch
การใช้งาน redirect
การกำหนดเงื่อนไขในการเปลี่ยนเส้นทาง
การเขียนแสดงข้อผิดพลาด 404 เมื่อไม่พบ url ที่ร้องขอ

Module 8: การทำงานกับแบบฟอร์มใน React

สร้างแบบฟอร์มใน jsx ด้วย bootstrap 5
การสร้างแบบฟอร์มด้วยวิธีอ้างอิงกับ state
การใช้ React Hook form จัดการฟอร์มอย่างมืออาชีพ
การตรวจสอบความถูกต้องของแบบฟอร์ม
การรับค่าจากฟอร์มไปใช้งาน
ตัวอย่างการเขียนแบบฟอร์ม ล็อกอินและลงทะเบียน

Module 9: การใช้ React กับ REST API

ติดตั้ง Web Server สำหรับ API ด้วย Strapi node.js framework
ทดสอบการทำงาน Create-Read-Update-Delete (CRUD) ของ API ผ่าน Postman
ใช้งาน HTTP Request อย่างง่ายด้วย Axios
ฝึกเขียน CRUD Rest API ใน React.js ร่วมกับ Bootstrap 5

Module 10: Deployment

การเตรียมความพร้อมของ project ก่อน deploy
การใช้คำสั่งสำหรับการ build project แบบ production
แนะนำวิธีการ deploy ไปยัง github page
แนะนำวิธีการ deploy project ไปยัง Heroku cloud
แนวทางแก้ไขปัญหาเรื่อง CORS
แนวทางแก้ไขปัญหาเรื่อง Fallback URL

ตัวอย่าง workshop บางส่วนในหลักสูตรนี้

คำถามที่พบบ่อย

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

เหมาะกับ นักเรียนนักศึกษา · ครู อาจารย์ วิทยากรที่สนใจ · นักวิชาการ นักไอที หรือผู้ดูและระบบ พื้นฐานที่ผู้เรียนควรมี มีความรู้ความเข้าใจในเรื่องเกี่ยวกับ Internet และสามารถใช้งานภาษา HTML ได้ · มีพื้นฐานการเขียนโปรแกรม หากไม่แน่ใจว่าพื้นฐานพอหรือไม่ ปรึกษาทีมงานได้ฟรีทาง LINE @itgenius หรือโทร 02-570-8449

หลักสูตร Basic React JS สำหรับผู้เริ่มต้น ราคาเท่าไร ใช้เวลาเรียนกี่ชั่วโมง

ราคาปกติ 5,500 บาท ใช้เวลาอบรม 12 ชั่วโมง ราคานี้รวมเอกสารประกอบการอบรม อาหารกลางวัน และอาหารว่างตลอดหลักสูตร ชำระค่าอบรมด้วยการโอนเข้าบัญชีบริษัท แล้วแจ้งชำระเงินผ่านหน้าแจ้งชำระเงินของเว็บไซต์ และขอใบเสร็จรับเงินหรือใบกำกับภาษีในนามบริษัทได้

เรียนจบได้รับ Certificate หรือไม่

ได้รับ ผู้ผ่านการอบรมทุกท่านจะได้รับใบประกาศนียบัตร (Certificate of Completion) จากสถาบันไอทีจีเนียส ใบประกาศแต่ละใบมีเลขที่ของตัวเอง ใครก็ตามที่มีเลขที่ใบประกาศตรวจสอบความถูกต้องออนไลน์ได้ที่หน้าตรวจสอบใบประกาศของสถาบัน จึงใช้แนบแฟ้มผลงานหรือส่งให้ฝ่ายบุคคลประกอบการพัฒนาบุคลากรได้

อบรมที่ไหน มีเรียนแบบออนไลน์หรือไม่

เรียนได้ทั้งแบบออนไซต์ที่สถาบันไอทีจีเนียส และนัดเรียนผ่านออนไลน์ และรับจัดอบรมเฉพาะทีม (In-house Training) ให้องค์กร สอบถามรอบและสถานที่ได้ที่ LINE @itgenius หรือโทร 02-570-8449

ถ้าเรียนไม่ทันหรือขาดเรียน มีเรียนซ้ำ/เรียนชดเชยหรือไม่

มี ผู้เรียนสามารถแจ้งขอเรียนซ้ำ (repeat) ในรอบถัดไปของหลักสูตรเดียวกันได้ฟรีตามเงื่อนไขของสถาบัน แจ้งชื่อหลักสูตรและรอบที่เคยเรียนกับทีมงาน แล้วทีมงานจะตรวจสอบและแจ้งรอบที่ยังมีที่นั่งว่างให้เลือก สอบถามได้ที่ LINE @itgenius หรือโทร 02-570-8449

สมัครเรียนหรือขอใบเสนอราคาในนามบริษัทได้อย่างไร

สมัครออนไลน์ได้จากแบบฟอร์มลงทะเบียนบนหน้านี้ ลงทะเบียนผู้เข้าอบรมหลายคนได้ในครั้งเดียว และกรอกเลขประจำตัวผู้เสียภาษีกับที่อยู่สำหรับออกใบกำกับภาษีได้ในฟอร์ม หรือขอใบเสนอราคา (Quotation) ในนามนิติบุคคลได้ทันทีจากปุ่มขอใบเสนอราคา สอบถามเพิ่มเติมโทร 02-570-8449 หรือ LINE @itgenius