ข้ามไปยังเนื้อหา
Astro for React Developers

Importing Components

การประกอบ component ใน Astro ทำงานเหมือนกับที่คุณคาดหวังจาก React ทุกประการ import ใน frontmatter แล้วนำไปใช้ใน template syntax ของการ import เป็น ES module มาตรฐาน ข้อกำหนดเดียวคือ import ต้องอยู่ ภายในบล็อก --- frontmatter

การ import และใช้งาน component

หัวข้อที่มีชื่อว่า “การ import และใช้งาน component”
React
// src/pages/Home.jsx
import Hero from '../components/Hero';
import Footer from '../components/Footer';


export default function Home() {
  return (
    <>
      <Hero title="Welcome" subtitle="Built with React" />
      <main>
        <p>Page content here.</p>
      </main>
      <Footer />
    </>
  );
}
Astro
---
// src/pages/index.astro
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro';
---
<Hero title="Welcome" subtitle="Built with Astro" />
<main>
  <p>Page content here.</p>
</main>
<Footer />

ความแตกต่างที่สำคัญ:

  • import ของ Astro จะอยู่ ระหว่าง fence --- เสมอ ไม่ใช่ที่ด้านบนสุดของไฟล์
  • .astro เป็น extension ที่จำเป็นต้องใส่ใน path ของ import (ต่างจาก .jsx/.tsx ของ React ที่ bundler มักจะ resolve ให้อัตโนมัติ)
  • หน้าเพจของ Astro ไม่จำเป็นต้องมี root wrapper element เพราะ template เป็น document fragment

การซ้อนและการประกอบ (Nesting and composition)

หัวข้อที่มีชื่อว่า “การซ้อนและการประกอบ (Nesting and composition)”

การประกอบทำงานเหมือนกับ React ทุกประการ — ส่ง props ส่ง slot และซ้อนได้ลึกเท่าที่คุณต้องการ Astro component สามารถ import และใช้ Astro component อื่น, React component (ในรูปแบบ island), Svelte component และอื่น ๆ ได้

React
// PageLayout.jsx
import Header from './Header';
import Sidebar from './Sidebar';
import Card from './Card';


export default function PageLayout({ posts }) {
  return (
    <div className="layout">
      <Header />
      <div className="content">
        <Sidebar />
        <main>
          {posts.map((post) => (
            <Card key={post.id} title={post.title} />
          ))}
        </main>
      </div>
    </div>
  );
}
Astro
---
// PageLayout.astro
import Header from './Header.astro';
import Sidebar from './Sidebar.astro';
import Card from './Card.astro';


const { posts } = Astro.props;
---
<div class="layout">
  <Header />
  <div class="content">
    <Sidebar />
    <main>
      {posts.map((post) => (
        <Card title={post.title} />
      ))}
    </main>
  </div>
</div>

หมายเหตุเกี่ยวกับ snippet ที่รันได้: playground ของ StackBlitz รันไฟล์ src/pages/index.astro เพียงไฟล์เดียว ตัวอย่างด้านล่างจึงเขียน markup ของ “sub-component” แบบ inline ลงไปตรง ๆ เพื่อให้อยู่ในไฟล์เดียวได้ครบ ในโปรเจกต์จริงคุณจะแยกออกเป็นไฟล์ .astro ต่างหากแล้ว import เข้ามา

Astro
---
// Self-contained page — no separate component files needed
const team = [
  { name: "Alice", role: "Engineer" },
  { name: "Bob", role: "Designer" },
  { name: "Carol", role: "PM" },
];
---
<html lang="en">
  <head><meta charset="utf-8" /><title>Team</title></head>
  <body style="font-family:sans-serif;padding:2rem">
    <header style="border-bottom:1px solid #e2e8f0;padding-bottom:1rem;margin-bottom:2rem">
      <h1>Our Team</h1>
    </header>
    <ul style="list-style:none;padding:0;display:grid;gap:1rem">
      {team.map((member) => (
        <li style="border:1px solid #e2e8f0;border-radius:8px;padding:1rem">
          <strong>{member.name}</strong>
          <span style="color:#888;margin-left:.5rem">{member.role}</span>
        </li>
      ))}
    </ul>
  </body>
</html>
statement `import` สำหรับ component ต้องอยู่ที่ไหนในไฟล์ .astro?
import path ใดถูกต้องเมื่อใช้ .astro component?
การ import และใช้ .astro component เพิ่ม JavaScript ลงใน bundle ของ browser หรือไม่?