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

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

หลักสูตร Basic React JS สำหรับผู้เริ่มต้น เป็นการอบรมพื้นฐานการสร้างหน้าเว็บแบบ Single Page Application ด้วย React ตั้งแต่หลักการพัฒนา การเขียน JSX การใช้ Babel การสร้าง Component การใช้ Props และ State จนถึงการตั้งค่า Routes เหมาะกับนักพัฒนาเว็บ นักศึกษา และนักไอทีที่มีพื้นฐาน HTML และการเขียนโปรแกรม

ราคาเริ่มต้น 5,500 บาท / ท่าน ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

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
เรียนรู้การทำงานกับ Babel
เรียนรู้การสร้าง Component
เรียนรู้การกำหนดคุณสมบัติให้กับ Component ที่สร้าง
เรียนรู้การทำงานกับ Props และ State
เรียนรู้การตั้งค่า Routes ด้วย React Router
เรียนรู้การทำงานกับแบบฟอร์ม
เรียนรู้การเรียกใช้ REST API ด้วย Axios และการ Deploy แอปพลิเคชัน

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

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

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

มีความรู้ความเข้าใจในเรื่องเกี่ยวกับ 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 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 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
การจัดกลุ่มเส้นทางด้วย Routes และ Route
การเปลี่ยนเส้นทางด้วย Navigate และ useNavigate
การกำหนดเงื่อนไขในการเปลี่ยนเส้นทาง
การเขียนแสดงข้อผิดพลาด 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 ไปยัง Netlify หรือ Vercel
แนวทางแก้ไขปัญหาเรื่อง CORS
แนวทางแก้ไขปัญหาเรื่อง Fallback URL

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

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

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

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

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

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

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

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

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

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

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

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

เหมาะกับนักพัฒนาเว็บ นักเรียนนักศึกษา ครู อาจารย์ และนักไอทีที่อยากเริ่มสร้าง Single Page Application ด้วย React ควรใช้ภาษา HTML ได้ มีพื้นฐานการเขียนโปรแกรม เข้าใจการพัฒนาซอฟต์แวร์และการเขียน Web Application และมีความรู้เรื่องระบบฐานข้อมูลเบื้องต้น

เรียนจบหลักสูตร Basic React JS สำหรับผู้เริ่มต้น แล้วทำอะไรได้บ้าง

สร้างคอมโพเนนต์ด้วย JSX ตกแต่งด้วย CSS และ Bootstrap 5 ส่งข้อมูลด้วย Props และจัดการ State ตั้งค่าหลายหน้าด้วย React Router ทำฟอร์มพร้อมตรวจความถูกต้องด้วย React Hook Form เรียก REST API ด้วย Axios เพื่อทำ CRUD และ build แล้ว deploy แอปไปยัง GitHub Pages, Netlify หรือ Vercel ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

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

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