บทแนะนำ & การติดตั้ง
ทำไมต้อง Astro, islands architecture, MPA เทียบ SPA, ส่ง JS น้อยลง, หน้าแรกของคุณ เริ่ม →
Astro สำหรับนักพัฒนา React
คุณรู้จัก component, props และ JSX อยู่แล้ว คอร์สนี้จับคู่ทุกอย่างเข้ากับ Astro — .astro component ที่รันฝั่งเซิร์ฟเวอร์, islands architecture และ content collections — พร้อมแสดงวิธีใช้ React component เดิมของคุณต่อไปได้
สิ่งที่คุณจะได้เรียน
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียน”.astro Components
Frontmatter ที่รันฝั่งเซิร์ฟเวอร์, Astro.props, slot, expression — เทียบ JSX สร้าง →
Islands & การใช้ React
วาง React component ของคุณลงไปแล้ว hydrate ด้วย client: directive — partial เทียบ full-app hydration hydrate →
Routing & Layouts
File-based routing, dynamic route, layout — เทียบ react-router/Next นำทาง →
Content & Data
Fetch ใน frontmatter ตอน build, content collections — เทียบ getServerSideProps/useEffect โหลดข้อมูล →
Styling
Scoped style, global style, CSS variable, Tailwind — เทียบ CSS modules/styled-components จัดสไตล์ →
เครื่องมือ ทดสอบ & Deploy
Astro CLI, integration, astro check, static เทียบ SSR, deploy — เทียบ toolchain ของ Next ส่งงานจริง →
Micro-Frontends กับ Astro
ประกอบ UI ที่สร้างแยกกัน — island ข้ามเฟรมเวิร์ก, การรวมแบบ build-time เทียบ run-time และการ deploy แยกอิสระ ประกอบ →
คอร์สนี้ทำงานยังไง
หัวข้อที่มีชื่อว่า “คอร์สนี้ทำงานยังไง”เทียบกับ React ก่อนเสมอ
ทุกแนวคิดเริ่มจาก React ที่คุณรู้ แล้วค่อยแสดงวิธีของ Astro — พร้อมชี้จุดที่ต่างกัน
รัน Astro จริง
ตัวอย่างเปิดใน StackBlitz เป็นโปรเจกต์ Astro ที่รันได้จริง — คลิกเดียว ไม่ต้องติดตั้งในเครื่อง
แบบทดสอบ & ความคืบหน้า
ทบทวนความเข้าใจหลังแต่ละบท ความคืบหน้าถูกบันทึกไว้ในเครื่อง
สองภาษา
มีทั้งภาษาอังกฤษและไทย — สลับได้ตลอดจากแถบด้านบน