ฟรอนต์เอนด์

Frontend Explorer 2

ต่อยอดจาก Frontend Explorer — เจาะลึก React State, Forms, เรียก API จริง, และ Dynamic Route จบด้วย Mini Project ของตัวเองใน 6 ชั่วโมง

6 ชม.ต่อยอดNext.js + React + Fetch API

🗺️ เส้นทางการเรียน

11 · ทบทวน + Workshop

Final Project

📘เกี่ยวกับคอร์ส

คำอธิบายคอร์ส

Frontend Explorer 2 คือคอร์สภาคต่อสำหรับผู้ที่ผ่าน Frontend Explorer มาแล้ว — ทบทวนพื้นฐาน แบบเร็วๆ แล้วลงมือ Workshop สร้างเว็บจากศูนย์โดยไม่เปิดสไลด์ จากนั้นเจาะลึกสิ่งที่ Frontend Explorer รอบแรกยังไม่ได้แตะ: การจัดการ State ด้วย useState, การสร้างฟอร์มรับข้อมูลจริง, การเรียก API จริงด้วย fetch, และ Dynamic Route จบคอร์สด้วย Mini Project ที่รวมทุกอย่างเข้า ด้วยกัน — Workshop ทุกอันทำบนโปรเจค Next.js จริงที่ดาวน์โหลดไปรันบนเครื่องตัวเอง ไม่มี Editor/Live Preview จำลองในแพลตฟอร์มแล้ว โค้ดตัวอย่างในแต่ละ Mission เป็นแค่ snippet ให้ก๊อป ไปวางแล้วปรับเอง

เป้าหมายการเรียนรู้

ใช้ useState จัดการข้อมูลที่เปลี่ยนแปลงบนหน้าจอได้
จัดการ Event (onClick, onChange) ได้คล่องมือ
สร้างฟอร์มรับข้อมูลจากผู้ใช้แบบ Controlled Component ได้
เรียก API จริงด้วย fetch พร้อมจัดการ Loading/Error/Empty State
สร้าง Dynamic Route (/posts/[id]) เพื่อทำหน้า Detail ได้
ประกอบทุกอย่างเป็น Mini Project (Blog Viewer) ของตัวเอง 1 โปรเจคจบ

🎒เตรียมตัวให้พร้อม

ข้อมูลคอร์ส

เวอร์ชัน: 1.0
ระยะเวลา: 1 วัน (6 ชั่วโมง)
ระดับ: ต่อยอด (สำหรับคนที่ผ่าน Frontend Explorer มาแล้ว)
เทคโนโลยีหลัก: Next.js + React + Fetch API

พื้นฐานที่ต้องมี

ผ่านคอร์ส Frontend Explorer มาแล้ว (หรือมีพื้นฐาน HTML/JSX, CSS, Layout, Component, Props เทียบเท่า)
เปิดโปรเจค Next.js เองได้ (npm install, npm run dev)
ติดตั้ง Node.js และ VS Code ไว้พร้อมแล้ว

ผลลัพธ์ที่คาดหวัง

เมื่อจบคอร์ส ผู้เรียนจะมี Mini Project (Blog Viewer หรือ Product List) ที่ดึงข้อมูลจาก API จริง มีหน้า List และหน้า Detail ผ่าน Dynamic Route พร้อม Loading/Error State ครบ และเข้าใจ พื้นฐานที่จำเป็นก่อนไปเรียน Backend ต่อ (เพราะจะเริ่มสงสัยว่า API ที่เรียกมาสร้างเองได้ไหม ข้อมูลเก็บไว้ที่ไหน)

วิธีการสอน

แต่ละ Chapter มี Mission ทฤษฎีสั้นๆ (มี snippet โค้ดให้ดูเป็นตัวอย่าง) ตามด้วย Boss Battle ที่เป็น Workshop ลงมือทำจริงบนเครื่องตัวเอง เน้นให้ทำเองมากที่สุดโดยไม่เปิดสไลด์ดู ผู้สอนคอยช่วยเมื่อจำเป็นเท่านั้น