หลักสูตร Intermediate React Native เป็นการอบรมต่อยอดจากขั้นพื้นฐานด้วย Expo ทั้ง Layout ที่รองรับหลายขนาดจอ Component ที่ใช้ซ้ำได้ การจัดการ State ฟอร์มพร้อมตรวจข้อมูล และ Navigation หลายชั้น เหมาะกับผู้ที่สร้างแอป React Native แรกได้แล้ว จบแล้วสร้างแอปอ่านข่าวที่เชื่อม API จาก Node.js ได้
หลังจากสร้างแอป React Native แรกได้แล้ว โจทย์ถัดไปคือทำให้แอปดูดีบนทุกขนาดจอ แยก Component ให้ใช้ซ้ำได้ จัดการ State ที่เริ่มซับซ้อน ทำฟอร์มที่ตรวจข้อมูลได้จริง และวางโครง Navigation หลายชั้นโดยไม่สับสน ทักษะเหล่านี้เป็นช่องว่างระหว่างแอปตัวอย่างกับแอปที่พร้อมให้ผู้ใช้จริงใช้งาน
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ต่อยอดจาก Basic React Native with Expo ใช้ Expo SDK 57, React Native 0.86 และ TypeScript พาผู้เรียนออกแบบ Layout ขั้นสูง สร้าง Component และ Theme ที่ใช้ซ้ำได้ จัดการ State ด้วย useReducer และ Context ทำฟอร์มด้วย React Hook Form และ Zod รวม Drawer, Tabs และ Stack ด้วย Expo Router ดึงข้อมูลจาก API เก็บข้อมูลในเครื่อง และใช้กล้องกับตำแหน่ง ปิดท้ายด้วย Workshop แอปอ่านข่าวที่เชื่อม API จาก Node.js (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Intermediate)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร Intermediate React Native รุ่นเดิม เป็นระดับกลางระหว่าง Basic React Native with Expo และ Advanced React Native with Expo เนื้อหาเขียนใหม่ให้ตรงกับ Expo SDK 57, React Native 0.86 และ Expo Router อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Intermediate เหมาะกับผู้ที่สร้างแอป React Native แรกได้แล้วและต้องการทำแอปที่ซับซ้อนขึ้น ผู้เรียนจะได้ฝึก Layout, Component, State, ฟอร์ม และ Navigation หลายชั้น ก่อนรวมทุกอย่างในแอปอ่านข่าวที่เชื่อม API จาก Node.js พร้อมรับ Lab Guide และซอร์สโค้ดกลับไปใช้งานต่อ
Section 1: Lab: ทบทวน Core Components และโปรเจกต์ Expo
Section 2: Lab: ออกแบบ Layout ขั้นสูง
Section 3: Lab: หน้า Welcome และ Onboarding
Section 4: Lab: Reusable Components และ Theme
Section 5: Lab: จัดการ State ด้วย useReducer และ Context
Section 6: Lab: Input และ Form Components
Section 7: Lab: ตรวจข้อมูลด้วย React Hook Form และ Zod
Section 8: Lab: Navigation ด้วย Expo Router
Section 9: Workshop: รวม Drawer, Tabs และ Stack
Section 10: Lab: ดึงข้อมูลจาก API ด้วย Custom Hook
Section 11: Lab: เก็บข้อมูลในเครื่อง
Section 12: Lab: กล้อง รูปภาพ และตำแหน่ง
Section 13: Workshop: แอปอ่านข่าวเชื่อม API จาก Node.js
Section 14: ทดสอบบนมือถือจริงและแนวทางต่อยอด
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
useState เหมาะกับค่าที่เปลี่ยนแบบตรงไปตรงมา เช่น ข้อความในช่องกรอกหรือสถานะเปิดปิด ส่วน useReducer รวมการเปลี่ยน State ไว้ในฟังก์ชัน Reducer ที่รับ State เดิมกับ Action แล้วคืน State ใหม่ Component เพียงเรียก dispatch พร้อมชนิดของ Action เหมาะกับ State ที่มีหลายค่าเกี่ยวข้องกันหรือมีหลายวิธีเปลี่ยน เช่น ตะกร้าสินค้า ทำให้ตรวจสอบและทดสอบ Logic ได้ง่ายขึ้น และใช้ร่วมกับ Context เพื่อแชร์ข้อมูลทั้งแอปได้
Component แม่ส่งข้อมูลลงไปให้ลูกผ่าน Props เช่น ข้อความ รูปภาพ หรือสไตล์ โดยกำหนดชนิดของ Props ด้วย TypeScript ทำให้ Component เดียวใช้ซ้ำได้กับข้อมูลต่างกัน ส่วนการส่งข้อมูลกลับขึ้นมา ให้แม่ส่งฟังก์ชัน Callback ลงไปเป็น Props แล้วลูกเรียกฟังก์ชันนั้นพร้อมค่าที่ต้องการ เช่น เมื่อกดปุ่มหรือพิมพ์ในช่องกรอก State จึงอยู่ที่แม่เพียงที่เดียว และลูกทุกตัวแสดงข้อมูลชุดเดียวกัน
Expo Router กำหนด Navigation จากโครงสร้างโฟลเดอร์ แต่ละโฟลเดอร์มีไฟล์ _layout บอกว่าใช้ Navigator แบบไหน วิธีที่นิยมคือใช้ Drawer เป็นชั้นนอกสุดสำหรับเมนูหลัก ในนั้นวางโฟลเดอร์ Tabs และในแต่ละแท็บใช้ Stack สำหรับหน้ารายละเอียด ส่งค่าระหว่างหน้าผ่าน Parameter แล้วอ่านด้วย useLocalSearchParams และควรวางแผนว่า Header จะแสดงจากชั้นไหนเพื่อไม่ให้ซ้อนกัน
เอกสารของ React Native แนะนำให้เริ่มแอปใหม่ด้วย Framework อย่าง Expo เพราะมี File-based Routing, ไลบรารีสำหรับความสามารถของเครื่องที่ดูแลต่อเนื่อง และเครื่องมือ Build ที่ช่วยลดงานตั้งค่าโปรเจกต์ Native ผู้เรียนจึงใช้เวลากับการเขียนแอปได้มากขึ้น และยังเพิ่มโค้ด Native ได้ภายหลังเมื่อจำเป็น ความรู้เรื่อง Component, State และ Layout ที่เรียนใช้ได้กับ React Native ทุกแบบ
เหมาะกับผู้ที่อยากพัฒนาแอป Android และ iOS ด้วย JavaScript หรือ TypeScript และต้องการเพิ่มทักษะ React Native อีกขั้นก่อนไปถึงระดับสูง ควรผ่านหลักสูตร Basic React Native with Expo มาแล้ว หรือมีความรู้เทียบเท่า คือสร้างโปรเจกต์ Expo ใช้ Core Components และทำ Navigation พื้นฐานได้ และรู้จัก REST API กับข้อมูล JSON
ออกแบบ Layout ที่รองรับหลายขนาดจอ ทำหน้า Welcome และ Onboarding สร้าง Component และ Theme ที่ใช้ซ้ำได้ จัดการ State ด้วย useReducer และ Context สร้างฟอร์มที่ตรวจข้อมูลด้วย React Hook Form และ Zod วาง Drawer, Tabs และ Stack ในแอปเดียว ดึงข้อมูลจาก API เก็บข้อมูลในเครื่อง ใช้กล้องและตำแหน่ง และสร้างแอปอ่านข่าวที่เชื่อม API จาก Node.js ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
การเขียนโปรแกรมเป็นพื้นฐานของงานไอทีแทบทุกด้าน ทั้งเว็บไซต์ แอปบนมือถือ โปรแกรมบนคอมพิวเตอร์ และระบบที่ทำงานกับข้อมูล แม้วันนี้จะมี AI ช่วยเขียนโค้ด ผู้ที่เข้าใจหลักคิดของโปรแกรมและโครงสร้างข้อมูลก็ยังจำเป็น เพราะต้องสั่งงาน ตรวจผล และแก้ปัญหาให้ได้เอง…
เว็บแอปพลิเคชันทุกวันนี้ต้องตอบสนองเร็ว ใช้งานลื่นเหมือนแอปบนมือถือ และแก้ไขเพิ่มเติมได้ง่ายเมื่อระบบโตขึ้น React เป็นไลบรารีสร้าง User Interface ที่นิยมมากที่สุดตัวหนึ่ง เพราะแบ่งหน้าเว็บออกเป็น Component ที่นำกลับมาใช้ซ้ำได้…
นักพัฒนาที่เขียน React บนเว็บอยู่แล้วมีพื้นฐานเกินครึ่งของการทำแอปมือถือด้วย React Native เพราะใช้ Component, Props, State และ Hooks แบบเดียวกัน สิ่งที่ต้องเรียนเพิ่มคือส่วนที่ต่างจากเว็บ ได้แก่ ไม่มี DOM และ CSS แบบเดิม ใช้ Core Components…
