Mission 1: เปิดโปรเจคครั้งแรก

เป้าหมายของ Mission นี้: ทำความรู้จัก React และ Next.js ว่าคืออะไร แล้วเห็น หน้าตาโปรเจค Next.js จริงเป็นครั้งแรก

React และ Next.js คืออะไร

React คือไลบรารีสำหรับสร้าง UI โดยแบ่งหน้าเว็บออกเป็นชิ้นเล็กๆ ที่เรียกว่า Component แล้วนำมาประกอบกัน Next.js คือ Framework ที่สร้างขึ้นบน React อีกที ช่วยจัดการเรื่อง routing, การ build, และ performance ให้อัตโนมัติ — เว็บไซต์ ชื่อดังอย่าง Netflix, TikTok และ Notion บางส่วนก็ใช้ React ในการสร้าง UI

ทำไมต้องมี Framework

ถ้าเขียนเว็บด้วย HTML/CSS/JS ธรรมดาไปเรื่อยๆ พอเว็บใหญ่ขึ้นจะเริ่มยุ่งเหยิง: โค้ดซ้ำเยอะ, จัดการหลายหน้ายาก, ปรับให้ทำงานเร็วเองก็ยาก Framework อย่าง Next.js เข้ามาช่วยวางโครงสร้างและจัดการเรื่องพวกนี้ให้อัตโนมัติ เราจะได้โฟกัสที่การสร้าง หน้าตาและ feature จริงๆ

คำศัพท์สำคัญ

ตัวอย่าง

หน้าเว็บหนึ่งหน้าที่เขียนด้วย React จะมีลักษณะประมาณนี้ (เราจะเรียกโค้ดแบบนี้ว่า JSX ในบทถัดไป):

function HomePage() {
  return <h1>สวัสดี Frontend Explorer!</h1>;
}

เริ่มต้นบนเครื่องจริง

Chapter นี้ทำงานบนเครื่องของคุณเองทั้งหมด ไม่มี Editor/Live Preview ในแพลตฟอร์ม แล้ว — ดาวน์โหลดโปรเจค Next.js เริ่มต้นจากปุ่ม "ดาวน์โหลด (.zip)" ที่หน้า Chapter นี้ แตกไฟล์ แล้วเปิดโฟลเดอร์ด้วย VS Code ไว้ให้พร้อม จะได้ใช้ไล่ทำทีละ Mission จนถึง Boss Battle ท้าย Chapter